在Javascript中，如何使输入框随着其内部值的变化而变化？

我知道我可能没有很好地解释自己，但下面是代码。我正在通过制作一个计算平方英尺的程序来试验javascript

JS，在头上

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

当用户释放输入字段中的键时，会触发一个函数。该函数将字符转换为大写

输入您的长度：
输入您的宽度：
输入您的totalsqrft：

所以基本上，我试图让“sqrft”的值随着长度和宽度的变化而变化

x.value=y.value *z.value;

你只是得到了对y和z元素的引用。不是他们的价值

---

您可能还应该进行一些检查，以确保您首先返回一个数字，以防用户输入您不期望的文本，您可以尝试类似事件更改的操作。 您需要使用：

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;
    }
}

---

我的建议是

事件委派

：使用一个封闭的div并在

更改

事件（简化HTML）上放置一个

侦听器

：

高度
宽度
document.querySelector（“#calc”）.addEventListener（“change”，function（））{
document.querySelector（“#result”）.textContent=“result:+document.querySelector（#height”）.value*1*document.querySelector（#width”）.value*1
});

这是一个相当粗糙的解决方案，但应该为您指明方向。 要使用的JSFIDLE是

---

阅读关于

querySelector

的文章，了解解释和兼容性问题。

x.value=y.value*z.value；嗯，我知道我这样做了，但它仍然没有在输入框上显示x的值。可能有点过分，但您可能想看看如何获得实际值？在这种类型的函数中，你的意思是，这样我可以得到y和z的实际值。我现在的问题是，当用户输入时，显示y和z变化的值。顺便说一句，我很感激你的帮助。我没有得到你想要的。你能重新措辞你的问题吗？

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;
    }
}

function myFunction() {
  var width = +document.getElementById("width").value;
  var height =+document.getElementById("length").value;    
    if (width > 0 && height > 0) { 
        var area = width * height;
  document.getElementById("sqrft").value = area;
    }
}

<div id="calc">
    <input name="height" id="height"/><label for="height">height</label>
    <input name="width" id="width"/><label for="height">width</label>
</div>
<div id="result"></div>


document.querySelector("#calc").addEventListener("change", function(){
    document.querySelector("#result").textContent="result: "+document.querySelector("#height").value*1*document.querySelector("#width").value*1
});