How do I change paragraph text using JavaScript, depending on which radio button is checked in a form?

Question

What I´m trying to achieve is to have 1 question with 4 possible answers to choose from (radio buttons). When the user presses the button after the form, I want a paragraph to tell them more about the choice they made.

I´ve targeted the button, the paragraph and the radio buttons in my JavaScript. I´ve also managed to make the paragraph text appear whenever I choose the first radio button. However, I only want the text in the paragraph to appear if both one radio button has been chosen AND the button has been pressed. I want different content to appear in the paragraph depending on which radio button has been chosen.

Any tips or solutions would be greatly appreciated =)

Here is my code so far:

<form action="">
  <h1>A friend invites you to a party. You...</h1>
  <br />

  <input id="red" type="radio" name="color" value="red">...bluntly tell your friend you have other priorities. <br/>
  <input id="blue" type="radio" name="color" value="blue">...tell your friend you are finishing a coding assignment tonight. <br/>
  <input id="yellow" type="radio" name="color" value="yellow">...hug your friend and start discussing the outfit. <br/>
  <input id="green" type="radio" name="color" value="green">...thank your friend for inviting you, and tell her you look forward to it. <br/>

</form>

<button> Click me </button>

<p></p>

<script>
  let btn = document.querySelector('button');
  let para = document.querySelector('p');
  let response = document.querySelector('input');

  response.addEventListener('change', myColor);

  function myColor() {
    let choice = response.value;
    if (choice === 'red') {
      para.textContent = 'You´re so red!';
    } else if (choice === 'blue') {
      para.textContent = 'You´re so blue!';
    } else if (choice === 'yellow') {
      para.textContent = 'You´re so yellow!';
    } else if (choice === 'green') {
      para.textContent = 'You´re so green!';
    }
  }
</script>

Answer 1

If I understand you correctly, you can use the form you wrapped to get the selected radio value and check against it.

Like this:

<form action="">
  <h1>A friend invites you to a party. You...</h1>
  <br />

  <input id="red" type="radio" name="color" value="red">...bluntly tell your friend you have other priorities. <br/>
  <input id="blue" type="radio" name="color" value="blue">...tell your friend you are finishing a coding assignment tonight. <br/>
  <input id="yellow" type="radio" name="color" value="yellow">...hug your friend and start discussing the outfit. <br/>
  <input id="green" type="radio" name="color" value="green">...thank your friend for inviting you, and tell her you look forward to it. <br/>

</form>

<button> Click me </button>

<p></p>

<script>
  const form = document.querySelector('form');
  let btn = document.querySelector('button');
  let para = document.querySelector('p');
  let response = document.querySelector('input');

  //response.addEventListener('change', myColor);
  btn.addEventListener('click', myColor);

  function myColor() {
    let choice = form.color.value;
    if (!choice) {
      return;
    } 
    if (choice === 'red') {
      para.textContent = 'You´re so red!';
    } else if (choice === 'blue') {
      para.textContent = 'You´re so blue!';
    } else if (choice === 'yellow') {
      para.textContent = 'You´re so yellow!';
    } else if (choice === 'green') {
      para.textContent = 'You´re so green!';
    }
  }
</script>

Answer 2

1) When you define let response = document.querySelector('input');, you need to realize that document.querySelector only gives you one matching HTML element. This explains why only your first radio button does anything.

2) If you want anything to happen when you click the button, just add an onclick-handle to the button (button.addEventListener('click', myColor);).

3) to find the selected value in a set of radio buttons, you need to take a small detour - try like this (see also here): let choice = document.querySelector('input[name=color]:checked'); choice = choice && choice.value; The first line finds the selected radio button of name color. Be aware: this will be null if no radio has been selected. The second line replaces the variable's value by the radios value, if it was not null. Otherwise, it will still be null, so you can check for } else if (choice === null) { and set some text asking the user to select a color before pressing the button.

I hope this was clear enough and helps you out! Regards, Simon