问题描述:

Hi I am NewBee in Javascript. This is my second week.

Below is the code that has a form with three input fields.


The relationship of the fields is:

  • the second field is twice the value of the first field
  • the third field is the square of the first field

I have managed to do the above but i am not able to do the below :

If a user enters a value in the second or third field, the script should calculate the appropriate value in the other fields.
Currently the code works well ONLY if I enter the value in the first field.

I hope I explained well in other words : how do I enter say 144 in the last textbox and the other 2 textboxes show 12 and 24 respectively. Or If I enter 24 first and first and the third text boxes show 12 and 144.

Thanks

Vipul

<html>

<head>

<script>

window.onload = init;

function init() {

var button = document.getElementById("usrButton");

button.onclick = save;

onkeyup = doMath;

function doMath(){

var base = document.getElementById("base").value;

var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value = (base*2);

var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;

}

}

</script>

</head>

<body>

<form>

<input type="text" name="base" id="base" onkeyup= "doMath()">

<br><br>

<input type="text" name="baseNumber_timesTwo" id="baseNumber_timesTwo" onkeyup= doMath()>

<br><br>

<input type="text" name="baseNumber_square" id="baseNumber_square" onkeyup= doMath()> <br><br>

</form>

</body>

</html>

网友答案:

take a look at the code below:

<html>
<head>
    <script>
        window.onload = init;

        var init = function(){
            var button = document.getElementById("usrButton");
            button.onclick = save;
            onkeyup = doMath;
        }

        var doMathbase = function(){
            console.log('here');
            var base = document.getElementById("base").value;
            var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value = (base*2); 
            var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
        }
         var doMathBase2Time = function(){
            var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value; 
            var base = document.getElementById("base").value = (baseNumber_timesTwo/2);
            var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
        }
    </script>
</head>
<body>
    <form>
        <input type="text" name="base" id="base" onkeyup= "doMathbase()">
        <br><br>
        <input type="text" name="baseNumber_timesTwo" id="baseNumber_timesTwo" onkeyup= "doMathBase2Time()">
        <br><br>
        <input type="text" name="baseNumber_square" id="baseNumber_square" onkeyup= "doMathBaseSquare()">
        <br><br>
    </form>
</body>

You need to bind another function to the second and third field. I did it to the second. Now if you entered a number in the second field it return the 'base' number and the square of the base.

Try do it for the third :)

网友答案:

This should fit your needs:

Fiddle

//declaring those earlier saves you to get those by ID every
//time you call "doMath()" or something else

var base = document.getElementById("base");
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo"); 
var baseNumber_square = document.getElementById("baseNumber_square");

function clearUp() {
    base.value = ""; 
    baseNumber_timesTwo.value = "";
    baseNumber_square.value = "";
}

function doMath() {
    //check which of the fields was filled
    if(baseNumber_timesTwo.value){
        base.value = baseNumber_timesTwo.value / 2;
    }
    if(baseNumber_square.value){
        base.value = Math.sqrt(baseNumber_square.value);
    }
    
    //fill other fields according to that
    baseNumber_timesTwo.value = (base.value*2); 
    baseNumber_square.value = (base.value*base.value) ;
    
}
相关阅读:
Top