CODEWITHSUNDEEP
javascriptjqueryhtml
user10078643
user10078643

Reputation:

Variable multiplier

I have created a simple calculator that takes variable #1 and variable #2 and multiplies them to generate a result.

When I change variable #1 the result instantly changes. However, when I change variable #2 the result remains unchanged.

How do I reconfigure my code so that the result instantly changes when either variable is altered?

HTML: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h6>Variable #1</h6>
<input id="var1">

<h6>Variable #2</h6>
<input id="var2">

<h6>Result</h6>
<input readonly="readonly" id="result">

<script>
$(document).ready(function(){
    var mt=$("#var1");
    mt.keyup(function(){
        var total=isNaN(parseInt(mt.val()* $("#var2").val())) ? 0 :(mt.val()* $("#result").val())
        $("#result").val(total);
    });
});

</script>

Upvotes: 2

Views: 634

Answers (3)

Richard Ramos
Richard Ramos

Reputation: 59

I just want to answer in vanilla Javascript for future reference of the problem.. I make var1,var2 class="input", then querySelect them both, then loop them, so that when you put any number to them, their value(product) will be produce in the id="result" if you did not put any number to them, the default value is zero(0) for both of them, so let say, you only put 10 to var1, then the output will only be 10, and if you put non numeric character, then the output is NaN.

    let input = document.querySelectorAll(".input");
    let var1 = document.querySelector("#var1");
    let var2 = document.querySelector("#var2");
    let output = document.querySelector("#result");


    function result(var1=0,var2=0) {
        output.value = Number(var1)*Number(var2);
    }

    for(let i=0;i<input.length;i++)
    {
        input[i].addEventListener(`keyup`,()=>result(var1.value,var2.value))
    }
<h6>Variable #1</h6>
    <input id="var1" class="input">

    <h6>Variable #2</h6>
    <input id="var2" class="input">

    <h6>Result</h6>
    <input readonly="readonly" id="result">

By the way you can also make the code much shorter by instead of putting the id var1,var2 value, you can instead just put the input class[0], and [1] it's the same..

so it can also be done this way.

    let input = document.querySelectorAll(".input");
    let output = document.querySelector("#result");


    function result(var1=0,var2=0) {
        output.value = Number(var1)*Number(var2);
    }

    for(let i=0;i<input.length;i++)
    {
        input[i].addEventListener(`keyup`,()=>result(input[0].value,input[1].value))
    }
<h6>Variable #1</h6>
<input id="var1" class="input">

<h6>Variable #2</h6>
<input id="var2" class="input">

<h6>Result</h6>
<input readonly="readonly" id="result">

By the way if you want to follow the same logic by using ternary operator,

let's follow his example, by using ternary operator,

change the result function to this.

    function result(var1=0,var2=0) {
    (var1*var2 ===0)? output.value=0: output.value=Number(var1) * Number(var2);
    }

Upvotes: 0

Dacre Denny
Dacre Denny

Reputation: 30400

Consider binding keyup events on both #var1 and #var2 inputs using the following jQuery syntax #var1, #var2 to achieve this desired behaviour, as shown:

$(document).ready(function(){

    // Select and bind keyup event to both "var" input elements using 
    // this syntax
    $('#var1, #var2') 
    .keyup(function(){ 

        // Adjust your keyup handler to perform calculation when keyup 
        // occurs on either input field
        var total= 0;
        if(!isNaN(parseInt($("#var1").val())* parseInt($("#var2").val()))){
             total = parseFloat($("#var1").val())* parseFloat($("#var2").val());
        }

        $("#result").val(total);
    });
});

Upvotes: 0

Just code
Just code

Reputation: 13801

You have many things going wrong here, you need to bind keyup event in var1 textbox and var2 textbox both Also, your multiply formula is also wrong. Here is the desire code:

$(document).ready(function(){
    var mt=$("#var1,#var2");
    mt.keyup(function(){
    debugger;
        var total= 0;
        if(!isNaN(parseInt($("#var1").val())* parseInt(parseInt($("#var2").val())))){
          total=  parseInt($("#var1").val())* parseInt(parseInt($("#var2").val()));
        }
        
        $("#result").val(total);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h6>Variable #1</h6>
<input id="var1">

<h6>Variable #2</h6>
<input id="var2">

<h6>Result</h6>
<input readonly="readonly" id="result">

Upvotes: 4

Related Questions