2017-02-17 26 views
0

我在做我的聯盟的一些事情,我搞亂了。我剛剛開始使用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>

回答

1

而不是試圖從值傳遞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>

0

你將不得不通過輸入值作爲參數

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

與此嘗試。

2

你正在搞亂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>

相關問題