program does not output to console
Question
I made a program that when you input your score and the max potential score, the percentage will be calculated - based on the percentage you will assigned a grade which will be logged to the console. I was able to make it work before but now it doesn't and i can't seem to find the issue, could you please tell me what im doing wrong and how i can fix it.
Also currently after inputting the score and max potential score, the user has to click anywhere on the screen due to the "change" event listener. Is there a way i can input the data but after pressing a submit button, only then the grade will be calculated (similar to ordinary websites)- instead of clicking anywhere.
Thank you
const text = function() { const max = document.getElementById("totalInput") const score = document.getElementById("totalScore") max.addEventListener("change", function(inputMax) { const result1 = inputMax.target.value score.addEventListener("change", function(inputScore) { const result2 = inputScore.target.value const percentage = result2 / result1 if (percentage >= 80 && percentage <= 100) { console.log(`you recieved an A - ${percentage}`); } else if (percentage >= 70 && percentage <= 79) { console.log(`you recieved an B - ${percentage}`); } else if (percentage >= 50 && percentage <= 69) { console.log(`you recieved an C - ${percentage}`); } else if (percentage >= 40 && percentage <= 49) { console.log(`you recieved an D - ${percentage}`); } }) }) } text() <.DOCTYPE html> <head> <title>Grade Calculator</title> <link rel="stylesheet" href="style:css"> </head> <body> <h1>Grade Calculator</h1> <h3>Please Enter your score.</h3> <input id="totalInput" type="text" placeholder="Max possible score"> <input id="totalScore" type="text" placeholder="Score"> <div id="outputresults"> </div> <H3>Click anywhere on the screen after entering score to recieve result!</H3> <script src="grade.js"></script> </body> </html>
1 answers
solution1
2 ACCPTED 2021-02-08 22:14:50
Without straying too far from your original code I've adjusted a few things to get your console logging again. I also added a button to calculate your logic instead of using the coupled onchange events you were using on each input to trigger your function.
Additionally, I decided to exclude your wrapping text() function because it is not necessary.
The strange part is that your logic is not accounting for all outcomes and does not have a final else statement to handle cases outside of the conditions you've set.
See the snippet below, some light comments included for the added code.
const max = document.getElementById("totalInput") const score = document.getElementById("totalScore") //declare btn as variable const btn = document.getElementById("btn") //when button is clicked run the function btn.addEventListener("click", function() { const result1 = max.value const result2 = score.value const percentage = result2 / result1 if (percentage >= 0.80 && percentage <= 1) { console.log(`you recieved an A - ${percentage}`); } else if (percentage >= 0.70 && percentage <= 0.79) { console.log(`you recieved an B - ${percentage}`); } else if (percentage >= 0.50 && percentage <= 0.69) { console.log(`you recieved an C - ${percentage}`); } else if (percentage >= 0.40 && percentage <= 0.49) { console.log(`you recieved an D - ${percentage}`); } //there should probably be a final else statement down here to handle cases outside of your declared logic above })
<.DOCTYPE html> <head> <title>Grade Calculator</title> <link rel="stylesheet" href="style:css"> </head> <body> <h1>Grade Calculator</h1> <h3>Please Enter your score.</h3> <input id="totalInput" type="text" placeholder="Max possible score"> <input id="totalScore" type="text" placeholder="Score"> <!--Button added to calculate score--> <button id="btn">Calculate</button> <div id="outputresults"> </div> <H3>Click button after entering score to recieve result!</H3> <script src="grade.js"></script> </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.