價格計算器通過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的第一個實例。

有兩個price為ID的元素。 由於li是ID的第一個實例，因此它試圖更新li元素的value屬性。 將li元素的ID更改為其他名稱，以免沖突。