Question

我要实现的目标是提出一个问题，并提供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）如果您希望在单击按钮时发生任何事情，只需在按钮（button.addEventListener('click', myColor);）上添加onclick句柄即可。

3）要在一组单选按钮中找到选定的值，您需要绕行一小步-像这样尝试（另请参阅here）：让choice = document.querySelector（'input [name = color]：checked'）; 选择=选择&& choice.value; 第一行找到名称为color的选定单选按钮。请注意：如果未选择任何广播，它将为null。如果不是null，则第二行将其值替换为单选值。否则，它将仍然为空，因此您可以检查} else if (choice === null) {并设置一些文本，要求用户在按下按钮之前选择一种颜色。

我希望这很清楚，可以帮助您！问候，西蒙

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

2 个答案: