in Javascript, how can I make input boxes that changes as the values inside them change?

Question

I know I might not be explaining myself very well but here is the code. I am experimenting with javascript by making a program that calculates square feet.

JS, in head

function myFunction()
{
    var x =0;
    var y =0;
    var z =0;

    x =document.getElementById("sqrft");
    y = document.getElementById("length");
    z = document.getElementById("width");
    if(x>0 && y>0)
    {
        x.value=y*z;
    }
}

HTML

<p>A function is triggered when the user releases a key in the input field. The function transforms the character to upper case.</p>
Enter your length: <input type="text" id="length" onkeyup="myFunction()">
Enter your width: <input type="text" id="width" onkeyup="myFunction()">
Enter your totalsqrft: <input type="text" id="sqrft" onkeyup="x.value">

So basically I am trying to make the value of "sqrft" change live as the value of length and width changes.

Answer 1

You need to use:

function myFunction() {
    var x = 0;
    var y = 0;
    var z = 0;

    x = document.getElementById("sqrft"); 
    y = document.getElementById("length").value; // get value of y
    z = document.getElementById("width").value;// get value of z
    if (y > 0 && z > 0) { // compare value of y and z instead of x and y
        x.value = y * z;
    }
}

Fiddle Demo