使用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文本输入值

回答

相关问题