javascript - 如何在此 JS 测验中打印提交时所有字段的内容？-6ren

javascript - 如何在此 JS 测验中打印提交时所有字段的内容？

转载作者：行者123 更新时间：2023-12-04 08:36:33

25

4

我做了一个 JS/HTML 测验，我希望在文本字段中输入的所有单词在提交时显示在页面底部。
错误出在 showResults 函数中，它没有按照我的预期工作。我是使用 querySelector 的初学者，但我想要做的是使用变量 answerContainers 仅存储 quizContainer 的 .answers 部分，然后使用 toSearch 变量仅存储从 answerContainers 提交的答案的值。最后，我想以字符串形式将 toSearch 的内容打印到屏幕上。
这是我的代码:

var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');
var submitButton = document.getElementById('submit');

var myQuestions = ["1. What is your dream destination?",
"2. If you could have one wish right now, what would it be?",
"3. What are your career goals?",
"4. Name an artist whose music you enjoy.",
"5. What are your hobbies?",
"6. Name a few public figures you admire.",
"7. Who is your favourite actor?",
"8. Which family member do you love the most?",
"9. If you could have any animal as your pet, what would it be?",
"10. Name a movie you’ve been planning to watch but haven’t yet had the time.",
"11. What kind of weather do you like the most?",
"12. Name a book or movie that you’ve always loved."];

function showQuestions(myQuestions, quizContainer){
    var output = [];
    for(var j = 0; j <= 11; j++)
    {
        var answer = '<label>'
              + '<input type="text" name=""+j+"" id=""+j+"">'
            + '</label>';
        output.push(
          '<div class="question">' + myQuestions[j] +'</div>'
          + '<div class="answers">' + answer + '</div>'
        );
    }
    quizContainer.innerHTML = output.join("");
    
}

function showResults(questions, quizContainer, resultsContainer){
  var answerContainers = quizContainer.querySelectorAll('.answers');

  var toSearch = [];
  
  for(var i=0; i <= 11; i++){
    toSearch.push(answerContainers[i].querySelector('input[name=""+i+""]')).value;
  }
  resultsContainer.innerHTML = toSearch.toString();

  
}

<!DOCTYPE html>
<html>
<head>
    <h2>Interests Questionnaire</h2>
    <h4>Answer in 1-5 words each.</h4>
    <br>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="quiz"></div>
<div id="results"></div>
<script src = "test.js"></script> 
<script> showQuestions(myQuestions, quizContainer); </script>
<input type="button" value = "Submit" id = "submit" onclick = "showResults(myQuestions, quizContainer, resultsContainer)">
</body>
</html>

在其当前形式中，代码给出错误“JavaScript 错误:TypeError:quizContainer 在第 52 行为 null”。我做错了什么，我该如何解决？

最佳答案

您的代码中有一些错误 - 错位的括号之类的。我发现/修复了那些阻止成功的问题，并得到了显示在字符串中的答案。你应该可以从这里拿走它。
错误列表:
(1) toSearch.append()不正确 - 使用 toSearch.push()(2) 您不能拥有 name或 id以数字开头的属性。
(3) 这一行有几个地方不正确:toSearch.append(answerContainers[i].querySelector('input[name=""+i+""]')).value;应该:toSearch.push(answerContainers[i].querySelector('input[name="a'+i+'"]').value);

var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');
var submitButton = document.getElementById('submit');

var myQuestions = ["1. What is your dream destination?",
"2. If you could have one wish right now, what would it be?",
"12. Name a book or movie that you’ve always loved."];

function showQuestions(myQuestions, quizContainer){
    var output = [];
    for(let j=0; j <= myQuestions.length-1; j++){
        var answer = `
            <label>
               <input type="text" name="a${j}" id="a${j}">
            </label>`;
        output.push(
          `<div class="question">${myQuestions[j]}</div>
          <div class="answers">${answer}</div>`
        );
    }
    quizContainer.innerHTML = output.join("");
    
}

function showResults(myQuestions, quizContainer, resultsContainer){
  var answerContainers = quizContainer.querySelectorAll('.answers');
//  console.log(answerContainers);

  var toSearch = [];
  
  for(var i=0; i <= myQuestions.length-1; i++){
  //console.log(answerContainers[i].querySelector('input[name="a'+i+'"]').value);
     toSearch.push(answerContainers[i].querySelector('input[name="a'+i+'"]').value);
     var x = 0;
  }
  resultsContainer.innerHTML = JSON.stringify(toSearch);

  //userAnswer = (answerContainers[i].querySelector('input[name=question'+i+']:checked')||{}).value;
}

showQuestions(myQuestions, quizContainer);

    <h2>Interests Questionnaire</h2>
    <h4>Answer in 1-5 words each.</h4>
    <br>
<div id="quiz"></div>
<div id="results"></div>
<input type="button" value = "Submit" id = "submit" onclick = "showResults(myQuestions, quizContainer, resultsContainer)">

关于javascript - 如何在此 JS 测验中打印提交时所有字段的内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64770249/

25

4

0

文章推荐： javascript - react-jsonschema-form 用数据生成

文章推荐： ocr - 为 Tesseract OCR 创建训练图像

文章推荐： javascript - 带有 getElementsByClassName (""的切换器不工作

javascript - 点击表单外部的按钮以调用表单中“提交”按钮上的“提交”
假设我有一个带有隐藏提交按钮的表单，我在其中输入值，然后我点击一个按钮，就会出现带有确认消息和确认按钮的对话框。当我单击“确认”按钮时，我还单击了表单中隐藏的提交按钮。这可能吗？我如何在 JQuery
git - 提交 PR 并提交更改后，是否可以压缩 Git 提交？
我们正在学习 Git 并使用 GitHub 作为我们的托管站点。我们都 fork upstream repo 并 PR 我们的提交到 upstream 以获取我们的更改。我们正在努力学习如何压缩我
javascript - 如果我选中 2 个输入单选按钮，禁用的“提交”按钮将启用，但如果我取消选中它们...“提交”按钮不会禁用返回
我只需要一些关于这段代码的帮助。 var prv3; var markIt3 = function(e) { if (prv3 === this && this.checked) { th
javascript - 如何使用 Javascript 提交 2 个表单 w/1 提交？ 1 表格使用 "GET"& 其他使用 "POST"
如果 1 个表单使用“GET”方法而另一个使用“POST”方法，我如何提交位于同一页面上的 2 个表单。每个表单都有相同的操作并转到相同的下一页。需要帮忙。感谢大家的帮助。我怎样才能得到下面这两个使
Javascript 提交
您好，我的表单中有以下脚本 function pdf() { var frm = document.getElementById("form1"); frm.action = "http://www.
iOS胖静态库&提交
我有一个 iOS 胖静态库(iphoneos 和 iphonesimulator)，如果我在应用程序提交期间使用它，它会因为二进制文件包含 iphonesimulator 代码而失败吗？最佳答案我
Git卡在状态/添加/提交
我似乎有一个卡住的 git repo。它卡在所有基本的添加、提交命令上，git push 返回所有内容为最新的。从其他帖子我已经完成了 git gc 和 git fsck/ 我认为基本的调试步骤是
jquery 表单使用 .on() 提交
我正在尝试发送由 jquery 创建的表单。该表单附加到一个 div 中，下面的变量“data”是使用 php 创建的，我将只发布最重要的 js 代码。我尝试了很多带有和不带有“on()”的操作，但
Bootstrap 选项卡中的表单不工作/提交
我面临一个简单的问题，但不知道如何解决。我正在使用 twitter bootstrap 的标签。选项卡有效，但每个选项卡中的表单不提交。表单在没有选项卡的情况下提交。以下是我用于标签的链接
git - 检查多个存储库中是否需要推送/提交
我的计算机上有 140 个 git 存储库，每周我可以处理其中 10-15 个。有没有办法知道是否忘记提交/推送我的一个项目？这些存储库都位于同一位置:“C:/Projects”。输出类似于 C:
Javascript if/else 提交
我对 javascript 完全陌生，目前正在开发我的第一个函数。我有这 2 个文本输入区域，可以在其中输入他的姓名和级别。 Nom: Niveau (1 á 6): 提交后，
Docker 提交 - 未保存数据库更改
我安装了最新的 Docker CS，得到了 LAMP image来自 Docker 集线器。我正在尝试在其中创建一个数据库并使用保存在其中的数据库制作一个新图像。启动容器:docker run --
jquery - 提交()事件的错误
我有这个 jQuery 简单代码: 由于某种原因，submit() 无法正常工作(我的表单在单击 old_thumb 按钮后未提交。有人可以帮助我吗？这里是 html 的一部分(它很长
jquery 提交 onclick
如何获得 input type="submit"onclick 事件来触发 commitfunds.valdiate？我不能使用类或 ID。它必须是一个 onclick 事件。这是代码: row A
javascript - 提交/输入后将焦点保持在同一输入字段
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and th
javascript 提交()命令不发送我的帖子数据
来自 this earlier thread我以为我知道可以使用 javascript submit() 命令通过 POST 方法发送表单数据。但我无法让它工作。这个演示在目的方面没有明显的意义，但请
mysql XA 提交
在 mysql 重新启动时提交 XA 待处理事务时，出现以下错误。请帮助我解决这个错误。 mysql> XA RECOVER CONVERT XID; +----------+------------
javascript - 逐步增强表格(提交)
我有一个带有的表单. 如果启用了 Javascript，我将删除此 submit -输入字段$('#no-js-submit').remove();并添加“fire-ajax”按钮 $('Fire
javascript - ‘提交’onload进入循环
我希望在页面加载后提交此表单，并且我使用了以下代码来完成此操作。问题是页面不断重新加载并停留在该循环中。 HTML Select Genre
python - Mechanize 提交
我们有一个表单，其中有几个单独的提交按钮，它们执行不同的操作。问题是我有几个具有以下 HTML 的按钮: 现在您无法使用标准的 find_control 函数按值定位元素。所以我写了一个谓词函数来

首页

博学

6Ren·AI

商城

javascript - 如何在此 JS 测验中打印提交时所有字段的内容？