Javascript изменить внутренний HTML - PullRequest
Новая
       27

Javascript изменить внутренний HTML

0 голосов
/ 06 марта 2020

Я хочу изменить значение метки в зависимости от состояния ее флажка 

function private() {
  var checkBox = document.getElementById("private");// Get the checkbox
  var text = document.querySelector('label[for="private"]');// Get the output text

  if (checkBox.checked == true)
  {
    text.innerHTML = "Public";
  } else {
    text.innerHTML = "Private";
  }
}
<label class="switch">
  <input id="private" type="checkbox" onclick="private()" />
  <span class="slider"></span>
</label>
<label for="private"></label>

Почему это не работает?

Ответы [ 3 ]

2 голосов
/ 06 марта 2020

querySelectorAll возвращает список узлов, поэтому вам нужно указать нужный элемент: 

function private() {
  var checkBox = document.getElementById("private");// Get the checkbox
  var text = document.querySelectorAll('label[for="private"]')[0];// Get the output text

  if (checkBox.checked == true)
  {
    text.innerHTML = "Public";
  } else {
    text.innerHTML = "Private";
  }
}
<label class="switch">
  <input id="private" type="checkbox" onclick="private()" />
  <span class="slider"></span>
</label>
<label for="private"></label>

Или, возможно, просто используйте querySelector вместо этого, который возвращает только первое совпадение: 

function private() {
  var checkBox = document.getElementById("private");// Get the checkbox
  var text = document.querySelector('label[for="private"]');// Get the output text

  if (checkBox.checked == true)
  {
    text.innerHTML = "Public";
  } else {
    text.innerHTML = "Private";
  }
}
<label class="switch">
  <input id="private" type="checkbox" onclick="private()" />
  <span class="slider"></span>
</label>
<label for="private"></label>
1 голос
/ 07 марта 2020

Есть три вещи, которые я бы посоветовал решить вашу проблему:

  • Передайте объект event в вашу функцию. Он содержит все о событии click, , включая , по какому элементу щелкнули. Это означает, что вам не нужно обыскивать DOM.
  • Делать не оборачивать элемент управления формы меткой . Это не то, как ярлыки должны были работать. Вместо этого используйте что-то вроде тега section.
  • Элементы управления формы и их метки автоматически подключаются, когда предоставляется атрибут for. Другой может быть найден через control.labels[0] или label.htmlFor. Именно поэтому вы хотите придерживаться стандарта , не оборачивая элементы управления ярлыками

С этими настройками и добавлением троичного оператор условия, чтобы определить, какой текст отображать, код будет выглядеть так: 

<section class="switch">
  <input id="private" type="checkbox" onclick="private(event)" />
  <span class="slider"></span>
</section>

<label for="private"></label>

function private(e) {
  var checkBox = e.currentTarget,
  label = checkBox.labels[0];

  label.textContent = checkBox.checked ? "Public" : "Private";
}

Пример: 

function private(e) {
  var checkBox = e.currentTarget,
  label = checkBox.labels[0];
  
  label.textContent = checkBox.checked ? "Public" : "Private";
}
<section class="switch">
  <input id="private" type="checkbox" onclick="private(event)" />
  <span class="slider"></span>
</section>

<label for="private"></label>
1 голос
/ 06 марта 2020

Вам нужно использовать querySelector(), а не querySelectorAll(). Получив все элементы, вам придется перебирать список элементов (хотя их всего 1). 

function private() {
  var checkBox = document.getElementById("private");// Get the checkbox
  var text = document.querySelector('label[for="private"]');// Get the output text

  if (checkBox.checked == true)
  {
    text.innerHTML = "Public";
  } else {
    text.innerHTML = "Private";
  }
}
<label class="switch">
  <input id="private" type="checkbox" onclick="private()" />
  <span class="slider"></span>
</label>
<label for="private"></label>
...