onclickイベントを取得して関数を実行し、html要素で出力する

私のリーグから何かの方法をやっていると私はうんざりしています。私はJSから始めました。私が理解していない2つの主な事柄： 1）Idは引数としてどのように実行されるのですか？ 2）returnをdocument.getElementById.innerHTMLに入れるにはどうすればよいですか？onclickイベントを取得して関数を実行し、html要素で出力する

ありがとうございます。あなたは

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

をパラメータとして入力値を渡す必要があります

<!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）を分離する方が常に優れています。

2番目の関数も必要ないことに注意してください.1つの関数とテキストが更新される可能性がありますが、関数の引数として値を渡すことについて尋ねてきたので、私の答えで。

入力を少し変更しました。入力とjsには常にラベルを付ける必要があります。値を解析して数値と比較/計算する必要があります。すべての入力（さえTYPE =「数」入力は、その出力として文字列を与える - あなたは数字にそれらを解析する必要が

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

はこれで試してみてください。

出典

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要素で出力する

答えて

関連する問題