通过html输入显示结果的价格计算器

Question

我在定价计算器中遇到了一些麻烦，更具体地说，试图在html输入字段中向用户显示结果。代码如下。

<script type="text/javascript"> 
    var quantity,result; 
    function setValues() 
    { 
     quantity = Number(document.getElementById("quantity").value); 
    } 

    function sum() 
    { 
     setValues(); 
     result = ((quantity-25)*25)+3000; 
     if (result<3000) 
     { 
      result=3000; 
     } 
     document.getElementById("price").value = result; 
    } 
</script> 

<form class="pricing-form" action="pricing-mailer.php" method="post" name="pricing_quote" enctype="multipart/form-data"> 
    <ul> 
     <li id="calculate"> 
      <input type="button" onclick="sum()" value="sum" class="calculate">Calculate</button> 
     </li> 
     <li id="properties"> 
      <label for="quantity" id="for_label"><strong>How many properties do you manage?</strong></label><br /> 
      <input id="quantity" type="text"/> 
     </li> 

     <li id="price"> 
      <label for="price" id="total_label"><strong>Your client accounting would cost just</strong></label><br /> 
      <input id="price" type="text" value=""/> 
     </li> 
    </ul> 
</form> 

Answer 1

具有相同值的两个ID是无效的HTML。但是，如果确实发生了，getElementById（）将返回它找到的那个ID的第一个实例。

有两个元素的ID为price。由于li是ID的第一个实例，因此它试图更新li元素的value属性。将li元素的ID更改为其他内容，以免发生冲突。