click button to display text javascript

Click Button to Display Text Javascript

Displaying text on a webpage dynamically is a common requirement. One of the easiest ways to do this is by using JavaScript to display text when a button is clicked. Here's how you can do it:

Method 1: Using InnerHTML property

First, create a div element with an id that you'll use to display the text:

<div id="text"></div>

Then, create a button element with an onclick event handler that will call a JavaScript function:

<button onclick="displayText()">Click me</button>

Finally, create the JavaScript function that will change the innerHTML property of the div element to display the desired text:

function displayText() {
  document.getElementById("text").innerHTML = "Hello, world!";
}

Now, when the button is clicked, the "Hello, world!" text will be displayed in the div element.

Method 2: Using AppendChild method

If you want to add new text every time the button is clicked instead of replacing the existing text, you can use the appendChild method instead of the innerHTML property:

<div id="text"></div>
<button onclick="displayText()">Click me</button>

function displayText() {
  var para = document.createElement("p");
  var node = document.createTextNode("Hello, world!");
  para.appendChild(node);
  var element = document.getElementById("text");
  element.appendChild(para);
}

This will add a new paragraph element with the "Hello, world!" text every time the button is clicked.

Method 3: Using Jquery

If you're using jQuery, you can simplify the code even further:

<div id="text"></div>
<button id="btn">Click me</button>

$(document).ready(function() {
  $("#btn").click(function() {
    $("#text").text("Hello, world!");
  });
});

This will achieve the same result as the first method, but with less code.

There are many other ways to display text when a button is clicked, but these methods should cover most basic requirements. Experiment with different approaches to find the one that works best for your specific use case.