Javascript 更改内部 HTML

Question

I'd like to change the value of a label depending on the status of its checkbox

 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>

Why doesn't this work?

Answer 1

querySelectorAll returns a nodelist, so you need to specify the element you want like:

 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>

Or maybe just use querySelector instead which only returns the first match:

 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

You need to use querySelector() not querySelectorAll() . By getting all elements, you would have to iterate through the list of items (even though there is only 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

There are three things that I would suggest that will solve your problem:

• Pass the event object to your function. This contains everything about the click event, including what element was clicked on. This means you don't have to scour the DOM.
• Do not wrap a form control with a label . This is not how labels were intended to work. Instead use something like a section tag.
• Form controls and their labels are automatically connected when a for attribute is provided. The other can be found through control.labels[0] or label.htmlFor . This is particularly why you want to adhere to the standard of not wrapping controls with labels

---

With these adjustments, and the addition of a ternary condition statement to determine what text to display, the code will look like this:

<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";
}

Example:

 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>