How to implement the button display function of different content in javascript

JavaScript is a commonly used front-end programming language that is often used in website development. One of the common functions is to display different content when a button is clicked. In this article, we will learn how to use JavaScript to achieve this functionality.

First, we need to define a button and bind a click event to it. This can be done by adding the following code in the HTML file:

<button onclick="showContent()">显示内容</button>

In this button, we have added an onclick attribute to it and set it to showContent() function. This function will be called when this button is clicked.

Next, we need to write the showContent() function to achieve the effect of displaying different content when the button is clicked. We can achieve this by creating an HTML element and modifying its content. In order to keep the code structure clear, we can define this HTML element within <div> or other container elements. The code is as follows:

<div id="content"></div>

Using JavaScript, you can obtain the element and modify its content to achieve the effect of displaying different content when the button is clicked. Below is a simple sample code that will alternately display the contents of "Hello!" and "World!" when the button is clicked.

function showContent() {
  var content = document.getElementById("content");
  if (content.innerHTML === "Hello!") {
    content.innerHTML = "World!";
  } else {
    content.innerHTML = "Hello!";
  }
}

In this code, we first obtain the <div> element through document.getElementById("content") and store it in content variable. We then check if the content of the element is "Hello!". If it is, we modify its content to "World!", otherwise we modify its content to "Hello!".

Through the above code, we can realize the function of alternately displaying different content when the button is clicked.

In addition, we can also use other HTML elements to achieve different effects. For example, we can enter different content in an <input> element and display it when the button is clicked. The sample code is as follows:

<button onclick="showContent()">显示内容</button>

function showContent() {
  var content = document.getElementById("content").value;
  alert(content);
}

In this example, we first define an <input> element and add an id attribute to it, so that we can Get the content of the element directly. When the button is clicked, we use the alert() function to pop up the value of the element to achieve the effect of displaying different content.

JavaScript buttons to display different content is a common front-end development requirement. Through the examples in this article, I hope to help readers learn how to use JavaScript to implement this function, and also understand the application of JavaScript in front-end development.

The above is the detailed content of How to implement the button display function of different content in javascript. For more information, please follow other related articles on the PHP Chinese website!