输入元素上的 document.getElementById 返回未定义
我正在创建一个分成多个页面的测验，我尝试使用 JavaScript 的 get 方法将每个问题的分数传递到下一页。
我使用一个名为 gValue() 的函数来获取 url 中上一页的变量（称为“s”+页面编号），然后我想添加这个变量（我调用“分数”）到下一页上的 3 个多项选择答案的值，并一遍又一遍地重复整个过程。
我在将新闻分数插入每个无线电输入字段的值时遇到问题。
我没有收到任何控制台错误或 JavaScript 错误，但当我想检查新值是否以正确的方式添加到表单中的每个输入元素时，我收到“undefined”。 这是我的第一页和第二页的代码，我想在其中查看插入到表单中的新值：
第一页发送 s1 变量：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
</head>
<body>
<div>Choose between<br />
<form name="fo" method="get" action="part1.html">
<input type="radio" name="s1" value="1" />one<br />
<input type="radio" name="s1" value="2" />two<br />
<input type="radio" name="s1" value="3" />three<br />
<input type="submit" value="continuer" />
</form>
</div>
</body>
</html>
第二页，我想在其中提取s1 的值并将其添加到表单中 3 个输入的值中：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<script type="text/javascript">
<!--
function subnewsc() {
for (i = 1; i <= 3; i++) {
var score = gValue();
score = parseInt(score);
i = parseInt(i);
var newscore = score + i;
var doc = 'document.getElementById("a' + i + '")';
doc.value = newscore;
}
}
function gValue() {
var url = window.location.href;
var qparts = url.split("?");
if (qparts.length == 0) {
return "";
}
var query = qparts[1];
var vars = query.split("&");
var value = "";
for (var i = 0; i < vars.length; i++) {
var parts = vars[i].split("=");
for (var f = 1; f <= 3; f++) {
var ss = "s" + f;
if (parts[0] == ss) {
value = parts[1];
break;
}
}
}
return value;
}
// -->
</script>
</head>
<body>
<div>choose between<br />
<form name="fo" method="get" action="part2.html">
<input id="a1" type="radio" name="s2" value="1" />one again<br />
<input id="a2" type="radio" name="s2" value="2" />two again<br />
<input id="a3" type="radio" name="s2" value="3" />three again<br />
<input type="submit" value="continuer" />
</form>
<script type="text/javascript">
<!--
var boby = subnewsc();
document.write(boby);
//-->
</script>
</div>
</body>
</html>
我不知道为什么当我使用“boby”进行检查时得到 undefined多变的。我首先认为这是由于 DOM 的原因，函数 subnewsc() 被调用得太早，因此元素还不存在，但不应该是我现在调用的情况稍后再说。
它似乎也与 document.getElementById 中 id 名称的性质无关，因为它应该是一个字符串（一个字符串加一个数字变成一个字符串）
I am creating a quid of quizz splitted on mulitple pages and I try to pass the score of each question to the next page using the get method with javascript.
I use a function called gValue() to get the variables from the previous page (called "s" + the number of the page) in the url, and then I want to add this variable (that I call 'score') to the values of the 3 multiple choices answers on the following page and replicate the whole process over and over.
I have a problem with inserting the newscore into the values of each of the radio input fields.
I don't get any console error nor javascript error but I get "undefined" when I want to check if the new values are added the right way to each input element in the form.
Here is the code of my first page and then of the second page, where I want to see the new values inserted into the form:
First page sending the s1 variable:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
</head>
<body>
<div>Choose between<br />
<form name="fo" method="get" action="part1.html">
<input type="radio" name="s1" value="1" />one<br />
<input type="radio" name="s1" value="2" />two<br />
<input type="radio" name="s1" value="3" />three<br />
<input type="submit" value="continuer" />
</form>
</div>
</body>
</html>
second page, where I want to extract the value of s1 and add it to the values of the 3 inputs in the form:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<script type="text/javascript">
<!--
function subnewsc() {
for (i = 1; i <= 3; i++) {
var score = gValue();
score = parseInt(score);
i = parseInt(i);
var newscore = score + i;
var doc = 'document.getElementById("a' + i + '")';
doc.value = newscore;
}
}
function gValue() {
var url = window.location.href;
var qparts = url.split("?");
if (qparts.length == 0) {
return "";
}
var query = qparts[1];
var vars = query.split("&");
var value = "";
for (var i = 0; i < vars.length; i++) {
var parts = vars[i].split("=");
for (var f = 1; f <= 3; f++) {
var ss = "s" + f;
if (parts[0] == ss) {
value = parts[1];
break;
}
}
}
return value;
}
// -->
</script>
</head>
<body>
<div>choose between<br />
<form name="fo" method="get" action="part2.html">
<input id="a1" type="radio" name="s2" value="1" />one again<br />
<input id="a2" type="radio" name="s2" value="2" />two again<br />
<input id="a3" type="radio" name="s2" value="3" />three again<br />
<input type="submit" value="continuer" />
</form>
<script type="text/javascript">
<!--
var boby = subnewsc();
document.write(boby);
//-->
</script>
</div>
</body>
</html>
I don't know why I am getting undefined when I check using the "boby" variable. I first thought that it was because of the DOM, that the function subnewsc() was called too early so that the elements weren't yet there but it shouldn't be the case as I am now calling it later.
It also doesn't seem to have to do with the nature of the id name in the document.getElementById as it should be a string (a string plus a number becoming a string)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
可能
没有单引号
maybe
without single quotes
javascript 可能有点时髦 - 代码中的空格可能会导致此错误，这是我所经历的示例，这是我编写的脚本：
当我运行此 javascript 并尝试查找第一个子项时，收到错误消息，指出“未定义” ”
但是，我从以下行中删除了空格并修复了它：
请注意我如何删除 multiple 和 option 之间的空格
javascript can be a little funky - mere spaces in code can cause this error, here is an example of what i expierienced, here is a script I wrote:
when I ran this javascript and tried to find the firstchild, got error message stating "undefined"
However, I removed the space from the following line and that fixed it:
please notice how I removed the space between multiple and option