获取onclick事件来运行一个函数并在html元素中输出它

我在做我的联盟的一些事情，我搞乱了。我刚刚开始使用JS。 2个主要的东西，我不明白： 1）我如何获得ID作为参数运行？ 2）我如何得到返回到document.getElementById.innerHTML？获取onclick事件来运行一个函数并在html元素中输出它

谢谢你的时间。

<!DOCTYPE html> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>Golf</title> 
 
\t <style> 
 

 
\t </style> 
 

 

 
</head> \t 
 
<body> 
 
\t Strokes: <input id="strokeset"> 
 
\t Par: <input id="parset"> 
 
\t <button onclick="golfScore('#strokeset','#parset')">klik</button> 
 
\t 
 
\t <p id="demo">should be here</p> 
 
</body> 
 
\t <script> 
 
\t 
 
function golfScore(par,strokes) { 
 
    if (strokes == 1) { 
 
    return "Hole-in-one!"; 
 
    } else if (strokes <= par - 2) { 
 
    return "Eagle"; 
 
    } else if (strokes <= par -1) { 
 
    return "Birdie"; 
 
    } else if (strokes == par) { 
 
    return "Par"; 
 
    } else if (strokes == par + 1) { 
 
    return "Bogey"; 
 
    } else if (strokes == par + 2) { 
 
    return "Double Bogey"; 
 
    } else { 
 
    return "Go Home!"; 
 
    } 
 
    document.getElementById("demo").innerHTML; 
 
} 
 
    
 
\t 
 

 
\t </script> 
 
</html>

来源

2017-02-17 Vethica

而不是试图从值传递onclick-有一个功能，从输入得到的值然后另一个函数返回该函数的结果并允许将内容放入p中。在代码中将函数（javascript）从结构（HTML）中分离出来总是更好。

请注意，你甚至不需要第二个函数 - 这可能全部在一个函数中完成，并且文本已经更新，但是因为你问过把值作为参数传递给函数 - 我想我会给你在我的答案中。

另外请注意，我改变了你的输入 - 你应该总是有一个标签的输入，并在JS - 你必须解析的价值之前比较/计算与他们的数字。所有输入（即使输入=“号”输入给字符串作为它们的输出 - 所以你需要把它解析为数字

function golfScore() { 
 
    var strokes = parseInt(document.getElementById('strokeset').value); 
 
    var par = parseInt(document.getElementById('parset').value); 
 
    document.getElementById("demo").innerHTML = setText(strokes,par) 
 
} 
 

 
function setText(strokes,par){ 
 
    if (strokes == 1) { 
 
    return "Hole-in-one!"; 
 
    } else if (strokes <= par - 2) { 
 
    return "Eagle"; 
 
    } else if (strokes <= par -1) { 
 
    return "Birdie"; 
 
    } else if (strokes == par) { 
 
    return "Par"; 
 
    } else if (strokes == par + 1) { 
 
    return "Bogey"; 
 
    } else if (strokes == par + 2) { 
 
    return "Double Bogey"; 
 
    } else { 
 
    return "Go Home!"; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>Golf</title> 
 

 
</head> \t 
 
<body> 
 
    <label for = "strokeset">Strokes: </label> 
 
    <input id = "strokeset" name = "strokeset" type="text"> 
 
    
 
    <label for = "parset">Par: </label> 
 
    <input id="parset" name = "parset" type = "text"> 
 
    
 
\t <button type = "button" onclick="golfScore()">klik</button> 
 
\t 
 
\t <p id="demo"></p> 
 
</body> 
 

 
</html>

来源

2017-02-17 12:50:56 gavgrif

你将不得不通过输入值作为参数

<button onclick="golfScore(document.getElementById('strokeset').value,document.getElementById('parset').value)">klik</button>

与此尝试。

来源

2017-02-17 12:42:44

你正在搞乱jQuery的语法。

这里是你正在尝试做修复：

function golfScore(par,strokes) { 
 
    par = document.getElementById(par).value; 
 
    strokes = document.getElementById(strokes).value; 
 
    t = '' 
 
    if (strokes == 1) { 
 
    t = "Hole-in-one!"; 
 
    } else if (strokes <= par - 2) { 
 
    t = "Eagle"; 
 
    } else if (strokes <= par -1) { 
 
    t = "Birdie"; 
 
    } else if (strokes == par) { 
 
    t = "Par"; 
 
    } else if (strokes == par + 1) { 
 
    t = "Bogey"; 
 
    } else if (strokes == par + 2) { 
 
    t = "Double Bogey"; 
 
    } else { 
 
    t = "Go Home!"; 
 
    } 
 
    document.getElementById("demo").innerHTML = t; 
 
}

Strokes: <input id="strokeset"> 
 
Par: <input id="parset"> 
 
<button onclick="golfScore('strokeset','parset')">klik</button> 
 

 
<p id="demo">should be here</p>

来源

2017-02-17 12:42:47 Dekel

获取onclick事件来运行一个函数并在html元素中输出它

回答

相关问题