我正在尝试将字母等级转换为GPA点。我有表格和按钮，可以根据字母等级计算GPA点，但是每次我输入等级并选择“计算”按钮时，都不会发生任何事情，我刚刚输入的等级会消失。我不确定如何将其显示在屏幕上。有关如何
的任何建议
<script>
var letterToNumber = {
A: 4.0,
B: 3.0,
C: 2.0,
D: 1.0
};
document.querySelector('button').addEventListener('click', function() {
var input1 = document.getElementById('input1').value;
var input2 = document.getElementById('input2').value;
var input3 = document.getElementById('input3').value;
var input4 = document.getElementById('input4').value;
var input5 = document.getElementById('input5').value;
var input6 = document.getElementById('input6').value;
var input7 = document.getElementById('input7').value;
input1 = letterToNumber[input1];
input2 = letterToNumber[input2];
input3 = letterToNumber[input3];
input4 = letterToNumber[input4];
input5 = letterToNumber[input5];
input6 = letterToNumber[input6];
input7 = letterToNumber[input7];
console.log(input1, input2, input3, input4, input5, input6, input7);
});
</script><style>
body {background-color: #E6E6FA;
font-family: Verdana, Tahoma, sans-serif;
color:#000000}
h1 {background-color:#FFDF00;
font-family: Verdana, Tahoma, sans-serif;
color:#000000;
text-align: center}
h2 {background-color: #FFDF00;
font-family: Verdana, Tahoma, sans-serif;
color:#000000;
text-align: center}
h3 {background-color:#FFDF00;
font-family: Verdana, Tahoma, sans-serif;
color: #000000;
text-align: center}
img {display:inline;
margin-left:auto;
margin-right:auto;}
list-style-type: none;}
.topnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #E6E6FA;
}
.topnav ul {
list-style-type: none;
float: left;
font-family: Verdana, Tahoma, sans-serif;
font-size: 15px;
border-right: 1px solid black;
}
.topnav a {
display: block;
color: ;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:
hover {
background-color:black;
}
.active {
background-color:white;
color:#E6E6FA;}
table {width: 200px;
margin: auto;
border: 1px black double}
caption {font-size: 2em;
font-weight: bold;}
thead {background-color: White;}
tbody {border: 2px black double;
font-family: Verdana, Tahoma, sans-serif;
font-size: .90em}
tbody td {border-bottom: 1px black double;
padding-left: 25 px;}
td {text-align: center;
border: 1px black double}
th {text-align: center;
border: 1px black double}
tfoot {background-color: #FFDF00;
font-weight: bold;
text-align: center;}
/* the styles for the elements */
* {
margin: 0;
padding: 0;
}
html {
background-color: white;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 800px;
margin: 0 auto;
border: 3px solid #FFDF00;
background-color: #fffded;
}
nav a:focus, nav a:hover, article a:hover {
font-style: italic;
}
/* the styles for the reflection */
header {
border-bottom: 3px solid #FFDF00;
padding: 1.5em 0;
background-image: -moz-linear-gradient(
30deg, #FFDF00 0%, #fffded 30%, white 50%, #fffded 80%, #FFDF00 100%);
background-image: -webkit-linear-gradient(
30deg, #FFDF00 0%, #fffded 30%, white 50%, #fffded 80%, #FFDF00 100%);
background-image: -o-linear-gradient(
30deg, #FFDF00 0%, #fffded 30%, white 50%, #fffded 80%, #FFDF00 100%);
background-image: linear-gradient(
30deg, #FFDF00 0%, #fffded 30%, white 50%, #fffded 80%, #FFDF00 100%);
}
header h1 {
color: #FFDF00;
}
header h2 {
font-style: italic;
}
header img {
float: left;
padding: 0 30px;
}
.shadow {
text-shadow: 2px 2px 2px #FFDF00;
}
main {
clear: left;
padding: 0 20px 20px;
width: 525px;
float: right;
}
main h1 {
color: #FFDF00;
font-size: 150%;
padding: .5em 0 .25em;
}
main h2 {
font-size: 120%;
padding-bottom: .25em;
}
main p {
padding-bottom: .5em;
}
main blockquote {
padding: 0 2em;
font-style: italic;
}
main ul {
list-style-type: none
padding: 0 0 1.5em 1.25em;
}
main li {
padding-bottom: .35em;
}
aside {
width: 215px;
float: right;
padding-left: 20px;
padding-bottom: 20px;
}
aside h1 {
color: #800000;
font-size: 150%;
padding: .5em 0 .25em;
}
aside h2 {
font-size: 120%;
padding-bottom: .25em;
}
aside img {
padding-bottom: 1em;
}
/* the styles for the navigation list */
#nav_list ul {
list-style: none;
margin-left: 0;
margin-bottom: 1.5em; }
#nav_list li {
width: 200px;
margin-bottom: .5em;
border: 2px double black;
border-radius: 10px;
box-shadow: 3px 3px 0 0 #FFDF00;
background-repeat: no-repeat;
background-position: 95% center;
}
#nav_list li a {
display: block;
font-weight: bold;
color: black;
text-decoration: none;
padding: .5em 0 .5em 1em;
}
</style><!DOCTYPE HTML>
<html lang="en">
<title>Homeroom GPA Calculatiion: Step 2</title>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="hayes_java_project.css">
<script src="gpa_calculation.js"></script>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<!-- Nav -->
<nav>
<ul class="links">
<li><a href="hayes_java_project.html">Home: GPA Calculation Tutorial</a></li>
<li><a href="project_why.html"> Why Calculate your GPA?</a></li>
<li><a href="project_step_1.html">Step 1: Document Your Grades</a></li>
<li><a href="project_step_2.html">Step 2: Convert Grade Percentages to GPA Points</a></li>
<li><a href="project_step_3.html">Step 3: Average GPA Point Total to Get GPA</a></li>
<li><a href="project_step_4.html">Step 4: Submit GPA for Teachers</a></li>
<li><a href="project_reflection.html">Reflection</a></li>
</ul>
</nav>
<h1>HHS Homeroom GPA Calculation: Step 2</h1>
<h2>Convert Grade Percentages to GPA Points</h2>
<br>
<p>When calculating your GPA, HHS uses a conversion scale to get GPA points from the percentages in each class. Enter your percentage to see what the GPA points for that particular percentage. Next to the percentage on your paper, write down the GPA points that each class currently has. See example if you are having trouble.</p>
<br>
<body>
<h1>Enter Your Grades Below</h1>
<form name="form" id="form">
<br>
Class 1: <input id="input1" type="text" /><br />
Class 2: <input id="input2" type="text" /><br />
Class 3: <input id="input3" type="text" /><br />
Class 4: <input id="input4" type="text" /><br />
Class 5: <input id="input5" type="text" /><br />
Class 6: <input id="input6" type="text" /><br />
Class 7: <input id="input7" type="text" /><br />
<button>Calculate</button>
</form>
<div id="div">
</div>
</body>
<br>
<footer><small><i>Page created by Samantha Hayes.<br>
Copyright © 2018 <br>
Please <a href="mailto:shayes@cpsk12.org">e-mail</a> me with any questions.<br>
Last updated on December 2018. </i></small>
</footer>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</html>
答案 0 :(得分：0)
请尝试以下操作：
var letterToNumber = [
['A', 4.0],
['B', 3.0],
['C', 2.0],
['D', 1.0]
];
document.querySelector('button').addEventListener('click', function() {
var input1 = document.getElementById('input1').value.toUpperCase();
var input2 = document.getElementById('input2').value.toUpperCase();
var input3 = document.getElementById('input3').value.toUpperCase();
var input4 = document.getElementById('input4').value.toUpperCase();
var input5 = document.getElementById('input5').value.toUpperCase();
var input6 = document.getElementById('input6').value.toUpperCase();
var input7 = document.getElementById('input7').value.toUpperCase();
console.clear();
var arrayLength =letterToNumber.length;
for(var j = 0; j <arrayLength; j++){
for(var i = 0; i <arrayLength; i++){
if( letterToNumber[i][0] == input1 ) {
input1 = letterToNumber[i][1];
}
if( letterToNumber[i][0] == input2 ) {
input2 = letterToNumber[i][1];
}
if( letterToNumber[i][0] == input3 ) {
input3 = letterToNumber[i][1];
}
if( letterToNumber[i][0] == input4 ) {
input4 = letterToNumber[i][1];
}
if( letterToNumber[i][0] == input5 ) {
input5 = letterToNumber[i][1];
}
if( letterToNumber[i][0] == input6 ) {
input6 = letterToNumber[i][1];
}
if( letterToNumber[i][0] == input7 ) {
input7 = letterToNumber[i][1];
}
}
}
console.log(input1, input2, input3, input4, input5, input6, input7);
});body {background-color: #E6E6FA;
font-family: Verdana, Tahoma, sans-serif;
color:#000000}
h1 {background-color:#FFDF00;
font-family: Verdana, Tahoma, sans-serif;
color:#000000;
text-align: center}
h2 {background-color: #FFDF00;
font-family: Verdana, Tahoma, sans-serif;
color:#000000;
text-align: center}
h3 {background-color:#FFDF00;
font-family: Verdana, Tahoma, sans-serif;
color: #000000;
text-align: center}
img {display:inline;
margin-left:auto;
margin-right:auto;}
list-style-type: none;}
.topnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #E6E6FA;
}
.topnav ul {
list-style-type: none;
float: left;
font-family: Verdana, Tahoma, sans-serif;
font-size: 15px;
border-right: 1px solid black;
}
.topnav a {
display: block;
color: ;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:
hover {
background-color:black;
}
.active {
background-color:white;
color:#E6E6FA;}
table {width: 200px;
margin: auto;
border: 1px black double}
caption {font-size: 2em;
font-weight: bold;}
thead {background-color: White;}
tbody {border: 2px black double;
font-family: Verdana, Tahoma, sans-serif;
font-size: .90em}
tbody td {border-bottom: 1px black double;
padding-left: 25 px;}
td {text-align: center;
border: 1px black double}
th {text-align: center;
border: 1px black double}
tfoot {background-color: #FFDF00;
font-weight: bold;
text-align: center;}
/* the styles for the elements */
* {
margin: 0;
padding: 0;
}
html {
background-color: white;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 800px;
margin: 0 auto;
border: 3px solid #FFDF00;
background-color: #fffded;
}
nav a:focus, nav a:hover, article a:hover {
font-style: italic;
}
/* the styles for the reflection */
header {
border-bottom: 3px solid #FFDF00;
padding: 1.5em 0;
background-image: -moz-linear-gradient(
30deg, #FFDF00 0%, #fffded 30%, white 50%, #fffded 80%, #FFDF00 100%);
background-image: -webkit-linear-gradient(
30deg, #FFDF00 0%, #fffded 30%, white 50%, #fffded 80%, #FFDF00 100%);
background-image: -o-linear-gradient(
30deg, #FFDF00 0%, #fffded 30%, white 50%, #fffded 80%, #FFDF00 100%);
background-image: linear-gradient(
30deg, #FFDF00 0%, #fffded 30%, white 50%, #fffded 80%, #FFDF00 100%);
}
header h1 {
color: #FFDF00;
}
header h2 {
font-style: italic;
}
header img {
float: left;
padding: 0 30px;
}
.shadow {
text-shadow: 2px 2px 2px #FFDF00;
}
main {
clear: left;
padding: 0 20px 20px;
width: 525px;
float: right;
}
main h1 {
color: #FFDF00;
font-size: 150%;
padding: .5em 0 .25em;
}
main h2 {
font-size: 120%;
padding-bottom: .25em;
}
main p {
padding-bottom: .5em;
}
main blockquote {
padding: 0 2em;
font-style: italic;
}
main ul {
list-style-type: none
padding: 0 0 1.5em 1.25em;
}
main li {
padding-bottom: .35em;
}
aside {
width: 215px;
float: right;
padding-left: 20px;
padding-bottom: 20px;
}
aside h1 {
color: #800000;
font-size: 150%;
padding: .5em 0 .25em;
}
aside h2 {
font-size: 120%;
padding-bottom: .25em;
}
aside img {
padding-bottom: 1em;
}
/* the styles for the navigation list */
#nav_list ul {
list-style: none;
margin-left: 0;
margin-bottom: 1.5em; }
#nav_list li {
width: 200px;
margin-bottom: .5em;
border: 2px double black;
border-radius: 10px;
box-shadow: 3px 3px 0 0 #FFDF00;
background-repeat: no-repeat;
background-position: 95% center;
}
#nav_list li a {
display: block;
font-weight: bold;
color: black;
text-decoration: none;
padding: .5em 0 .5em 1em;
}<!DOCTYPE HTML>
<html lang="en">
<title>Homeroom GPA Calculatiion: Step 2</title>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="hayes_java_project.css">
<script src="gpa_calculation.js"></script>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<!-- Nav -->
<nav>
<ul class="links">
<li><a href="hayes_java_project.html">Home: GPA Calculation Tutorial</a></li>
<li><a href="project_why.html"> Why Calculate your GPA?</a></li>
<li><a href="project_step_1.html">Step 1: Document Your Grades</a></li>
<li><a href="project_step_2.html">Step 2: Convert Grade Percentages to GPA Points</a></li>
<li><a href="project_step_3.html">Step 3: Average GPA Point Total to Get GPA</a></li>
<li><a href="project_step_4.html">Step 4: Submit GPA for Teachers</a></li>
<li><a href="project_reflection.html">Reflection</a></li>
</ul>
</nav>
<h1>HHS Homeroom GPA Calculation: Step 2</h1>
<h2>Convert Grade Percentages to GPA Points</h2>
<br>
<p>When calculating your GPA, HHS uses a conversion scale to get GPA points from the percentages in each class. Enter your percentage to see what the GPA points for that particular percentage. Next to the percentage on your paper, write down the GPA points that each class currently has. See example if you are having trouble.</p>
<br>
<body>
<h1>Enter Your Grades Below</h1>
<form name="form" id="form">
<br>
Class 1: <input id="input1" type="text" /><br />
Class 2: <input id="input2" type="text" /><br />
Class 3: <input id="input3" type="text" /><br />
Class 4: <input id="input4" type="text" /><br />
Class 5: <input id="input5" type="text" /><br />
Class 6: <input id="input6" type="text" /><br />
Class 7: <input id="input7" type="text" /><br />
<button type="button">Calculate</button>
</form>
<div id="div">
</div>
</body>
<br>
<footer><small><i>Page created by Samantha Hayes.<br>
Copyright © 2018 <br>
Please <a href="mailto:shayes@cpsk12.org">e-mail</a> me with any questions.<br>
Last updated on December 2018. </i></small>
</footer>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</html>
答案 1 :(得分：0)
在代码中找到该错误。我首先删除了表单，因为无论如何您都在使用事件监听器，这也会导致您的网站重定向，这就是为什么没有输出的原因。我也将输出放在div中。由于我注意到那里有一个未使用的div，因此我假设输出结果会出现在哪里。提交时没有显示任何输出的原因可能就是其中之一。
我使用.toUpperCase（），因为人们可能会输入小写字母，这将使输出不确定。可能是不必要的，但请告诉我，以便我进行编辑。
<script>
var letterToNumber = {
A: 4.0,
B: 3.0,
C: 2.0,
D: 1.0
};
document.querySelector('button').addEventListener('click', function() {
var input1 = document.getElementById('input1').value.toUpperCase();
var input2 = document.getElementById('input2').value.toUpperCase();
var input3 = document.getElementById('input3').value.toUpperCase();
var input4 = document.getElementById('input4').value.toUpperCase();
var input5 = document.getElementById('input5').value.toUpperCase();
var input6 = document.getElementById('input6').value.toUpperCase();
var input7 = document.getElementById('input7').value.toUpperCase();
input1 = letterToNumber[input1];
input2 = letterToNumber[input2];
input3 = letterToNumber[input3];
input4 = letterToNumber[input4];
input5 = letterToNumber[input5];
input6 = letterToNumber[input6];
input7 = letterToNumber[input7];
//didn't removed this cause you may wanna check or i dont know
console.log(input1, input2, input3, input4, input5, input6, input7);
//put the output in the div. Since i noticed that there is an unused div there which i assumed where the output would come out
document.getElementById('div').innerHTML = 'Class 1: ' + input1+'<hr>' + 'Class 2 : ' +input2 +'<hr>'+ 'Class 3: ' +input3+'<hr>'+ 'Class 4: ' +input4+'<hr>' +'Class 5 : ' +input5+'<hr>' + 'Class 6 :' +input6+'<hr>'+'Class 7 :'+input7 ;
});
</script>
body {background-color: #E6E6FA;
font-family: Verdana, Tahoma, sans-serif;
color:#000000}
h1 {background-color:#FFDF00;
font-family: Verdana, Tahoma, sans-serif;
color:#000000;
text-align: center}
h2 {background-color: #FFDF00;
font-family: Verdana, Tahoma, sans-serif;
color:#000000;
text-align: center}
h3 {background-color:#FFDF00;
font-family: Verdana, Tahoma, sans-serif;
color: #000000;
text-align: center}
img {display:inline;
margin-left:auto;
margin-right:auto;}
list-style-type: none;}
.topnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #E6E6FA;
}
.topnav ul {
list-style-type: none;
float: left;
font-family: Verdana, Tahoma, sans-serif;
font-size: 15px;
border-right: 1px solid black;
}
.topnav a {
display: block;
color: ;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:
hover {
background-color:black;
}
.active {
background-color:white;
color:#E6E6FA;}
table {width: 200px;
margin: auto;
border: 1px black double}
caption {font-size: 2em;
font-weight: bold;}
thead {background-color: White;}
tbody {border: 2px black double;
font-family: Verdana, Tahoma, sans-serif;
font-size: .90em}
tbody td {border-bottom: 1px black double;
padding-left: 25 px;}
td {text-align: center;
border: 1px black double}
th {text-align: center;
border: 1px black double}
tfoot {background-color: #FFDF00;
font-weight: bold;
text-align: center;}
/* the styles for the elements */
* {
margin: 0;
padding: 0;
}
html {
background-color: white;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 800px;
margin: 0 auto;
border: 3px solid #FFDF00;
background-color: #fffded;
}
nav a:focus, nav a:hover, article a:hover {
font-style: italic;
}
/* the styles for the reflection */
header {
border-bottom: 3px solid #FFDF00;
padding: 1.5em 0;
background-image: -moz-linear-gradient(
30deg, #FFDF00 0%, #fffded 30%, white 50%, #fffded 80%, #FFDF00 100%);
background-image: -webkit-linear-gradient(
30deg, #FFDF00 0%, #fffded 30%, white 50%, #fffded 80%, #FFDF00 100%);
background-image: -o-linear-gradient(
30deg, #FFDF00 0%, #fffded 30%, white 50%, #fffded 80%, #FFDF00 100%);
background-image: linear-gradient(
30deg, #FFDF00 0%, #fffded 30%, white 50%, #fffded 80%, #FFDF00 100%);
}
header h1 {
color: #FFDF00;
}
header h2 {
font-style: italic;
}
header img {
float: left;
padding: 0 30px;
}
.shadow {
text-shadow: 2px 2px 2px #FFDF00;
}
main {
clear: left;
padding: 0 20px 20px;
width: 525px;
float: right;
}
main h1 {
color: #FFDF00;
font-size: 150%;
padding: .5em 0 .25em;
}
main h2 {
font-size: 120%;
padding-bottom: .25em;
}
main p {
padding-bottom: .5em;
}
main blockquote {
padding: 0 2em;
font-style: italic;
}
main ul {
list-style-type: none
padding: 0 0 1.5em 1.25em;
}
main li {
padding-bottom: .35em;
}
aside {
width: 215px;
float: right;
padding-left: 20px;
padding-bottom: 20px;
}
aside h1 {
color: #800000;
font-size: 150%;
padding: .5em 0 .25em;
}
aside h2 {
font-size: 120%;
padding-bottom: .25em;
}
aside img {
padding-bottom: 1em;
}
/* the styles for the navigation list */
#nav_list ul {
list-style: none;
margin-left: 0;
margin-bottom: 1.5em; }
#nav_list li {
width: 200px;
margin-bottom: .5em;
border: 2px double black;
border-radius: 10px;
box-shadow: 3px 3px 0 0 #FFDF00;
background-repeat: no-repeat;
background-position: 95% center;
}
#nav_list li a {
display: block;
font-weight: bold;
color: black;
text-decoration: none;
padding: .5em 0 .5em 1em;
}<!DOCTYPE HTML>
<html lang="en">
<title>Homeroom GPA Calculatiion: Step 2</title>
<meta charset="utf-8">
<head>
</head>
<!-- Nav -->
<body>
<nav>
<ul class="links">
<li><a href="hayes_java_project.html">Home: GPA Calculation Tutorial</a></li>
<li><a href="project_why.html"> Why Calculate your GPA?</a></li>
<li><a href="project_step_1.html">Step 1: Document Your Grades</a></li>
<li><a href="project_step_2.html">Step 2: Convert Grade Percentages to GPA Points</a></li>
<li><a href="project_step_3.html">Step 3: Average GPA Point Total to Get GPA</a></li>
<li><a href="project_step_4.html">Step 4: Submit GPA for Teachers</a></li>
<li><a href="project_reflection.html">Reflection</a></li>
</ul>
</nav>
<h1>HHS Homeroom GPA Calculation: Step 2</h1>
<h2>Convert Grade Percentages to GPA Points</h2>
<br>
<p>When calculating your GPA, HHS uses a conversion scale to get GPA points from the percentages in each class. Enter your percentage to see what the GPA points for that particular percentage. Next to the percentage on your paper, write down the GPA points that each class currently has. See example if you are having trouble.</p>
<br>
<!-- Removed the form since you're using event listener anyways -->
<!-- It also causes your website to redirect -->
<h1>Enter Your Grades Below</h1>
<br>
Class 1: <input id="input1" type="text" /><br />
Class 2: <input id="input2" type="text" /><br />
Class 3: <input id="input3" type="text" /><br />
Class 4: <input id="input4" type="text" /><br />
Class 5: <input id="input5" type="text" /><br />
Class 6: <input id="input6" type="text" /><br />
Class 7: <input id="input7" type="text" /><br />
<button>Calculate</button>
<div id="div">
</div>
</body>
<br>
<footer><small><i>Page created by Samantha Hayes.<br>
Copyright © 2018 <br>
Please <a href="mailto:shayes@cpsk12.org">e-mail</a> me with any questions.<br>
Last updated on December 2018. </i></small>
</footer>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</html>