0

I would like to change text in P or other tag in HTML with Java Script

I tried to many different ways. However, any of those didn't work well.

Console says.

Uncaught TypeError: Cannot set property 'textContent' of null

<script>
//1 document.getElementById("stackoverflow").textContent="newtext";
//2 document.getElementById("stackoverflow").value ="newtext";
//3 document.getElementById("stackoverflow").innerHTML ="newtext";

<script>
 <div class="row">
<p id="stackoverflow">I wanna change this text</p>
</div>
conny
  • 119
  • 1
  • 7

5 Answers5

2

Two changes

  1. move your script after element is loaded
  2. remove id from markup below code works

document.getElementById("stackoverflow").textContent="newtext";
<p id="stackoverflow">I wanna change this text</p>
Dev Ananth
  • 447
  • 1
  • 3
  • 10
  • Thank you . I tried your code on my browser.however, the console says. Uncaught TypeError: Cannot set property 'textContent' of null – conny Aug 13 '21 at 06:11
  • try this:

    I wanna change this text

     – Dev Ananth Aug 13 '21 at 06:16
  • you can access the element only after html tag is loaded. – Dev Ananth Aug 13 '21 at 06:17
  • I realised scripts are loaded before html tags . I modified the order. then it went well. thanks. – conny Aug 13 '21 at 06:20
0

Check your id there is no space in between. id is stackoverflow and your giving document.getElementById("stack overflow")

Vaibhav Deshmukh
  • 183
  • 1
  • 11
0

That is completly normal as long as you have two id attributes on the p tag only the first one will be consider.

let p = document.getElementById("stackoverflow");
console.log(p);
<p id id="stackoverflow">This is a sample paragraph</p>

But when you remove the first id it should work as expected

let p = document.getElementById("stackoverflow")
console.log(p);
<p id="stackoverflow">This is a sample paragraph</p>

let p = document.querySelector("p");

console.log(p.id);
<p id id="stackoverflow">This is a sample paragraph</p>

As you can see the idattribute is empty

Yves Kipondo
  • 5,289
  • 1
  • 18
  • 31
0
  • Place always your <script> tag right before the closing </body> tag
  • Close properly the </script> tag

<head>
  <!-- HEAD stuff goes here. link, meta, title etc -->
</head>

<body>
  <div class="row">
    <p id="stackoverflow">I wanna change this text</p>
  </div>


  <!--
    SCRIPTs go here before the closing </body>  
  -->
  <script>
    document.getElementById("stackoverflow").textContent="newtext";
  </script>
</body>

Additional read on parser blocking versus asynchronous javascript

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • "in a non render-blocking manner." this is not true. Having a script at the end of the markup will still block the rendering just like if it were in the head. To not block the rendering fetching the script should take longer than needed to perform the first paint, and to help in this , the `async` attribute is the closest we have. – Kaiido Aug 13 '21 at 06:22
  • @Kaiido `async` is the closest we have for external scripts. – Roko C. Buljan Aug 13 '21 at 06:27
0

there are 2 ways ,

1 - if you are doing onload event , u can wrap this within your body tag and call your function
2 - if its onlclick event , call this function onclick event
remove comment on button and onload = "ChangeEvent()"

<!DOCTYPE html>
<html>
    <script>
    function ChangeEvent() {
      document.getElementById("stackoverflow").textContent = "HI";
    }
    </script>
    
<body onload="ChangeEvent()">
    <p id="stackoverflow">Change</p>
    <!-- <button onclick="ChangeEvent()">Clicked</button> -->
</body>
</html>
Farid Arshad
  • 334
  • 2
  • 14