How to use onclick event in JavaScript

onclick is an event, which will be processed when the event is triggered. onclick is an event that handles mouse clicks. This article will share with you the usage of onclick events in How to use onclick event in How to use onclick event in How to use onclick event in JavaScript.

Let’s first take a look at the syntax of the onclick event

The following is how to use the onclick event to write.

Use document.getElementById() to specify the id element in the document, and use function(){} to handle the event that occurs when the element is clicked.

document.getElementById("button").onclick = function() {
  // 设置在此处单击#button时要发生的事件
};

Let’s look at specific examples

The following is an example of using the onclick event.

Change text when button is clicked

HTML code

<div id="text-button"><p id="text">点击</p></div>

CSS code

#text-button {
  display: block;
  cursor: pointer;
  width: 160px;
  text-align: center;
  border: 1px solid #232323;
}

How to use onclick event in How to use onclick event in How to use onclick event in JavaScript code

document.getElementById("text-button").onclick = function() {
document.getElementById("text").innerHTML = "我点击了！";
};

The result displayed on the browser is as follows

When this box is clicked, the following effect will be displayed: the text in the box has changed

When the box is clicked, the background color of the box changes

HTML code

<div id="square-button"></div>

CSS code

#square-button {
  width: 80px;
  height: 80px;
  background: #232323;
}
#square-button.blue {
  background: #21759b;
}

How to use onclick event in How to use onclick event in How to use onclick event in JavaScript Code

document.getElementById("square-button").onclick = function() {
  this.classList.toggle("blue");
};

The browser displays the following effect: It is a black box

When this box is clicked, the color will change and the display effect As follows

Display the content entered in the form

HTML code

<p>你叫什么名字？</p>
<input type="text" id="name">
<button type="button" id="form-button">输入</button>
<div id="form-text"></div>

CSS Code

:focus {
  outline: 1px solid #666;
}
input[type="text"] {
  margin: 0 0 15px;
  padding: 8px 10px;
  border: 1px solid #d0d1d3;
}
button {
  padding: 8px 15px;
  background: #979380;
  color: #fff;
  border: none;
}

How to use onclick event in How to use onclick event in How to use onclick event in JavaScript code

document.getElementById("form-button").onclick = function() {
  document.getElementById("form-text").innerHTML = "你好 " + document.getElementById("name").value + " 同学！";
}

The display effect on the browser is as follows

When you enter a name in the text box, such as Zhang 3. Then click Enter and the following effect will be displayed

## This article ends here. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website for further learning. ! ! !

The above is the detailed content of How to use onclick event in JavaScript. For more information, please follow other related articles on the PHP Chinese website!