New course! Every coder should learn Generative AI!
Try a free lesson+ 1
Missing Step?
In my JavaScript study session today, I read about and coded a small bit of JavaScript to return the correct nickname associated with a players golf score on a given hole. After completing that lesson, I thought it would be fun to bring that snippet of code here, to SoloLearn, and attempt to make it work. I coded a very basic form to enter the number of strokes but haven't learned yet how to connect the input from an HTML form to a variable in JavaScript. Where can I discover the missing step? https://code.sololearn.com/Wa100A565a14
5 Answers
+ 3
[JS part]
function start1(){
var names = ["Hole-in-one!", "Eagle", "Birdie", "Par"];
function golfScore(par, strokes) {
if (strokes==1)
return names [0]
else if (strokes <= par - 2)
return names [1]
else if (strokes == par - 1)
return names [2]
}
var stroke = document.getElementById("strokes").value;
var par = document.getElementById("par").value; document.getElementById("showContent").innerHTML = golfScore(stroke, par);
}
[HTML part]
<!DOCTYPE html>
<html>
<head><title>Golf Game</title></head>
<body> <p> this is a simple routine to calculate golf scores by nickname. Enter the number of strokes on the hole.</p>
Enter the strokes: <input type="number" id="strokes" label="strokes"> <br>
Enter the par: <input type="number" id="par" label="strokes"> <br>
<input type="submit" onclick="start1()"></input><br>
<p id="showContent"></p>
</body>
</html>
+ 2
Maybe you need a par value? Or something is not going from the form?
+ 2
Here on SL you will learn this things from JS lesson +40 on. Here is my very first try to read some fields from a form.
In line 50 you will find a call on function "result" by a click event from item "button".
The function then do some calculation and prints the result at the form. Maybe you will find some hints.
https://code.sololearn.com/W8HngJ0MwijJ/?ref=app
+ 2
EO4Wellness As a couple of others have hinted, I'd say the first missing step is to get your HTML form to talk to your JavaScript function golfScore. At the moment, there's no connection between them. So, see if you can get the golfScore function to fire (i.e. to be called) when you click the submit button.
You could put a console.log("called on submit") at the very top of your golfScore function to see if you can get that message logging out when you hit the submit button.
After that, it's about getting your JavaScript function to read the number of strokes from the form. Then, doing your calculation in JavaScript as you have started to do. Also, your par variable isn't aligned to anything in the form at the moment.
0
im fairly new when it comes to using html and javascript, but i thought i would give this a go. the link below is a modified version of your code.
even though it still needs a lot of work to clean it up, i think its a good transition. i added another input box for the par value along with labels and put each label/input box pair within their own div tag and gave each input box an id. the submit button will call your golfScore function whwn clicked.
in the javascript i moved your list within the function and created two local variables to retrieve the par and strokes values. since the local variables are located within the function, i removed the paramenters for par and strokes. i also changed the returns to alerts.
during my testing, the par + 1 and on wasnt working properly and skipping to the very last if condition.
obviously, you are more than welcome to make any changes to the code. i hope its helpful to you.
https://code.sololearn.com/WVVnYHro7qAU/?ref=app
Often have questions like this?
Learn more efficiently, for free:
