Как определить текстовые поля и прослушиватели радиокнопки в JavaScript

-1

Итак, для проекта класса я должен сделать этот простой калькулятор, что было очень легко сделать. Тем не менее, я должен определить своих прослушивателей событий в JavaScript, а не использовать что-то вроде: 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>

источник

2013-11-07 user2898916

'.addEventListener ("изменения", вычислить, ложный) '. Функциональный вызов вызова функции VS. – elclanrs

Связанные: [http://stackoverflow.com/questions/574941/best-way-to-track-onchange-as-you-type-in-input-type-text](http://stackoverflow.com/questions/574941/best-way-to-track-onchange-as-you-type-in-input-type-text) –

Не могли бы вы быть более конкретными. Если я просто изменил это, он все равно не сработает. – user2898916

Вы можете использовать

<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-07 05:54:01

Не могли бы вы расширить этот ответ? Я думаю, что я близок к использованию: document.getElementById ("fielda"). Onchange = вычислить; Но это не работает? – user2898916

Я не могу добавить html из того, что у меня есть, это может быть только JavaScript. – user2898916

Для этой конкретной части это часто задаваемый вопрос. Я не буду изобретать велосипед. Взгляните сюда: http://stackoverflow.com/questions/2554149/html-javascript-change-div-content –

Как определить текстовые поля и прослушиватели радиокнопки в JavaScript

ответ

Смежные вопросы