如何根据表单中选中的单选按钮使用 JavaScript 更改段落文本？

Question

我想要实现的是有 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>

Answer 1

如果我没理解错的话，你可以使用包装到 get the selected radio value 的 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>

Answer 2

1) 当你定义let response = document.querySelector('input');时，你需要意识到document.querySelector只给你一个匹配的HTML元素。这解释了为什么只有您的第一个单选按钮可以执行任何操作。

2) 如果您希望单击按钮时发生任何事情，只需向按钮添加一个 onclick-handle (button.addEventListener('click', myColor);)。

3) 要在一组单选按钮中找到 selected 值，您需要绕个小弯 - 像这样尝试（另请参见 here）：让 choice = document.querySelector('input[name=color]:checked'); 选择=选择&&choice.value；第一行找到名称为 color 的 selected 单选按钮。请注意：如果没有收音机被 select 编辑，这将是 null。如果变量值不是 null，第二行用无线电值替换变量值。否则，它仍然为空，因此您可以检查 } else if (choice === null) { 并设置一些文本，要求用户在按下按钮之前 select 一种颜色。

我希望这已经足够清楚并且可以帮助您！问候，西蒙

如何根据表单中选中的单选按钮使用 JavaScript 更改段落文本？

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

html

javascript

paragraph

radio-button