如何使用 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

如果我

理解正确，您可以使用包装的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）如果您希望在单击按钮时发生任何事情，只需在按钮（button.addEventListener('click', myColor);）中添加一个onclick-handle

。

3）要在一组单选按钮中找到所选值，您需要绕道而行 - 尝试这样做（另请参阅此处）： let choice = document.querySelector（'input[name=color]：checked'）; 选择 = 选择 &&选择.值;第一行查找名称为 color 的选定单选按钮。请注意：如果未选择无线电，这将null。第二行将变量的值替换为无线电值（如果未null）。否则，它仍将为 null，因此您可以检查} else if (choice === null) {并设置一些文本，要求用户在按下按钮之前选择颜色。

我希望这足够清楚并对您有所帮助！问候西蒙