，我如何使輸入框隨着它們內部的值的變化而變化？

我知道我可能不會很好地解釋我自己，但這裏是代碼。我正在做一個計算平方英尺的程序，用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

<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">

所以基本上我試圖使「sqrft」的值長度和寬度變化的值更改直播。

來源

2014-04-17 user3542995

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

嗯我看到我做到了，但它仍然不顯示輸入框上的x的值。 – user3542995

可能有點矯枉過正，但你可能想看看http://angularjs.org – Aegis

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

你只是得到了對y和z元素的引用。不是他們的價值。

你應該也可能做一些檢查，以確保你的情況下，用戶獲取大量回第一以及輸入文本，你不要指望

來源

2014-04-17 15:27:24 TommyBs

你怎麼能得到實際的價值？在這種類型的功能？ – user3542995

你可以嘗試類似事件的變化。 http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange

來源

2014-04-17 15:27:30

您需要使用：

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

來源

2014-04-17 15:27:54 Felix

我認爲你的意思是，我可以通過這種方式獲得y和z的實際值。我現在的問題是顯示值，因爲當用戶給出輸入時，y和z會改變。我非常感謝你的幫助。 – user3542995

我沒有得到你想要的。你能改說你的問題嗎？ – Felix

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

DEMO

來源

2014-04-17 15:35:46 4dgaurav

我的建議是event-delegation：您使用的封閉DIV，把一個listener上change事件（簡化的HTML）：

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

這是一個相當不好的解決方案，但應該告訴你方式。的的jsfiddle一起玩是here

閱讀MDN -article約querySelector的解釋和兼容性問題。

來源

2014-04-17 15:36:37

，我如何使輸入框隨着它們內部的值的變化而變化？

回答

相關問題