How to change some html text using Js code?

Question

I already google so please don't tell me to google it because I can't understand what I've done wrong. When I press the Submit button nothing happens on the website.

Here is my HTML file:

<button onclick="runThis()">Submit</button>
<h1 id="apples">Hello</h1>

<script>
    function runThis() {
        var getTextID = document.getElementsByTagName("apples");
        getTextID = "Hello guys";
    }
</script>

mac user by the way if that makes any difference.

Answer 1

First of all, apples is not the tag name, it is the id of the element. The tag name is h1 .

Then getElementsByTagName() returns colection. You have to use specific index like:

getElementsByTagName('h1')[0]

Though it should be getElementsById() as your are trying to get the element with id attribute. Also, getTextID refers to the element itself, you have to use the textContent or innerText property to set the text in the element.

Try the following way:

 function runThis(){ var getTextID = document.getElementById("apples"); getTextID.textContent = "Hello guys"; } 

 <button onclick="runThis()">Submit</button> <h1 id="apples">Hello</h1> 

Answer 2

Try using this; document.getElementById("apples")

Answer 3

You are using the wrong selector. getElementsByTagName() will look for the element tag name h1 not the ID .

Replace your query selector to document.getElementById("apples") and to set new content you can use getTextID.textContent = "Hello guys";

Here Is A JsFiddle Example

 function runThis() { var getTextID = document.getElementById("apples"); getTextID.textContent = "Hello guys"; } 

 <button onclick="runThis()">Submit</button> <h1 id="apples">Hello</h1> 

If you have any questions please leave a comment below and I well get back to you as soon as possible.

I hope this helps. Happy coding!

Answer 4

You can also use querySelector & innerHTML .

 function runThis() { var getTextID = document.querySelector("#apples"); getTextID.innerHTML = "Hello guys"; } 

 <button onclick="runThis()">Submit</button> <h1 id="apples">Hello</h1> 

Please check more here about getElement* and querySelector*: https://javascript.info/searching-elements-dom

Answer 5

The method you are using, getElementsByTagName, returns elements with a tag name, not a single element with an ID like what you want. To fix this part of the issue, add, use getElementById instead:

var getTextID = document.getElementById("apples");

Secondly, you need to replace the inner text of the element, not the element itself, so you should use innerText:

getTextID.innerText = "Hello guys";

Fully working demo:

 function runThis() { var getTextID = document.getElementById("apples"); getTextID.innerText = "Hello guys"; } 

 <button onclick="runThis()">Submit</button> <h1 id="apples">Hello</h1> 

Hopefully this helps!

Answer 6

    function runThis(){
        document.getElementById("apples").innerHTML = "Problem solved ";
    }