Javascript更改内部HTML答案

【问题标题】：Javascript change inner HTMLJavascript更改内部HTML
【发布时间】：2020-06-19 15:01:30
【问题描述】：

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

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>

为什么这不起作用？

【问题讨论】：

这能回答你的问题吗？ What do querySelectorAll and getElementsBy* methods return?
@HereticMonkey 它有帮助，但它无论如何都不起作用

标签： javascript html function innerhtml

【解决方案1】：

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>

【讨论】：

我已经完成了，但没有任何改变...您是否修改了其他任何内容以使其正常工作？
@Fox 不，您可以在我的回答中看到完整的工作代码示例。您是否检查过浏览器的控制台是否有错误？您在问题中发布的代码是否准确、完整地反映了您的问题？
控制台说：“私有不是函数”
@Fox 在某处听起来像是错字
当然...但是我检查了它，没有错字！函数会与 id 名称冲突吗？

【解决方案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>

【讨论】：

那么您还有其他问题。检查您的控制台日志。您可以在此处的代码 sn-p 中清楚地看到它正在运行。
上面写着Uncaught TypeError: private is not a function at HTMLInputElement.onclick
@Fox 与您发布的正确回答的问题无关，这是一个骗局。如果您还有其他问题，请提出其他问题。

【解决方案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>

【讨论】：