如何通过更改输入触发操作

时间:2018-01-10 11:39:02

标签: javascript jquery

在javascript或jquery中是否有一种方法可以在输入更改后更改我的div文本?

        <div class="expression box">
        <div class="form-field"><input class="input" id="fn" oninput="validFirstNumber(parseInt(this.value))" type="text" size="40"></div>
        <div class="form-field">+</div>
        <div class="form-field"><input class="input" id="sn" oninput="validSecondNumber(parseInt(this.value))" type="text" size="40"></div>
        <div class="form-field">=</div>
        <div class="form-field"><div id="result">?</div></div>
        </div>

所以我需要在fn或sn变为整数之后用结果id改变div。

function validFirstNumber(number) {


 if (6 > number || number > 9) {
        document.getElementById('fn').style.color = 'Red';
    }
    calculate();
}

function validSecondNumber(number) {
    if (6 > number || number > 9) {
        document.getElementById('sn').style.color = 'Red';
    }
    calculate();
}

function calculate() {
    if (Number.isInteger(document.getElementById('fn')) && Number.isInteger((document.getElementById('sn')))) {
        document.getElementById('result').innerHTML = document.getElementById('fn') + document.getElementById('sn');
    }
}

我想在没有按钮的情况下执行此操作,在输入中更改数字后应触发操作。

1 个答案:

答案 0 :(得分:1)

您可以对两个输入元素使用on()方法进行change事件,并使用计算结果更新结果div。 你会写这样的东西;

$("#fn, #sn").on("change", function(event){
  // assuming your calculate() method is working correctly, you can call it here which updates the result div when either of inputs change 
  calculate();
  // otherwise you can write code which gets value from both input fields and update the "result" div
});

我希望这能解决问题。