无法从JavaScript传递后检索变量 [英] Unable to retrieve a variable after being passed from JavaScript
问题描述
我有3个html页面，其中2个页面各有问题1和问题2.第3页显示测试的分数。我设计了网页，现在我想跟踪用户分数。我不允许使用本地存储，Cookie，数据库或会话。我想将一个html页面中的变量（跟踪每个用户的答案）传递给另一个html页面而不使用本地存储或会话，cookie和DB。
现在在我的外部js文件中，有函数 getAnswer1（form），它存储用户答案并传递数组到 quiz_2.html文件。我发现一个在线示例传递一个变量，但无法在第二个函数中检索数组，名为 getAnswer2（form），并存储用户的第二个输入。我该怎么做？
HTML Page 1：
首页用户选择2个答案。简单填写空白问题并检索答案。正如你所看到的，我用正确的分配了正确的答案。
< div>
< form>
< input type =radioname =onevalue =correctclass =firstRow>& nbsp; Option 1 Mark 1：$ 650
< input type =radio name =twovalue =correctclass =secondRow>& nbsp; Option 1 Mark 2：Twitter< br>
< input type =radioname =onevalue =incorrectclass =firstRow>& nbsp; Option 2 Mark 1：$ 550
< input type =radio name =twovalue =incorrectclass =secondRow>& nbsp; Option 2 Mark 2：Google< br>
< input type =radioname =onevalue =incorrectclass =firstRow>& nbsp; Option 3 Mark 1：$ 650
< input type =radio name =twovalue =incorrectclass =secondRow>& nbsp;选项3 Mark 2：$ 650< br>
< input type =buttonvalue =Submit& Next Questiononclick =getAnswer1（this.form）class =firstRow>
< input type =buttonvalue =取消&清除选择onclick =clearOptions（this.form）>
< / form>
< / div>
我有一个外部js文件，其中包含存储答案和执行必要计算的函数。我将用户答案存储在一个数组中。我调用了第一个函数：
$ p $ function getAnswer1（form）{
var results = [];
var a = [];
var value;
var checked = form.querySelectorAll（input [type = radio]：checked）;
if（checked.length< 2）{
alert（'请选择一个选项'）;
return;
}
else {
var n = checked.length;
for（var i = 0; i< n; i ++）{
.push（checked [i] .value）;
results.push（encodeURIComponent（'key'）+'='+ encodeURIComponent（a））
location.href ='quiz_2.html？'+ results 。加入（ '&安培;'）;
}
第二个问题：
< DIV>
< form>
< input type =radioname =radiovalue =correctclass =firstRow> NASA.Gov
< input type =radioname =radiovalue =wrongclass =secondRow> Data.Gov< br>
< input type =radioname =radiovalue =wrongclass =firstRow> Facebook
< input type =radioname =radiovalue =wrongclass =secondRow> XYZ.net< br>
< input type =buttonvalue =Submit& Next Questiononclick =getAnswer2（this.form）class =firstRow>
< input type =buttonvalue =取消&清除选择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（'请选择一个选项'）;
}
else {
value = checked.value;
}
location.href =survey.html;
，但我完全是关于新的程序员自己学习基础知识而不依赖于提供答案。只是为了表明它可以完成 - 我刚刚创建了三个HTML页面。在前两个表单中创建一个表单 - 每个表单都包含您的问题（第一页中的问题1和问题2以及第二页中的问题3），并将表单值传递给下一个表单值，仅使用html。
然后在第二页和第三页上只使用JavaScript，我从URL中获取了值并用它们做了一些事情。在第二页中，我重新使用了第1页中的值（想想如何完成以及为什么它有用），以便将所有三个值传递给第3页，然后使用JavaScript仅抓取3个值，显示它们在页面上（如下面的代码部分所示）并计算正确答案的总数和百分比。请注意，我回答了问题，因此我得到的问题2不正确。
请注意，我不是给出使用的代码，但会给你网页的网址，以便您可以看到前两页的结果，然后开始思考我是如何实现这一目标的。
numbers1.html
numbers2.html？one = correct& two = incorrect
numbers3.html？one = correct& two = incorrect& three = correct
问题1：正确的
问题2：不正确的
问题3：正确的
2/3
0.67％正确的
不是我知道的传统答案，但对于学习者只是要求提供答案并不理想，特别是在10分钟内，我能够将完成结果的三页拼凑起来。如果你不尝试，那么你就不会为自己学习。
一般注意：两个论坛成员和我花了很多时间在今天下午试图帮助OP与需要的代码 - 给出代码示例。所以这篇文章更多的是关于教学而不是提供答案。我希望我有这样的老师来激发研究和理解，然后再问问答案。所以，现在我已经说过了 - 随意投票，但我支持我的理念并且不会删除这个答案，只是为了不投票。此论坛必须是教学环境以及代码库。
I have 3 html pages where 2 pages each have question 1 and question 2. The 3rd page shows the score of the test. I have designed the pages and now i want to keep track of the user scores. I'm not allowed to use local storage, cookies, database or sessions. I am suppose to pass the variable(to track each users answers) from one html page to another without using local storage or sessions, or cookies, and a DB.
Now in my external js file, have functions getAnswer1(form) which stores the user answer and passes the array to quiz_2.html file. I found an example online to pass a variable but having trouble retrieving the array in second function called getAnswer2(form) and storing the users second input. How do I go about that?
HTML Page 1:
First page user selects 2 answers. A simple fill in the blank question and retrieve the answer. As you can see I assigned the right answers with correct.
<div>
<form>
<input type="radio" name="one" value="correct" class="firstRow"> Option 1 Mark 1: $650
<input type="radio" name="two" value="correct" class="secondRow"> Option 1 Mark 2: Twitter<br>
<input type="radio" name="one" value="incorrect" class="firstRow"> Option 2 Mark 1:$550
<input type="radio" name="two" value="incorrect" class="secondRow"> Option 2 Mark 2:Google<br>
<input type="radio" name="one" value="incorrect" class="firstRow"> Option 3 Mark 1:$650
<input type="radio" name="two" value="incorrect" class="secondRow"> 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>
I have a external js file that holds the function to store the answers and performs necessary computation. I store the users answers in an array. I called the first function:
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('&');
}
The second question:
<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:
As you can see below here I should be accepting a users 2nd test input and report the final scores to the survey but having difficulty retrieving the array variable and storing the answer.
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";
}
Sorry if my comments seemed harsh, but I am all about new coders learning the basics themselves without relying on having the answers provided. Just to show it can be done - I just created three HTML pages. Created a form in the first two - each with your questions (questions 1 and 2 in the first page and question 3 in the second page), and passed the form values to the next one, using nothing more than html.
Then using only JavaScript on the second and third pages, I grabbed the values out of the URL and did stuff with them. On page two, I re-used the values from page 1 (think how that might have been done and why it is useful) so that all three values are passed to page 3 which then used JavaScript only to grab the 3 values, display them on the page (as shown in the code section below) and calculate the total and the percentage of answers that are correct. Note that I answered the questions so that I got question 2 incorrect.
Note that I am not giving the code used, but will give you the URL of the pages so that you can see the outcome of the previous two pages and can then start to think how I achieved this.
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
Not a traditional answer I know, but it is not ideal for learners simply ask for the answer to be provided, especially when in 10 minutes I was able to put together the three pages that achieved the outcome. If you do not try then you will not learn for yourself.
General note: two forum members and I spent a lot of time this afternoon trying to assist the OP with the code required - giving code examples. so this post is more about teaching than providing answers. I wish I had teachers like that to inspire research and understanding before simply asking for the answer. So now that I have said that - feel free to down vote, but I stand behind my philosophy and will not delete this answer, simply to not get downvotes. This forum must be a teaching environment as well as a code repository.
这篇关于无法从JavaScript传递后检索变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
