How do I make the button output what it's supposed to? The button is supposed to create an average and then output it in text but it will not do this
Question
<:doctype html> <html> <head> <title> Grade Calculator</title> </head> <body> <h2> Grade Calculator</h2> <p> Enter your Lab Grade: <input type="text" id="labBox" size=10 value=""> <br><br> Enter your Homework Grade: <input type="text" id="homeworkBox" size=10 value=""><br><br> Enter your Midterm Grade: <input type="text" id="midtermBox" size=10 value=""><br><br> Enter your Final Grade. <input type="text" id="finalBox" size=10 value=""><br><br> <br> </p> <input type="button" value="Calculate Average" onclick="lab=parseFloat(document.getElementById('labBox');value). homework=parseFloat(document.getElementById('homeworkBox');value). midterm=parseFloat(document.getElementById('midtermBox');value). final=parseFloat(document.getElementById('finalBox');value); grade=(homework+lab+midterm+final)/4. document.getElementById ('outputDiv');innerHTML='The average grade is '+ grade';"> <br> <div id="outputDiv"></div> </body> </html>
the two lines above the final br are waht is causing the issue I think, it's supposed to output a value accompanied by "the average grade is" but the button doesn't actually do anything when clicked.
1 answers
solution1
0 ACCPTED 2020-10-09 22:58:33
Here is the working example of your current code with respect to my comment:
Your code is not working because of some typoes, first, you used a double quote in getElementById ("outputDiv") it will break the whole onclick , and second, it is an unnecessary space in it and the third one is another unnecessary single quote at the end of onclick handler.
<:doctype html> <html> <head> <title> Grade Calculator</title> </head> <body> <h2> Grade Calculator</h2> <p> Enter your Lab Grade: <input type="text" id="labBox" size=10 value=""> <br><br> Enter your Homework Grade: <input type="text" id="homeworkBox" size=10 value=""><br><br> Enter your Midterm Grade: <input type="text" id="midtermBox" size=10 value=""><br><br> Enter your Final Grade. <input type="text" id="finalBox" size=10 value=""><br><br> <br> </p> <input type="button" value="Calculate Average" onclick="lab=parseFloat(document.getElementById('labBox');value). homework=parseFloat(document.getElementById('homeworkBox');value). midterm=parseFloat(document.getElementById('midtermBox');value). final=parseFloat(document.getElementById('finalBox');value); grade=(homework+lab+midterm+final)/4. document.getElementById ('outputDiv');innerHTML='The average grade is '+ grade;"> <br> <div id="outputDiv"></div> </body> </html>
But keep in mind the best way to write such a thing is to use .addEventListener in your javascript to stick with unobtrusive solution and get the necessary elements once in your JS and then use them it on the click handler.
const btn = document.querySelector("input[type='button']"); const lab = document.getElementById('labBox'); const homework = document.getElementById('homeworkBox'); const midterm = document.getElementById('midtermBox'); const final = document.getElementById('finalBox'); const outputDiv = document.getElementById('outputDiv'); btn.addEventListener("click", average); function average() { const grade = (parseFloat(homework.value) + parseFloat(lab.value) + parseFloat(midterm.value) + parseFloat(final.value)) / 4; outputDiv.textContent = 'The average grade is ' + grade; }
<:doctype html> <html> <head> <title> Grade Calculator</title> </head> <body> <h2> Grade Calculator</h2> <p> Enter your Lab Grade: <input type="text" id="labBox" size=10 value=""> <br><br> Enter your Homework Grade: <input type="text" id="homeworkBox" size=10 value=""> <br><br> Enter your Midterm Grade: <input type="text" id="midtermBox" size=10 value=""> <br><br> Enter your Final Grade: <input type="text" id="finalBox" size=10 value=""><br><br> <br> </p> <input type="button" value="Calculate Average"> <br> <div id="outputDiv"></div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.