当选择框更改JavaScript中的值时,如何添加和删除消息?

I'm trying to create a message that alerts a customer when a specific value is selected in a Select Box. My goal is to append this message underneath a description paragraph when option_2 is selected, and remove the message when any other value is selected.

我有两个问题:

  1. I'm able to get the message to append in my local development (for some reason I cannot get this to work in JSFiddle), but I can't get it to remove
  2. Every timeoption_2 is selected, another p element gets appended, probably a symptom of problem 1.

Here's a fiddle! 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);

评论
彻底放弃了
彻底放弃了

The alert is not added on jsfiddle because the first child of the description there is a TextNode. Try using firstElementChild. You also have an issue in the event listener, you never remove the alert. Here's how you can fix it:

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.firstElementChild;
  let newMessage;

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

      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 if (newMessage) {
      descriptionParagraph.removeChild(newMessage);
    }
  });
}

window.addEventListener("load", alertMessage);
点赞
评论
第夏山
第夏山

firstChild returns the first child node as an element node, a text node or a comment node which you probably do not want. Try using firstElementChild.

更改

let descriptionParagraph = description.firstChild;

let descriptionParagraph = description.firstElementChild;
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.firstElementChild;

  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);
<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>
点赞
评论