2017-11-12 5 views
0

誰かがこれを手伝って、どこに間違っているのかを説明すれば非常に感謝します。私は、ボタン要素がクリックされたときに実行される関数を記述しようとしています。今すぐ最初のプロンプトが名前変数を格納するとすぐに実行しています。DOM - 値の格納と出力?

HTML:

<body> 

    <h1>Calculate a right angle:</h1> 

    <form action="index.html" method="post"> 
    <label for="first">First side:</label> 
    <input type="text" id="firstSide"> 
    <br><br> 
    <label for="second">Second side:</label> 
    <input type="text" id="secondSide"> 
    <br><br> 
    <label for="long">Long side:</label> 
    <input type="text" id="longSide"> 
    <br><br> 
    <button type="button" id="calcBtn">Calculate Triangle</button> 
    </form> 

</body> 

Javascriptを:これを助けることができる誰にも事前に

var firstname = prompt("Please enter your name"); 

//variables for storing value of each side of triangle 
var ss1 = document.getElementById("firstSide").value; 
var ss2 = document.getElementById("secondSide").value; 
var ls1 = document.getElementById("longSide").value; 


document.getElementById("calcBtn").addEventListener("click", calcTriangle(ss1, ss2, ls1)); 


//creating function for calculating the triangle 
function calcTriangle(p1, p2, p3) { 
    //formula for calculating if triangle is a right angle 
    var answer = p1 * p1 + p2 * p2; 
    if (answer == p3 * p3) { 
    alert("Hi " + firstname + ", this is a right angle."); 
    } else { 
    alert("Hi " + firstname + ", this is not a right angle."); 
    } 
} 

感謝。

+0

なぜ、関数_calcTriangle_が呼び出されたときに名前を聞かないのですか? –

+0

私は答えを提供する前に、 "js/mathRevision.js"のjavascriptを見たいと思います。それ以外に、ボタン要素がクリックされたとき(あなたが外部のJSライブラリのロジックの一部でない限り)にあなたが書いた関数を呼び出すのではなく、p1、p2、p3の値を入力要素のLATEST値あなたの機能を呼び出すまで。 – codemaker

+0

私はあなたのaddEventListenerコードを見落としたと思います:/、しかし、入力要素のLATEST値を関数に渡す必要があります。 – codemaker

答えて

0

あなたのaddEventListenerは、関数の参照を期待し、あなたは括弧でそれを書くときに、関数に

を起動すると、あなたがこの

function calcTriangle(ss1, ss2, ls1) 
のように宣言されたパラメータを渡すことができ、この

.addEventListener("click", calcTriangle) 

を試してみてください

0

この例では、ボタン要素のクリックイベント処理を示し、現在の入力要素値を関数に渡します。私はまた、いくつかの基本的な検証ロジックを加えて、数値が指定されているかどうかを判断しました。それがどうなるか教えてください。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Sample</title> 

    <script type="text/javascript" language="javascript"> 
    var firstname = prompt("Please enter your name"); 
    if(firstname.trim().length == 0) firstname = "(Unknown)"; 

//creating function for calculating the triangle 
function calcTriangle(p1, p2, p3) { 
    try 
    { 

    if(isNaN(p1) || isNaN(p2) || isNaN(p3) || p1.trim().length==0 || p2.trim().length==0 || p3.trim().length==0) 
    { 
     alert("One or more values are not valid numbers!"); 
     return; 
    } 

    //formula for calculating if triangle is a right angle 

    var answer = p1 * p1 + p2 * p2; 

    if (answer == p3 * p3) { 
     alert("Hi " + firstname + ", this is a right angle."); 
    } else { 
     alert("Hi " + firstname + ", this is not a right angle."); 
    } 

    } 
    catch(e) 
    { 
    alert("calcTriangle Error: " + e.Message) 
    } 
}  

    </script> 
</head> 
<body> 

    <h1>Calculate a right angle:</h1> 

    <form action="index.html" method="post"> 
    <label for="first">First side:</label> 
    <input type="text" id="firstSide"> 
    <br><br> 
    <label for="second">Second side:</label> 
    <input type="text" id="secondSide"> 
    <br><br> 
    <label for="long">Long side:</label> 
    <input type="text" id="longSide"> 
    <br><br> 
    <button type="button" id="calcBtn" onclick="calcTriangle(document.getElementById('firstSide').value, document.getElementById('secondSide').value, document.getElementById('longSide').value)">Calculate Triangle</button> 
    </form> 

</body> 
</html> 
関連する問題