Javascript change inner HTML

Fox :

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?

j08691 :

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>