如何在选择框更改JavaScript值时添加和删除消息？

Posted 2021-05-07

我正在尝试创建一条消息，当在“选择框”中选择特定值时提醒客户。我的目标是，当选择option_2时，将此消息追加到描述段落的下面，并在选择任何其他值时删除该消息。

我有两个问题：

1. 我能够将消息追加到我的本地开发中（由于某种原因，我无法使其在JSFiddle中正常工作，但是我无法删除它]]
2. 每次选择option_2，都会附加另一个p元素，可能是问题1的症状。

这里是小提琴！ Fiddle

HTML：

<h2>
  Choose an Option:
</h2>
<select id="test">
  <option value="option_1">Option 1</option>
  <option value="option_2">Option 2</option>
  <option value="option_3">Option 3</option>
</select>

<h3>
  Add Ons:
</h3>
<div class="wc-pao-addon-tone-cap">
  <div class="wc-pao-addon-description">
  <p>
    These are the add ons that you can have:
  </p>
  </div>
  <p>
    <label><input type="checkbox">Add On 1</label>
  </p>
  <p>
    <label><input type="checkbox">Add On 2</label>
  </p>
  <p>
    <label><input type="checkbox">Add On 3</label>
  </p>
</div>
JavaScript

function alertMessage() {
  let toneTwo = document.querySelector('#test');
  let toneCap = document.querySelector('.wc-pao-addon-tone-cap');
  let description = document.querySelector('.wc-pao-addon-description');
  let descriptionParagraph = description.firstChild;


  toneTwo.addEventListener('change', () => {
    if (toneTwo.value == "option_2") {

      const newMessage = document.createElement('p');
      newMessage.innerhtml = '<p class="option-two-alert" style="color: red; margin: 10px 0 0;"><i class="fas fa-exclamation-circle"></i> Select Only One Add On When Option 2 Is Selected.</p>';
      descriptionParagraph.appendChild(newMessage);
    } else {
      newMessage.innerHTML = '';
      descriptionParagraph.removeChild(newMessage);
    }
  });
}

window.addEventListener("load", alertMessage);

我正在尝试创建一条消息，当在“选择框”中选择特定值时提醒客户。我的目标是当选择option_2时，将此消息添加到描述段落的下面，...

答案

该警报未添加到jsfiddle上，因为描述的第一个子项是TextNode。尝试使用firstElementChild。您在事件侦听器中也遇到了问题，您永远不会删除警报。解决方法如下：

另一答案

firstChild返回第一个子节点作为您可能不希望的元素节点，文本节点或注释节点。尝试使用firstElementChild。