从 javascript 函数获取结果以显示在 html 元素中。
Getting results from a javascript function to display in html element.
我可以让它与 console.log(golfScore(4, 3)) 一起工作；但不是用户输入。
我很确定问题出在这一行 document.getElementById("message").innerHTML = golfScore();
如果我在 golfScore( HERE ) 中输入数字或任何内容；没有任何作用。
我可以获得 console.log(golfScore(4, 3)) 以在控制台中打印正确答案，或者如果我使用类似 document.getElementById("message").innerHTML 的内容，我可以获得正确答案以显示在 p 元素中= 高尔夫得分 (4, 3);
但是我无法让用户输入运行该函数并在 p 元素中返回正确答案
// 2 user inputs one for par and one for strokes. depending on 2 values entered re
let strokes = document.getElementById('strokes').value;
let par = document.getElementById('par').value;
let names = ["Hole-in-one!", "Eagle", "Birdie", "Par", "Bogey", "Double Bogey", "Go Home!"];
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];
} else if (strokes === par) {
return names[3];
} else if (strokes == par + 1) {
return names[4];
} else if (strokes == par + 2) {
return names[5];
} else if (strokes >= par + 3) {
return names[6];
}
document.getElementById("message").innerHTML = golfScore();
}
<!DOCTYPE html>
<html>
<head>
<title>Golf Score</title>
</head>
<body>
<h1>Golf Score</h1>
<form>
Strokes: <input type="text" id="strokes"> Par: <input type="text" id="par">
<button type="button" onclick="golfScore(par, strokes)">How did you do?</button>
</form>
<p id="message"> </p>
</body>
</html>
湖上湖3回答
-
慕后森
当您进入 if 语句时，它会退出该函数。您在呈现页面时引用输入字段，因此您没有这些值。您正在使用字符串作为数字。let names = ["Hole-in-one!", "Eagle", "Birdie", "Par", "Bogey", "Double Bogey", "Go Home!"];function golfScore() { let strokes = +document.getElementById('strokes').value; let par = +document.getElementById('par').value; var val; if (strokes == 1) { val = names[0]; } else if (strokes <= par - 2) { val = names[1]; } else if (strokes == par - 1) { val = names[2]; } else if (strokes === par) { val = names[3]; } else if (strokes == par + 1) { val = names[4]; } else if (strokes == par + 2) { val = names[5]; } else if (strokes >= par + 3) { val = names[6]; } document.getElementById("message").innerHTML = val;}<h1>Golf Score</h1><form> <label for="strokes">Strokes: <label><input type="text" id="strokes"> <label for="par">Par: </label><input type="text" id="par"> <button type="button" onclick="golfScore(par, strokes)">How did you do?</button></form><p id="message"> </p> -
长风秋雁
您永远不会执行分配给 , 的语句innerHTML，因为return它退出了函数。即使你确实到达了那里，它也会golfScore()再次调用，但没有参数，所以所有if条件都不会成功。而不是返回，您应该分配给一个变量，然后在最后将其分配给 innerHTML。您传递给的参数golfScore()是输入元素。它需要获取它们的值。// 2 user inputs one for par and one for strokes. depending on 2 values entered relet strokes = document.getElementById('strokes');let par = document.getElementById('par');let names = ["Hole-in-one!", "Eagle", "Birdie", "Par", "Bogey", "Double Bogey", "Go Home!"];function golfScore(par, strokes) { par = parseInt(par.value); strokes = parseInt(strokes.value); let message = ""; if (strokes == 1) { message = names[0]; } else if (strokes <= par - 2) { message = names[1]; } else if (strokes == par - 1) { message = names[2]; } else if (strokes === par) { message = names[3]; } else if (strokes == par + 1) { message = names[4]; } else if (strokes == par + 2) { message = names[5]; } else if (strokes >= par + 3) { message = names[6]; } document.getElementById("message").innerHTML = message;}<!DOCTYPE html><html><head> <title>Golf Score</title></head><body> <h1>Golf Score</h1> <form> Strokes: <input type="text" id="strokes"> Par: <input type="text" id="par"> <button type="button" onclick="golfScore(par, strokes)">How did you do?</button> </form> <p id="message"> </p></body></html> -
翻阅古今
javascript 文件在 HTML 首次呈现时运行，输入框仍然是空的。您只引用 javascript 开头的输入框，因此 和strokes仍然par为空（因为它们接收空输入框的值）。但是，如果您希望每次调用该函数时都检查输入框值，则将定义移至函数中let names = ["Hole-in-one!", "Eagle", "Birdie", "Par", "Bogey", "Double Bogey", "Go Home!"];function golfScore(par, strokes) { // Define strokes and par at the beginning of the function let strokes = parseInt(document.getElementById('strokes').value); let par = parseInt(document.getElementById('par').value); let out; if (strokes == 1) { out = names[0]; } else if (strokes <= par - 2) { out = names[1]; } else if (strokes == par - 1) { out = names[2]; } else if (strokes === par) { out = names[3]; } else if (strokes == par + 1) { out = names[4]; } else if (strokes == par + 2) { out = names[5]; } else if (strokes >= par + 3) { out = names[6]; } document.getElementById("message").innerHTML = out;}
随时随地看视频慕课网APP
相关分类
JavaScript