从 JavaScript 传递后无法检索变量

Unable to retrieve a variable after being passed from JavaScript

本文关键字:检索 变量 JavaScript      更新时间:2023-09-26

我有 3 个 html 页面,其中 2 个页面分别包含问题 1 和问题 2。第 3 页显示测试分数。我已经设计了页面,现在我想跟踪用户分数。我不允许使用本地存储、Cookie、数据库或会话。我假设将变量(跟踪每个用户的答案)从一个 html 页面传递到另一个页面,而无需使用本地存储或会话、cookie 和数据库。

现在在我的外部js文件中,具有存储用户答案并将数组传递给quiz_2.html file getAnswer1(form)函数。我在网上找到了一个传递变量的示例,但在检索名为 getAnswer2(form) 的第二个函数中的数组并存储用户的第二个输入时遇到问题。我该怎么做?

网页 1:首页用户选择 2 个答案。只需填写空白问题并检索答案。如您所见,我用correct分配了正确的答案。

<div>
                <form>
                    <input type="radio" name="one" value="correct" class="firstRow">&nbsp;Option 1 Mark 1: $650
                    <input type="radio" name="two" value="correct" class="secondRow">&nbsp;Option 1 Mark 2: Twitter<br>
                    <input type="radio" name="one" value="incorrect" class="firstRow">&nbsp;Option 2 Mark 1:$550
                    <input type="radio" name="two" value="incorrect" class="secondRow">&nbsp;Option 2 Mark 2:Google<br>
                    <input type="radio" name="one" value="incorrect" class="firstRow">&nbsp;Option 3 Mark 1:$650
                    <input type="radio" name="two" value="incorrect" class="secondRow">&nbsp;Option 3 Mark 2:$650<br>
                    <input type="button" value="Submit & Next Question" onclick="getAnswer1(this.form)" class="firstRow">
                    <input type="button" value="Cancel & Clear Selection" onclick="clearOptions(this.form)">
                </form>
            </div>

我有一个外部js文件,其中包含存储答案并执行必要计算的功能。我将用户的答案存储在一个数组中。我调用了第一个函数:

  function getAnswer1(form) {
     var results = [];
     var a = [];
     var value;
     var checked = form.querySelectorAll("input[type=radio]:checked");
   if(checked.length<2) {
       alert('Please select an option');
          return;
        }
 else {
         var n = checked.length;
            for(var i=0;i<n;i++) {
            a.push(checked[i].value);
           }
       }
       results.push(encodeURIComponent('key')+'='+encodeURIComponent(a))
       location.href = 'quiz_2.html?'+results.join('&');
  }

第二个问题:

<div>
                <form>
                    <input type="radio" name="radio" value="correct" class="firstRow"> NASA.Gov
                    <input type="radio" name="radio" value="incorrect" class="secondRow"> Data.Gov <br>
                    <input type="radio" name="radio" value="incorrect" class="firstRow"> Facebook
                    <input type="radio" name="radio" value="incorrect" class="secondRow"> XYZ.net <br>
                    <input type="button" value="Submit & Next Question" onclick="getAnswer2(this.form)" class="firstRow">
                    <input type="button" value="Cancel & Clear Selection" onclick="clearOptions(this.form)" class="secondRow">

                </form>
           </div>

Javascript:

正如您在下面看到的,我应该接受用户的第二次测试输入并将最终分数报告给调查,但难以检索数组变量并存储答案。

function getAnswer2(form) {
    var value;
    var retrieveArray = {};
    var fs = location.search.replace('?', '').split('&');
    for(var i=0,l=fs.length; i<l; i++){
     var z = fs[i].split('=');
    retrieveArray[decodeURIComponent(z[0])] = decodeURIComponent(z[1]);
    }
    var checked =  form.querySelector("input[type=radio]:checked");
    if(!checked){
        alert('Please select an option');
       }
     else{
        value = checked.value;
      }
     location.href = "survey.html";
}

对不起,如果我的评论看起来很苛刻,但我完全是关于新程序员自己学习基础知识,而不依赖于提供的答案。只是为了表明它可以做到 - 我刚刚创建了三个 HTML 页面。在前两个表单中创建了一个表单 - 每个表单都包含您的问题(第一页中的问题 1 和 2 以及第二页中的问题 3),并将表单值传递给下一个

表单值,仅使用 html。

然后在第二页和第三页上只使用 JavaScript,我从 URL 中抓取值并用它们做一些事情。在第二页上,我重用了第 1 页中的值(想想这是如何完成的以及为什么它很有用),以便将所有三个值传递到第 3 页,然后仅使用 JavaScript 抓取 3 个值,将它们显示在页面上(如下面的代码部分所示)并计算正确答案的总数和百分比。请注意,我回答了问题,因此问题 2 不正确。

请注意,我没有给出使用的代码,但会给你页面的URL,以便你可以看到前两个页面的结果,然后可以开始思考我是如何实现这一点的。

numbers1.html
numbers2.html?one=correct&two=incorrect
numbers3.html?one=correct&two=incorrect&three=correct
Question 1: correct
Question 2:incorrect
Question 3:correct
2/3
0.67% correct

我知道这不是一个传统的答案,但对于学习者来说,仅仅要求提供答案并不理想,尤其是当我在 10 分钟内能够将实现结果的三页放在一起时。如果你不尝试,那么你就不会自己学习。