我如何使用JavaScript段落文本，具体取决于哪个单选按钮的形式被选中的改变？

Question

什么我正尝试实现的是有4个可能的答案1个问题（单选按钮）来选择。当用户在表格后，按下按钮，我想要一个段落告诉他们更多关于他们做出的选择。

从来就针对性的按钮，段落和我的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和对证的get the selected radio value。

像这样：

<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（“输入[名称=颜色]：检查”）;选择=选择&& choice.value;第一行找到名字color的选中的单选按钮。注意：如果没有无线已选定这将是null。第二行由无线电值替换变量的值，如果它没有null。否则，它仍然会是空的，所以你可以检查} else if (choice === null) {并设置一些文本，要求用户按下按钮之前选择一种颜色。

我希望这是不够清楚，可以帮助你！问候，西蒙