如何使用 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 句柄 (button.addEventListener('click', myColor);)。

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

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