-1

クラスのプロジェクトのために、私はこの単純な電卓を作らなければなりませんでしたが、それは非常に簡単でした。ただし、onclick="compute()" のようなものを使用する代わりに、JavaScript でイベント リスナーを定義する必要があります。

しかし、フィールドの値を変更したり、ラジオ ボタンを選択したりするたびに、電卓の結果を更新する必要があります。これどうやってするの？私が今持っているコードは機能していません。

<script>
function compute(){
    var functionSelected = document.getElementsByName("function");
    var valueOne = Number(document.getElementById("fielda").value);
    var valueTwo = Number(document.getElementById("fieldb").value);
    var ans = 0;
    if(functionSelected[0].checked){
        ans = (valueOne+valueTwo);
    }
    if(functionSelected[1].checked){
        ans = (valueOne-valueTwo);
    }
    if(functionSelected[2].checked){
        ans = (valueOne*valueTwo);
    }
    if(functionSelected[3].checked){
        ans = (valueOne/valueTwo);
    }
    if(ans>=9007199254740992){
        document.getElementById("solution").textContent = "ERROR NUMBER TO LARGE TO BE COMPUTED";
    }
    else{
        document.getElementById("solution").textContent = "Equals: " + ans;
    }
}

document.getElementById("fielda").addEventListener("change", compute(), false);
document.getElementById("fieldb").addEventListener("change", compute(), false);
document.getElementByName("function").onclick = compute();
</script>

</head>
<body>
    <p>
    <input type="number" id="fielda"/><br />
    <input type="number" id="fieldb"/><br />
    <label><input name="function" type="radio" value="add"/> Add</label><br />
    <label><input name="function" type="radio" value="subtract"/> Subtract</label><br />
    <label><input name="function" type="radio" value="multiply"/> Multiply</label><br />
    <label><input name="function" type="radio" value="divide"/> Divide</label><br />
    </p>
    <p>
    <output id="solution">Solution Will Appear Here</output>
    </p>
</body>
4

1 に答える 1

0

使用できます

<select ... onchange="javascript:compute();">

コントロールに応じて、さまざまなイベントに応答して使用できるイベントが多数あります。

onmouseover、onclick、などの名前が付けられており、onchange必要に応じてそれぞれに JavaScript 関数を割り当てることができます。

別の方法として、次の構文を使用することもできます。

document.getElementById("id_of_select_control").onchange = function() {
    // your code here
}

または、プロジェクトで jQuery を使用する場合は、次のようになります。

$("#id_of_select_control").change(function() {
    // your code here
});
于 2013-11-07T05:54:01.263 に答える