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更改为其他内容，以免它们发生冲突。

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

1 个答案: