使用javascript更改html文本輸入值

如何在使用javascript的HTML中更改文本輸入值？在我來說，我想改變一個項目的價格輸入，當用戶選擇該項目，並投入量，例如：使用javascript更改html文本輸入值

<html> 
... 
<body> 
Quantity : <input type="text" id="qty"/> 
<br/> 
Item : <select id="item" onClick="checkPrice()"><option value="apple">Apple</option><option value="orange">Orange</option></select> //added onClick 
<br/> 
Price : <input type="text" id="price"/> 
</body> 
</html>

什麼，我想是當用戶輸入的數量和項目，價格會自動輸入。

我已經嘗試這樣做，它輸入NaN（非數字）

<script type="text/javascript"> 
function checkPrice() 
{ 
var a = document.getElementById("item").value; 
var b = document.getElementById("qty").value; 
if(a = "apple"){ 
price = 5 
document.getElementById("price").value=b*price 
}else if(a = "orange"){ 
price = 4 
document.getElementById("price").value=b*price 
} 
} 
</script>

幫助嗎？謝謝。

來源

2014-01-25 Rendy Setiadi

'一個= 「蘋果」'應該是'一個== 「蘋果」'或'一個===「蘋果「'。我看不出爲什麼你會得到'NaN'。 –

好吧，我已經嘗試過使用==和===，並且它出來NaN –

好吧，'如果（a =「apple」）'肯定是錯誤的。這將始終評估爲真，因爲非空字符串爲真。如果你修正了這個問題，並在選擇的變化上調用該函數，它的工作原理如下：http://jsfiddle.net/H74HG/。 –

您將該項目乘以價格，您應該將「數量」輸入元素乘以價格。

此外，你的比較需要一個額外的等號。你還需要一些東西來調用Javascript函數。下面是代碼：

http://jsfiddle.net/GmA3v/

Quantity : <input type="text" id="qty"> 
<br/> 
Item : <select id="item"><option value="apple">Apple</option><option value="orange">Orange</option></select> 
<br/> 
Price : <input type="text" id="price"> 
<p> 
<input type = "button" value = "Calculate" onclick="checkPrice()"> 

<script type="text/javascript"> 
function checkPrice() 
{ 
    var a = document.getElementById("item").value; 

    if(a == "apple") 
    { 
     var price = 5 
     document.getElementById("price").value=document.getElementById("qty").value*price 
    } 
    else if(a == "orange") 
    { 
     var price = 4 
     document.getElementById("price").value=document.getElementById("qty").value*price 
    } 
} 
</script>

我添加了一個按鈕，上面寫着「計算」將調用JS功能。

來源

2014-01-25 00:27:22 SyntaxLAMP

我想你看過舊的代碼。 OP更新了它，並顯示他將'price'與'qty'的值相乘。 –

那麼？我的代碼仍然有效。 – SyntaxLAMP

我只是說你對問題的解釋與問題中的代碼不匹配。 –

您需要撥打checkPrice()，並且您乘以a，這是字符串price。 price也從未初始化。

工作小提琴：http://jsfiddle.net/JyvxL/

Quantity : <input type="text" id="qty" /> 
<br/> 
Item : <select id="item"><option value="apple">Apple</option><option value="orange">Orange</option></select> 
<br/> 
Price : <input type="text" id="price"/> 

<script> 
function checkPrice() 
{ 
    var item = document.getElementById("item").value; 
    var a = document.getElementById("qty").value; 
    var price = 0; 
    if(item == "apple"){ 
     price = 5; 
     document.getElementById("price").value=a*price; 
    }else if(item == "orange"){ 
     price = 4; 
     document.getElementById("price").value=a*price; 
    } 
} 
</script> 

<button onclick="checkPrice()">Check price</button>

來源

2014-01-25 00:28:04

分號是可選的。缺席並不能解釋錯誤。在這種情況下'價格'不會被初始化？在使用它之前，他總是給它分配一個值。 –

@FelixKling是的，分號是可選的。雖然'價格'是一個價值，但它從來沒有從技術上由'var price'初始化，這是不好的做法。 –

不在JavaScript中，它使用吊裝。 – L0j1k

您可以添加onchange()事件的元素，這意味着，當一個元素的變化value，JavaScript的火checkPrice()功能，自動更新你的價值觀。另外，當您使用相等運算符（==）時，您正在使用賦值運算符（=）比較if()語句中的值。我在下面的代碼更正此：

<html> 
<head> 
<script type="text/javascript"> 
    function checkPrice() 
    { 
    if(document.getElementById("item").value == "apple"){ 
     price = 5 
     document.getElementById("price").value=document.getElementById("qty").value*price 
    }else if(document.getElementById("item").value == "orange"){ 
     price = 4 
     document.getElementById("price").value=document.getElementById("qty").value*price 
    } 
    } 
    document.getElementById("qty").onchange = checkPrice(); 
    document.getElementById("item").onchange = checkPrice(); 
</script> 
</head> 
<body> 
Quantity : <input type="text" id="qty" /> 
<br/> 
Item : <select id="item"><option value="apple">Apple</option><option value="orange">Orange</option></select> 
<br/> 
Price : <input type="text" id="price"/> 
</body> 
</html>

來源

2014-01-25 00:31:23 L0j1k

創建一個關聯數組來存儲項目及其價格之間的關係。

您還可以存儲對函數範圍之外的元素的引用，因此您只需要找到它們一次。

JSFIDDLE

的JavaScript

<script type="text/javascript"> 
var prices = { 
       apple: 5, 
       orange: 4 
      }, 
    itemElement, 
    qtyElement, 
    priceElement, 
    checkPrice = function(){ 
     priceElement.value = parseInt((qtyElement.value || 0)) 
          * (prices[ itemElement.value ] || 0); 
    }; 

window.onload = function(){ 
    itemElement = document.getElementById("item"); 
    qtyElement = document.getElementById("qty"); 
    priceElement = document.getElementById("price"); 
    checkPrice(); 
}; 
</script>

HTML

Quantity : <input type="text" id="qty" onchange="javascript:checkPrice()" /> 
<br/> 
Item : <select id="item" onchange="javascript:checkPrice()"> 
      <option value="apple">Apple</option> 
      <option value="orange">Orange</option> 
</select> 
<br/> 
Price : <input type="text" id="price" readonly="readOnly" />

來源

2014-01-25 00:35:44 MT0

-2

如果你喜歡一個乾淨漂亮的jQuery的解決方案：

的價格爲每個項目與data-

<option value="apple" data-price="2">Apple</option>

var getPrice = function(){ 
    var qty = $('#qty').val(); 
    var cost = $('#item').find('option:selected').attr('data-price'); 
    var price = Math.floor(qty*cost); 
    $('#price').attr('value',price); 
} 
$('#qty').on('keydown input',getPrice) 
$('#item').on('change',getPrice)

http://jsfiddle.net/7vTF2/1/

來源

2014-01-25 00:36:49

框架？真的嗎？ – L0j1k

就像這個一樣受歡迎，我認爲這是一個有效的選擇。它仍然概述了必需品，我不必爲此付出汗水。 Javascript已經消失了（就像恐龍一樣），但我們會長期使用它（比如石油）。 –

javascript標籤說明：*「除非包含框架/庫的標籤也包含在內，否則預計會有純JavaScript的答案。」*。 –

使用javascript更改html文本輸入值

回答

相關問題