当选择框更改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>