Skip to content

[HTML] Click the button in the web page to change the text

Use an “input box”, a “button”, and a text component-and then display the text in the input box on the text component when the button is clicked. This simple job is almost the Hello World of the interactive interface. Test it out every time you use a different framework to write an interface.

What I want to record today is the same simple use of HTML and Javascript to perform the above tasks. Let’s get started!

Code

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>ClayAtlas-HTML</title>
</head>
<body>
     <input id="text">
     <input type="button" value="Enter" onclick="showButtonEvent()">
     <p id="changeText">NULL</p>
</body>
<script>
     function showButtonEvent()
     {
         var content = document.getElementById("text");
         document.getElementById("changeText").textContent=content.value;
     }
</script>
</html>



Output:

ClayAtlas-HTML

NULL

That’s roughly it!

Tags:

Leave a Reply