Question

如何使用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>

请帮忙吗？谢谢。

Answer 1

您将项目乘以价格，您应该将“qty”输入元素乘以价格。

此外，您的if比较需要额外的等号。你还需要一些东西来调用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函数。

Answer 2

您需要致电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>

Answer 3

您可以向元素添加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>

Answer 4

创建一个关联数组来存储项目与价格之间的关系。

您还可以存储对函数范围之外的元素的引用，这样您只需要找到它们一次。

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

Answer 5

如果您更喜欢干净的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/

使用javascript更改html文本输入值

5 个答案: