更改基本HTML / Javascript页面的innerHTML的问题
[英]Issue changing innerHTML of basic HTML/Javascript page
问题描述
I have an HTML/Javascript document that outputs the grade of a student based on the inputs of my form. 
我有一个HTML / Javascript文档，该文档根据表单的输入输出学生的成绩。 The mechanics of the grade calculation should be working, but the final output does not. 成绩计算的机制应该起作用，但最终输出却不起作用。 The main thing I'm honing in on is the document.getElementById("span1").innerHTML and span2's same code. 我要磨练的主要内容是document.getElementById("span1").innerHTML和span2的相同代码。 I want these to change the inner HTML to the values I calculated with my code, but they remain at X and yy even when I attempt to change them. 我希望它们将内部HTML更改为我用代码计算出的值，但是即使我尝试更改它们，它们也仍保持X和yy不变。
I think the error should be in my calculateGrade function or in my HTML. 我认为错误应该在我的calculateGrade函数或HTML中。 I did not include the rest of the code to simplify my post, so the error lay outside of where I think it does. 我没有包含其余代码来简化我的文章，因此错误不在我认为的范围内。 I need the output paragraph to have the correct values, but they are not being changed. 我需要输出段落具有正确的值，但是它们没有被更改。
Even if I change the new innerHTML values to concrete values such as P and 88 , the code displays X and yy instead. 即使我将新的innerHTML值更改为具体值（例如P和88 ，代码也会显示X和yy 。 I set a default "A" and "91" to test it and receive the same problem. 我设置了默认的“ A”和“ 91”以对其进行测试并收到相同的问题。 I think there may be an issue with my form gets as changing the value of the name in the form also doesn't change my final output. 我认为表单获取可能存在问题，因为更改表单中名称的值也不会更改最终输出。
This is my first Javascript/HTML project, and I'm very desperate to get it working. 这是我的第一个Javascript / HTML项目，我非常渴望使其工作。 I'm already one day late, and in a couple hours, it will be two. 我已经迟到了一天，再过几个小时，将是两个小时。 I deeply appreciate any hep I can get. 我非常感谢我能得到的帮助。 Thanks guys. 多谢你们。 Here is my code: 这是我的代码：
<!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>
2 个解决方案
解决方案1
0 2014-11-05 13:24:22
Like this should be ok...I only change the input type to "button" 这样就可以了...我只将输入类型更改为“按钮”
<!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>
解决方案2
0 已采纳 2014-11-05 13:26:50
Just move the alert call to the end of the function, and it will work finely: 只需将警报调用移到函数的末尾，它将可以正常工作：
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;
}
And set your form action to return calculateGrade() as Patrick Evans mentioned in his comment. 并设置您的表单操作以return calculateGrade() 帕特里克·埃文斯在评论中提到的return calculateGrade() 。
And as 并作为
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.