当 select 框更改 JavaScript 中的值时，如何添加和删除消息？

Question

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.

I'm having two problems:

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 time option_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);

Answer 1

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 .

Change

let descriptionParagraph = description.firstChild;

To

let descriptionParagraph = description.firstElementChild;

To remove the message you can use the following code in else part

let m = document.querySelector('.option-two-alert')
if(m) { m.remove() };

Demo:

 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 { let m = document.querySelector('.option-two-alert') if(m) { m.remove(); } } }); } 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>

Answer 2

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);

Answer 3

You will probably be better off by not inserting a new element in to your DOM every time a user selects "option two", instead you should have the element there all the time and make it visible only when option two is selected:

 window.addEventListener("load", function(){ document.querySelector('#test').addEventListener('change', (ev) => { document.querySelector('.option-two-alert').style.display=ev.target.value=="option_2"?'block':'none'; }) })

 .option-two-alert {display:none} /* initially hidden! */

 <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> <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> </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>

Answer 4

There are some issues in your code, so will brief it, what the expected output you are looking was when you click on the second option you need to have red text wrapped with i and p tag. That should display below the current p tag **These are the add ons that you can have:**

Issues to be fixed

1. let descriptionParagraph = description.firstChild; this will give you the text so you were trying to append to this that wont work.
2. newMessage.innerHTML = '<p class=".... , you can't add like this you need to build the html elements
3. Also you need to have the check description.childNodes[3] && description.removeChild(description.childNodes[3]); , assume if the user directly clicks on option_3 that wont have ap tag so you need to consider that case with this check.

I hope you have got a fair idea

Check the below code.

 function alertMessage() { let toneTwo = document.querySelector('#test'); let toneCap = document.querySelector('.wc-pao-addon-tone-cap'); let description = document.querySelector('.wc-pao-addon-description'); toneTwo.addEventListener('change', () => { const newMessage = document.createElement('p'); if (toneTwo.value == "option_2") { let iTag = document.createElement('i'); iTag.className = 'fas fa-exclamation-circle'; let pTag = document.createElement('p'); pTag.style.cssText = "color: red; margin: 10px 0 0"; let pTagText = document.createTextNode("Select Only One Add On When Option 2 Is Selected."); pTag.appendChild(iTag) pTag.appendChild(pTagText) description.appendChild(pTag) } else { newMessage.innerHTML = ''; description.childNodes[3] && description.removeChild(description.childNodes[3]); } }); } 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>