Question

当您选中复选框时，我试图将文本“是，我喜欢F1”出现在div中，其id =“print-f1”，这是有效的。

但是取消选中该复选框后，文字不会消失。

另外我注意到，如果我在默认情况下设置复选框以检查HTML，它不会加载页面上带有'是，我喜欢F1'添加到id =“print-f1”div。

我没有使用innerHTML = '';删除文字，因为I read using removeChild is much more efficient。

我还将输入中输入的任何名称添加到第一个灰色div中，其中id =“print-name”该部分正在工作。

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

替换此......

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

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

......有了......

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

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

......它应该可以正常工作。

另见this Fiddle演示。

注意：

在这种特殊情况下，我严重怀疑在使用printF1.removeChild(printF1.firstChild);代替printF1.innerHTML = '';

时，您会获得很大的性能提升（如果有的话）

但是，如果您坚持使用printF1.removeChild(printF1.firstChild);，请注意您可以删除while循环，因为printF1每次执行时始终只有一个子项：

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

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

另见this Fiddle演示。

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

1 个答案:

注意：