将个性化文本插入 js var no= document.getElementById 结果

Question

我被困在这里...我在不同的行中做几个问题，在下拉菜单中有 yes/no 个答案。回答完所有问题后，我想单击 "Generate" 按钮，将所有带有 yes/no 答案的问题收集到一个 "result" 框中，仅用一个简单的普通段落。这是我目前所知道的（我不知道 html/js 等编码，但我擅长谷歌搜索）。 `

<html>
<body>
<form>
    Done it?
    <select id="q1">
        <option>Yes</option>
        <option>No</option>
    </select>
    <p>
        Checked Around?
        <select id="q2">
            <option>Yes</option>
            <option>No</option>
        </select>
        <p>
            <input type="button" onclick="myFunction1()" value="Generate">
            <input type="text" id="result" size="25">
</form>
<script>
    function myFunction1() {
        var no = document.getElementById("q1");
        var option = no.options[no.selectedIndex].text;
        var txt = document.getElementById("result").value;
        txt = txt + option;
        document.getElementById("result").value = txt;
    }
</script>
</body>
</html>

Answer 1

您在 <input type="button" onclick="myFunction1()" value="Generate"> 的处理程序中调用 myFunction1() 但 myFunction1() 定义在您的 button 下方，因此当您分配它时它不存在。将您的 <script> 标签移动到文件的顶部。

顺便说一句，这里有一个逻辑错误：

txt = txt + option; 因为如果用户点击 button 两次，它会将之前的结果添加到新值中。

Answer 2

DEMO

尝试为您的选择添加适当的标签，为您的表单添加名称，然后执行以下操作：

<form name="myForm">
  <p>
    <label for="q1">Done it?</label>
    <select id="q1">
      <option>Yes</option>
      <option>No</option>
    </select>
  </p>
  <p>
    <label for="q2">Checking Around?</label>
    <select id="q2">
      <option>Yes</option>
      <option>No</option>
    </select>
  </p>
  <input type="button" onclick="populateResults()" value="Generate">
  <div id="result"></div>
</form>

然后添加提交处理程序：

function populateResults() {
  var selects = document.forms.myForm.querySelectorAll('select'),
      result = document.getElementById("result");
  Array.from(selects).forEach(function(a, i) {
      var answer = a.options[a.selectedIndex].text,
          question = selects[i].labels[0].textContent;
      result.innerHTML += question + ' ' + answer + '<br>';
  })
}

将个性化文本插入 js var no= document.getElementById 结果

Inserting personalized text into a js var no= document.getElementById result

javascript

var

DEMO