Замените ваш код на приведенный ниже: я объясню почему.
Объяснение (я объясню очень упрощенным образом ;-)):
* Чтобы увидеть результатынашего расчета, нам нужно рассчитать среднее значение оценок
* Для того, чтобы рассчитать среднее значение оценок, нам нужно сначала иметь оценки
* Для нас, чтобы иметь оценки,нам нужны значения из форм
* Чтобы у нас были значения, нам нужен доступ к HTML DOM
Способ доступа к элементам DOM заключается в следующем
document.getElementById('myid');
Способ доступа к значениям в элементе DOM заключается в следующем
document.getElementById('myid').value;
* Итак, в HTML я взял id = "" из <h3> и поместил его в <input> теги * Затем вJavaScript, я назвал значения, введенные пользователем.
Вот и все.
<!DOCTYPE html><html lang="pt-br">
<meta charset="utf-8"/>
<head>
<title>Annual Average Grade</title>
<meta name="description" content="Calculate your annual average grade."/>
<link rel="apple-touch-icon" sizes="180x180" href="../favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="../favicons/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="../favicons/favicon-16x16.png">
<link rel="manifest" href="../favicons/site.webmanifest">
<link rel="mask-icon" href="../favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="../favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="../favicons/mstile-144x144.png">
<meta name="msapplication-config" content="../favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
</head>
<style>
h1, h2, h3, h4, h5, h6 {
font-family: 'Segoe UI';
}
a, b {
font-family: 'Segoe UI';
}
button {
border-radius: 5px 5px 5px 5px;
background-color: white;
}
input {
border-radius: 5px 5px 5px 5px;
border-color: black;
border-width: 1px;
height: 25px;
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.title {
text-align: center;
font-weight: bolder;
}
.description {
text-align: center;
font-size: 17px;
font-weight: lighter;
}
.subtitle {
text-align: center;
font-size: 30px;
font-weight: bolder;
}
.grade {
text-align: center;
margin-left: 15px;
}
</style>
<body>
<h1 class="title" style="margin-left: 15px">Annual Average Grade</h1>
<h2 class="description" style="margin-top: -20px">Calculate your annual average grade.</h2>
<br/>
<br/>
<h3 class="subtitle">Mathematics</h3>
<div class="grade">
<h3 >1st grade:</h3><input type="number" id="first-grade" />
<h3 >2nd grade:</h3><input type="number" id="second-grade" />
<h3 >3rd grade:</h3><input type="number" id="third-grade" />
<h3 >4th grade:</h3><input type="number" id="fourth-grade" />
<h3 >5th grade:</h3><input type="number" id="fifth-grade" />
<h3 >6th grade:</h3><input type="number" id="sixth-grade" />
</div>
<br/>
<div class="align-center">
<button onclick="calcGradeAverage()">Calculate</button>
</div>
<script>
function calcGradeAverage() {
var firstGrade = document.getElementById('first-grade').value;
var secondGrade = document.getElementById('second-grade').value;
var thirdGrade = document.getElementById('third-grade').value;
var fourthGrade = document.getElementById('fourth-grade').value;
var fifthGrade = document.getElementById('fifth-grade').value;
var sixthGrade = document.getElementById('sixth-grade').value;
var res = firstGrade + secondGrade + thirdGrade + fourthGrade + fifthGrade + sixthGrade / 6;
document.write(res);
}
/*
Explanation (I will explain in a verrrrry simplified way ;-) ):
*For us to see the results of our calculation , we need to calculate the average of the grades
*For us to calculate the average of grades , we need to first have the grades
*For us to have the grades , we need values from the forms
*For us to have the values , we need to access the HTML DOM
The way to access the DOM elements is this way
document.getElementById('myid')
The way to access values in a DOM element is this way
document.getElementById('myid').value
*So in HTML , I took the id="" from <h3> and placed it in <input> tags
*Then in JavaScript , I called the values inputted by the user .
Thats all .
*/
</script>
</body>
</html>