选中复选框时，使用innerHTML添加的文本未选中时不会删除

Question

When you check the checkbox I am trying to make the text 'Yes, I like F1' appear in the div with the id="print-f1", which is working.

However the text doesn't disappear when you uncheck the checkbox.

Also I noticed if I set the checkbox by default to checked in the HTML, it doesn't load the page with 'Yes, I like F1' adding to the id="print-f1" div either.

I am not using innerHTML = ''; to remove the text because I read using removeChild is much more efficient .

I am also adding whatever name is entered inside the input into the first grey div with the id="print-name" that part is working.

https://jsfiddle.net/r8qbfdmy/

JS

function myForm() {
  var nameForm = document.forms.nameform;
  var printF1 = document.getElementById('print-f1');

  nameForm.name.onkeyup = function() {
    document.getElementById('print-name').innerHTML = nameForm.name.value;
  };

  nameForm.likef1.addEventListener("focus", printF1func)

  function printF1func() {
    if (printF1.checked === false) {
      while (printF1.firstChild) printF1.removeChild(printF1.firstChild);
    } else {
      printF1.innerHTML = nameForm.likef1.value;
    };
  };

};
myForm();

HTML

<form name="nameform">
  <input name="name" class="form__input rounded-4" placeholder="Enter your name">
  <label>
    <input type="checkbox" name="likef1" value="Yes, I like F1"> Do you like F1?
  </label>
  <div id="print-name" class="rounded-4"></div>
  <div id="print-f1" class="rounded-4"></div>
</form>

CSS

.rounded-4 {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.form__input {
  border-width: 2px;
  border-style: solid;
  border-color: #989898;
  width: 200px;
  line-height: 40px;
  color: #989898;
  padding: 0 12px;
  font-size: 16px;
  outline: none;
  margin: 20px;
}

#print-name {
  background-color: #989898;
  width: 200px;
  line-height: 40px;
  height: 40px;
  color: #fff;
  padding: 0 12px;
  font-size: 16px;
  outline: none;
  margin: 0 20px;
}

#print-f1 {
  background-color: #989898;
  width: 200px;
  line-height: 40px;
  height: 40px;
  color: #fff;
  padding: 0 12px;
  font-size: 16px;
  outline: none;
  margin: 20px;
}

Answer 1

Replace this...

nameForm.likef1.addEventListener("focus", printF1func)

function printF1func() {
    if (printF1.checked === false) {
        while (printF1.firstChild) printF1.removeChild(printF1.firstChild);
    } else {
        printF1.innerHTML = nameForm.likef1.value;
    };
};

... with this...

nameForm.likef1.addEventListener("change", printF1func);

function printF1func() {
    if (nameForm.likef1.checked) {
        printF1.innerHTML = nameForm.likef1.value;
    } else {
        printF1.innerHTML = '';
    }
};

... and it should work fine.

See also this Fiddle for a demo.

---

Note :

In this particular case, I seriously doubt you'll get much of a performance gain (if any at all) when using printF1.removeChild(printF1.firstChild); instead of printF1.innerHTML = '';

If you insist on using printF1.removeChild(printF1.firstChild); , however, note that you can drop the while loop, because printF1 will always have exactly one child every time it is executed :

nameForm.likef1.addEventListener("change", printF1func);

function printF1func() {
    if (nameForm.likef1.checked) {
        printF1.innerHTML = nameForm.likef1.value;
    } else {
        printF1.removeChild(printF1.firstChild);
    }
};

See also this Fiddle for a demo.