Question

我有3个html页面，其中2个页面各有问题1和问题2.第3页显示测试的分数。我设计了页面，现在我想跟踪用户分数。我不允许使用本地存储，cookie，数据库或会话。我想将一个html页面中的变量（跟踪每个用户的答案）传递给另一个html页面，而不使用本地存储或会话，cookie或数据库。

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

HTML第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";
}

Answer 1

很抱歉，如果我的评论看起来很苛刻，但我完全是关于新编码员自己学习基础知识而不依赖于提供答案。只是为了表明它可以完成 - 我只创建了三个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分钟内我能够将实现结果的三个页面放在一起。如果你不尝试，那么你就不会为自己学习。

一般说明：两位论坛成员和我今天下午花了很多时间尝试用所需的代码协助OP - 提供代码示例。所以这篇文章更多的是关于教学而不是提供答案。我希望我能让这样的老师在简单地要求答案之前激发研究和理解。所以，现在我已经说过了 - 随意投票，但我支持我的理念并且不会删除这个答案，只是为了不进行投票。该论坛必须是教学环境和代码库。

从JavaScript传递后无法检索变量

1 个答案: