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 relet 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 回答
慕后森
TA贡献1802条经验 获得超5个赞
当您进入 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>
长风秋雁
TA贡献1757条经验 获得超7个赞
您永远不会执行分配给 , 的语句innerHTML，因为return它退出了函数。
即使你确实到达了那里，它也会golfScore()再次调用，但没有参数，所以所有if条件都不会成功。
而不是返回，您应该分配给一个变量，然后在最后将其分配给 innerHTML。
您传递给的参数golfScore()是输入元素。它需要获取它们的值。
// 2 user inputs one for par and one for strokes. depending on 2 values entered re
let 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>
翻阅古今
TA贡献1780条经验 获得超5个赞
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;
}
添加回答
举报
0/150
提交
取消