更改基本 HTML/Javascript 页面的 innerHTML 问题
Posted
技术标签:
【中文标题】更改基本 HTML/Javascript 页面的 innerHTML 问题【英文标题】：Issue changing innerHTML of basic HTML/Javascript page 【发布时间】：2015-01-01 16:32:28 【问题描述】：我有一个 html/javascript 文档，它根据表单的输入输出学生的成绩。成绩计算的机制应该可以正常工作，但最终输出却不行。我主要关注的是document.getElementById("span1").innerHTML 和span2 的相同代码。我希望这些将内部 HTML 更改为我用我的代码计算的值，但即使我尝试更改它们，它们仍保持为 X 和 yy。
我认为错误应该在我的calculateGrade 函数或我的 HTML 中。我没有包含其余代码以简化我的帖子，因此错误不在我认为的范围之内。我需要输出段落具有正确的值，但它们没有被更改。
即使我将新的 innerHTML 值更改为具体值，例如 P 和 88，代码也会改为显示 X 和 yy。我设置了默认的“A”和“91”来测试它并收到同样的问题。我认为我的表单可能存在问题，因为更改表单中名称的值也不会改变我的最终输出。
这是我的第一个 Javascript/HTML 项目，我非常渴望让它工作。我已经迟到了一天，再过几个小时就会迟到两天。我非常感谢我能得到的任何帮助。多谢你们。这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>Joe Peterson's Assignment 7</title>
<script>
function calculateGrade()
document.getElementById("form1").style.display = "none";
document.getElementById("p1").style.display = "block";
alert(document.getElementById("FirstName").value);
var fname = document.getElementById("LastName").value;
var lname = document.getElementById("FirstName").value;
var valMidterm = document.getElementById("MidtermScore").value;
var valFinal = document.getElementById("FinalScore").value;
var lMidterm = document.getElementById("MidtermLetter").value;
var lFinal = document.getElementById("FinalLetter").value;
var homeworkArray = document.getElementById("HomeworkScores").value.split(',');
var classworkArray = document.getElementById("ActivityScores").value.split(',');
var grade = "A";
var score = 91;
document.getElementById("span1").innerHTML = (grade);
document.getElementById("span2").innerHTML = (score);
document.getElementById("fname").innerHTML = (fname);
document.getElementById("lname").innerHTML = (lname);
return false;
</script>
</head>
<body>
<p><h1>Joe Peterson's Assignment 7</h1></p>
<form name="input" id="form1" onsubmit="calculateGrade()" style="display:form">
First name: <input type="text" name="FirstName" id="FirstName" value="Joe"><br>
Last name: <input type="text" name="LastName" id="LastName" value="Peterson"><br>
Homework Scores (separate with commas): <input type="text" name="HomeworkScores" id="HomeworkScores" value="90, 80, 98"><br>
Activity Scores (separate with commas): <input type="text" name="ActivityScores" id="ActivityScores" value="71, 65, 96"><br>
Midterm Exam Percentage: <input type="text" name="MidtermScore" id="MidtermScore" value="91"><br>
Midterm Exam Letter Grade: <input type="text" name="MidtermLetter" id="MidtermLetter" value="A"><br>
Final Exam Percentage: <input type="text" name="FinalScore" id="FinalScore" value="75"><br>
Final Exam Letter Grade: <input type="text" name="FinalLetter" id="FinalLetter" value="C"><br>
<input type="submit" value="Submit">
</form>
<p id="p1" style="display:none">
Final course grade for
<span id="fname">Joe</span> <span id="lname">Peterson</span>
is: <span id="span1">X</span> (<span id="span2">yy</span>%)
</p>
</body>
</html>
【问题讨论】：
在这里工作：jsfiddle.net/oz3jcjdq，刚刚添加了onsubmit="return calculateGrade()" 以确保表单没有更改页面。 旁注： form 不是 css display 属性的 valid value
【参考方案1】：
只需将警报调用移到函数末尾，它就会正常工作：
function calculateGrade()
document.getElementById("form1").style.display = "none";
document.getElementById("p1").style.display = "block";
var fname = document.getElementById("LastName").value;
var lname = document.getElementById("FirstName").value;
var valMidterm = document.getElementById("MidtermScore").value;
var valFinal = document.getElementById("FinalScore").value;
var lMidterm = document.getElementById("MidtermLetter").value;
var lFinal = document.getElementById("FinalLetter").value;
var homeworkArray = document.getElementById("HomeworkScores").value.split(',');
var classworkArray = document.getElementById("ActivityScores").value.split(',');
var grade = "A";
var score = 91;
document.getElementById("span1").innerHTML = grade;
document.getElementById("span2").innerHTML = score;
document.getElementById("fname").innerHTML = fname;
document.getElementById("lname").innerHTML = lname;
alert(document.getElementById("FirstName").value);
return false;
并将您的表单操作设置为return calculateGrade()，正如他的评论中提到的Patrick Evans。
here's a demo
作为
【讨论】：
谢谢。这修复了我的简化代码，但我的较长版本仍然中断，所以我的 JavaScript 肯定有更多问题。感谢您的帮助。 很高兴它有帮助。好的，然后尝试自己修复它，如果你做不到，只需将它发布在 SO 中，你肯定会得到你想要的。【参考方案2】：这样应该没问题...我只是将输入类型改为“按钮”
<!DOCTYPE html>
<html>
<head>
<title>Joe Peterson's Assignment 7</title>
<script>
function calculateGrade()
document.getElementById("form1").style.display = "none";
alert(document.getElementById("FirstName").value);
var fname = document.getElementById("LastName").value;
var lname = document.getElementById("FirstName").value;
var valMidterm = document.getElementById("MidtermScore").value;
var valFinal = document.getElementById("FinalScore").value;
var lMidterm = document.getElementById("MidtermLetter").value;
var lFinal = document.getElementById("FinalLetter").value;
var homeworkArray = document.getElementById("HomeworkScores").value.split(',');
var classworkArray = document.getElementById("ActivityScores").value.split(',');
var grade = "A";
var score = 91;
document.getElementById("span1").innerHTML = (grade);
document.getElementById("span2").innerHTML = (score);
document.getElementById("fname").innerHTML = (fname);
document.getElementById("lname").innerHTML = (lname);
document.getElementById("p1").style.display = "block";
return false;
</script>
</head>
<body>
<p><h1>Joe Peterson's Assignment 7</h1></p>
<form name="input" id="form1"style="display:form">
First name: <input type="text" name="FirstName" id="FirstName" value="Joe"><br>
Last name: <input type="text" name="LastName" id="LastName" value="Peterson"><br>
Homework Scores (separate with commas): <input type="text" name="HomeworkScores" id="HomeworkScores" value="90, 80, 98"><br>
Activity Scores (separate with commas): <input type="text" name="ActivityScores" id="ActivityScores" value="71, 65, 96"><br>
Midterm Exam Percentage: <input type="text" name="MidtermScore" id="MidtermScore" value="91"><br>
Midterm Exam Letter Grade: <input type="text" name="MidtermLetter" id="MidtermLetter" value="A"><br>
Final Exam Percentage: <input type="text" name="FinalScore" id="FinalScore" value="75"><br>
Final Exam Letter Grade: <input type="text" name="FinalLetter" id="FinalLetter" value="C"><br>
<input type="button" value="Submit" onclick="calculateGrade()">
</form>
<p id="p1" style="display:none">
Final course grade for
<span id="fname">Joe</span> <span id="lname">Peterson</span>
is: <span id="span1">X</span> (<span id="span2">yy</span>%)
</p>
</body>
</html>
【讨论】：
我先尝试了 chsdk 的修复，它成功了，但非常感谢您的帮助。以上是关于更改基本 HTML/Javascript 页面的 innerHTML 问题的主要内容，如果未能解决你的问题，请参考以下文章
HTML/Javascript：如何访问在带有 src 集的脚本标签中加载的 JSON 数据
如何更改完整可折叠 ul（Materialize，Html，Javascript，Css）的颜色？