CODEWITHSUNDEEP
javascripthtmldom
Qwertie
Qwertie

Reputation: 6573

document.getElementById().textContent not working with variable

When I use document.getElementById().textContent to set the "text content" to the value of a variable it doesn't work it doesn't to anything instead changing the text content to the value of the variable. It does work when I use 

.textContent = "example";

but not

.textContent = example;

Here is my HTML

<head>
   <link rel="stylesheet" type="text/css" href="style.css">
   <script language="javascript" type="text/javascript" src="testScript.js"></script>
</head>

<body>
   <p class="heading">Heading</p>
   <p id="TextSpace"></p>


</body>

Here is my JS

//Get users name
var name = prompt("What is you name");
//put the name in the element "text space"
document.getElementById("TextSpace").textContent = name;

The prompt appears but after that nothing happens

Upvotes: 6

Views: 31692

Answers (2)

Codewithme Arjun
Codewithme Arjun

Reputation: 21

Instead of putting the script tag at the bottom, you can just put defer and it will work perfectly fine

<head>
   <link rel="stylesheet" type="text/css" href="style.css">
   <script language="javascript" type="text/javascript" src="testScript.js" defer></script>
</head>

<body>
   <p class="heading">Heading</p>
   <p id="TextSpace"></p>


</body>

Upvotes: 2

adeneo
adeneo

Reputation: 318312

Move the script

<head>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
   <p class="heading">Heading</p>
   <p id="TextSpace"></p>

   <script language="javascript" type="text/javascript" src="testScript.js"></script>
</body>

or add an onload handler

window.onload = function() {
    var name = prompt("What is you name");
    document.getElementById("TextSpace").textContent = name;
}

Right now the script is running before the elements in the DOM are available.
Note that textContent is not available in IE8 and below.

Upvotes: 8

Related Questions