Home > Article > Web Front-end > How to implement click switching text in html5
How to implement click switching text in html5
- WBOYOriginal
- 2022-01-13 11:47:006331browse
Method: 1. Bind the click event to the button and specify the event processing function; 2. Use the "document.getElementById("Element")" statement in the function to obtain the specified text element object; 3. Use The statement "Element object.innerHTML='text'" can switch the text.
The operating environment of this tutorial: Windows 10 system, HTML5 version, Dell G3 computer.
html5How to implement click switching text
You can first bind the click event to the button element and specify the event handler function.
In the event handling function, find the text element object and use the innerHTML attribute to set the switched text.
The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p id="test">点击切换文本</p>
<button onclick="editinput()">切换</button>
<script>
function editinput() {
document.getElementById("test").innerHTML='切换了';
}
</script>
</body>
</html>Output result:
html video tutorial 》
The above is the detailed content of How to implement click switching text in html5. For more information, please follow other related articles on the PHP Chinese website!