Как изменить элемент HTML по id?

Question

Это вопрос новичка, я следую за курсом javascript, и он должен работать, но это не так.

На моей странице HTML есть следующие элементы (выполненные таким образом, чтобы "x1 =" и число находились в одной строке):

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

и в javascript часть Я пытаюсь изменить эти элементы следующим кодом

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

, но они не меняются. Я также не вижу ошибки в консоли.

Что я делаю не так?

Answer 1

Проблема <label> не имеет свойства value. Вы должны использовать textContent или innerHTML, например:

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

Answer 2

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

также в

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

идентификатор - "# 2", но в HTML идентификатор - "x2". Попробуйте изменить

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

на

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

Answer 3

Это потому, что value является <input> свойством. Чтобы изменить текст метки, вы должны изменить его innerText. Итак, это будет что-то вроде этого:

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

Если ваша строка содержит HTML, вы можете использовать innerHTML вместо этого. Обратите внимание, что в вашем примере мы ожидаем, что x1 будет переменной.

Answer 4

Не используйте свойство value с <label>, используйте его, например, <input>. Итак, используйте innerHTML или innerText.

Вот ваш полный код (с 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>

Живая демоверсия: https://codepen.io/marchmello/pen/abvLENr?editors=1010

А вот ваш код (с 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>

Answer 5

Используйте textContent или innerHTML

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