Как изменить текст абзаца с помощью JavaScript, в зависимости от того, какой переключатель отмечен в форме? - PullRequest
0 голосов
/ 03 февраля 2019

Я пытаюсь добиться того, чтобы у меня был 1 вопрос с 4 возможными ответами (переключатели).Когда пользователь нажимает кнопку после формы, я хочу, чтобы параграф рассказывал им о своем выборе.

Я настроил таргетинг на кнопку, абзац и переключатели в моем JavaScript.Мне также удалось заставить текст абзаца появляться всякий раз, когда я выбираю первый переключатель.Однако я хочу, чтобы текст в абзаце отображался только в том случае, если были выбраны обе радиокнопки и нажата эта кнопка.Я хочу, чтобы в абзаце отображалось различное содержимое в зависимости от того, какая радио-кнопка была выбрана.

Буду признателен за любые советы или решения =)

Вот мой код:

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

Ответы [ 2 ]

0 голосов
/ 03 февраля 2019

1) Когда вы определяете let response = document.querySelector('input');, вы должны понимать, что document.querySelector дает вам только один соответствующий элемент HTML.Это объясняет, почему только ваша первая радио-кнопка что-то делает.

2) Если вы хотите, чтобы что-то происходило, когда вы нажимаете кнопку, просто добавьте ручку для нажатия на кнопку (button.addEventListener('click', myColor);).

3) чтобы найти выбранное значение в наборе переключателей, вам нужно сделать небольшой обход - попробуйте вот так (см. Также здесь ): let choice = document.querySelector ('input [name)= цвет]: проверено ');выбор = выбор && choice.value;Первая строка находит выбранный переключатель с именем color.Имейте в виду: это будет null, если радио не было выбрано.Вторая строка заменяет значение переменной значением радиостанции, если оно не было null.В противном случае он все равно будет нулевым, поэтому вы можете проверить } else if (choice === null) { и задать текст, запрашивающий у пользователя выбрать цвет перед нажатием кнопки.

Надеюсь, это было достаточно ясно и поможет вам!С уважением, Саймон

0 голосов
/ 03 февраля 2019

Если я вас правильно понимаю, вы можете использовать form, который вы указали в , получить выбранный радиосигнал и проверить его.

Вот так:

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