Javascript 改变内部 HTML

Question

我想根据复选框的状态更改标签的值

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>

为什么这不起作用？

Answer 1

querySelectorAll returns 一个节点列表，所以你需要像这样指定你想要的元素：

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 而不是只有 returns 第一场比赛：

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>

Answer 2

您需要使用 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>

Answer 3

我建议以下三点可以解决您的问题：

将 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>

Javascript 改变内部 HTML

Javascript change inner HTML

html

javascript

function

innerhtml

示例：