This is a beginner question, I am following a javascript course, and it should work but it does not.

In my HTML page I have the following elements (done that way so the "x1=" and the number are on the same line):

<section id="results">
  Solutions
  <p></p>
  x1=<label id="x1">0</label>
  <p></p>
  x2=<label id="x2">0</label>
</section>

and in the javascript part I try to change these elements with the following code

document.getElementById("x1").value = x1;
document.getElementById("x2").value = x2;

but they do not change. I also do not see an error in the console.

What am I doing wrong?

This is a beginner question, I am following a javascript course, and it should work but it does not.

In my HTML page I have the following elements (done that way so the "x1=" and the number are on the same line):

<section id="results">
  Solutions
  <p></p>
  x1=<label id="x1">0</label>
  <p></p>
  x2=<label id="x2">0</label>
</section>

and in the javascript part I try to change these elements with the following code

document.getElementById("x1").value = x1;
document.getElementById("x2").value = x2;

but they do not change. I also do not see an error in the console.

What am I doing wrong?

• javascript
• html

• 1 .value = x1; what is x1 here? – palaѕн Commented May 1, 2020 at 15:29
• It is a well defined number which I print to the console and verified it is a number, like e.g. -4.302775637731995 (float) – Alex Commented May 1, 2020 at 15:29
• 3 <label> elements don't have a value property. Maybe you meant to manipulate <input> elements? – Emiel Zuurbier Commented May 1, 2020 at 15:30
• Yes thats it! 'input' is my 'output'. It is somewhat confusing to name an output element input... – Alex Commented May 1, 2020 at 15:31

5 Answers 5

The issue is <label> does not have a value property. You have to either use textContent or innerHTML like:

document.getElementById("x1").textContent = x1;
document.getElementById("x2").textContent = x2;

Don't use the value property with <label>, use it on <input> for example. So, use innerHTML or innerText instead.

Here is your full code (with innerHTML):

let x1 = 2;
let x2 = 5;

document.getElementById("x1").innerHTML = x1;
document.getElementById("x2").innerHTML = x2;

<section id="results">
  Solutions
  <p></p>
  x1=<label id="x1">0</label>
  <p></p>
  x2=<label id="x2">0</label>
</section>

A living demo: https://codepen.io/marchmello/pen/abvLENr?editors=1010

And here is your code (with innerText):

let x1 = 2;
let x2 = 5;

document.getElementById("x1").innerText = x1;
document.getElementById("x2").innerText = x2;

<section id="results">
  Solutions
  <p></p>
  x1=<label id="x1">0</label>
  <p></p>
  x2=<label id="x2">0</label>
</section>

Use textContent or innerHTML

document.getElementById("x1").innerHTML = x1;

document.getElementById("x1").setAttribute = "x1";
document.getElementById("#2").setAttribute = "x2";

also in

document.getElementById("#2").setAttribute = "x2";

the id is "#2" but in HTML the id is "x2". Consider changing the

document.getElementById("x1").setAttribute = "x1";
document.getElementById("#2").setAttribute = "x2";

to

document.getElementById("x1").setAttribute = "x1";
document.getElementById("x2").setAttribute = "x2";

Its because value is an <input> property. To change a label text you must change it innerText. So, it will be be something like that:

document.getElementById("x1").innerText = x1;

If your string contains HTML, you can use innerHTML instead. Note that in your example we are expecting x1 to be a variable.