Javascript更改内部HTML

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

函数私有（）{
var checkBox=document.getElementById（“private”）；//获取复选框
var text=document.querySelector（'label[for=“private”]”）；//获取输出文本
如果（checkBox.checked==true）
{
text.innerHTML=“Public”；
}否则{
text.innerHTML=“Private”；
}
}

返回节点列表，因此需要指定所需的元素，如：

函数私有（）{
var checkBox=document.getElementById（“private”）；//获取复选框
var text=document.querySelectorAll（'label[for=“private”]'）[0]；//获取输出文本
如果（checkBox.checked==true）
{
text.innerHTML=“Public”；
}否则{
text.innerHTML=“Private”；
}
}

返回节点列表，因此需要指定所需的元素，如：

函数私有（）{
var checkBox=document.getElementById（“private”）；//获取复选框
var text=document.querySelectorAll（'label[for=“private”]'）[0]；//获取输出文本
如果（checkBox.checked==true）
{
text.innerHTML=“Public”；
}否则{
text.innerHTML=“Private”；
}
}

---

您需要使用

querySelector（）

而不是

queryselectoral（）

。通过获取所有元素，您必须遍历项目列表（即使只有1个）

函数私有（）{
var checkBox=document.getElementById（“private”）；//获取复选框
var text=document.querySelector（'label[for=“private”]”）；//获取输出文本
如果（checkBox.checked==true）
{
text.innerHTML=“Public”；
}否则{
text.innerHTML=“Private”；
}
}

---

您需要使用

querySelector（）

而不是

queryselectoral（）

。通过获取所有元素，您必须遍历项目列表（即使只有1个）

函数私有（）{
var checkBox=document.getElementById（“private”）；//获取复选框
var text=document.querySelector（'label[for=“private”]”）；//获取输出文本
如果（checkBox.checked==true）
{
text.innerHTML=“Public”；
}否则{
text.innerHTML=“Private”；
}
}

---

我建议有三件事可以解决您的问题：

• 将

  事件

  对象传递给函数。它包含有关

  单击事件的所有信息，包括单击的元素。这意味着您不必搜索DOM

• 不要用标签包装表单控件。这不是标签的工作原理。而是使用类似于

  节的标记

• 当提供属性的

  时，表单控件及其标签将自动连接。另一个可以通过
  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";
}

---

我建议有三件事可以解决您的问题：

• 将

  事件

  对象传递给函数。它包含有关

  单击事件的所有信息，包括单击的元素。这意味着您不必搜索DOM

• 不要用标签包装表单控件。这不是标签的工作原理。而是使用类似于

  节的标记

• 当提供属性的

  时，表单控件及其标签将自动连接。另一个可以通过
  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";
}

这是否回答了您的问题@异端猴子它有帮助，但它无论如何都不起作用这回答了你的问题吗@异端猴子它有帮助，但它无论如何都不起作用我做了，但没有改变。。。您是否修改了任何其他内容以使其工作？@Fox no，您可以在我的答案中看到完整的工作代码示例。您是否检查了浏览器控制台中的错误？您在问题中发布的代码是否准确、完整地反映了您的问题？控制台说：“私有不是一个功能”@Fox听起来像是一个打字错误，当然。。。但我检查过了，没有打字错误！一个函数可以和一个id名冲突吗？我已经做了，但是没有改变。。。您是否修改了任何其他内容以使其工作？@Fox no，您可以在我的答案中看到完整的工作代码示例。您是否检查了浏览器控制台中的错误？您在问题中发布的代码是否准确、完整地反映了您的问题？控制台说：“私有不是一个功能”@Fox听起来像是一个打字错误，当然。。。但我检查过了，没有打字错误！函数是否会与id名称冲突？然后您会遇到其他问题。检查控制台日志。您可以在这里的代码片段中清楚地看到它正在运行。它说

Uncaught TypeError:private不是HTMLInputElement的函数。onclick

@Fox与您发布的正确答案的问题无关，这是一个重复引导。如果你有其他问题，问另一个问题。然后你还有其他问题。检查控制台日志。您可以在这里的代码片段中清楚地看到它正在运行。它说

uncaughttypeerror:private不是HTMLInputElement.onclic的函数