How can I change text in HTML tag span?

Question

//I am trying change text after click on it in web page

text = document.querySelector(".text");
text.addEventListener("click", changeText=()=> {
 
    text = document.textContent = "NewText";

});

But it is not working. Why? I have try to use innerHTML? but it isnot working yet...

Answer 1

You have to set text.textContent instead of document.textContent to the new value.

text = document.querySelector(".text");
text.addEventListener("click", function() {
     text.textContent = "NewText";
});

<span class="text">Text</span>

Answer 2

You are reassigning text to document.textContent, which is not what you want.

// Get a reference to the element you'll want to change
text = document.querySelector(".text");

// Set up an event handler on that element
text.addEventListener("click", changeText=()=> {
    // Change the .textContent of that element:
    text.textContent = "NewText";

    // Within the DOM element event handler, you can also 
    // refer to the element that the event was triggered on
    // with the "this" keyword, so you could also do this:
    //this.textContent = "NewText";
});

<span class="text">Original Text</span>