Question

当用户在文本框中键入数字时，我已经为表单编写了一个javascript代码来计算价格。计算公式根据用户在文本框中键入的数量而变化。

例如，如果数字介于0到1200之间，则总价格=（200000 + 166.7 x facadeArea）x（projectStyle）x（projectFunction）。

问题在于总价格根本没有变化。请帮帮我。

<html>
<font face = "Algerian" ><h2>What Kind of Project Would You Like to Order?
</h2></font>
<form name ="mdl">



Project style:<br/>
&nbsp &nbsp <input type="radio" name="options" value="1" 
onchange="estimateTotal(this);">modern
&nbsp &nbsp <input type="radio" name="options" value="1.8" 
onchange="estimateTotal(this);">classic
&nbsp &nbsp <input type="radio" name="options" value="1.6" 
onchange="estimateTotal(this);">traditional
&nbsp &nbsp <input type="radio" name="options" value="1.7" 
onchange="estimateTotal(this);">prarmetric
&nbsp &nbsp <input type="radio" name="options" value="1.3" 
onchange="estimateTotal(this);">organic
<input type="hidden" name="options">
<br/>


Project function:<br/>
&nbsp &nbsp <input type="radio" name="style" value="1" 
onchange="estimateTotal(this);">villa
&nbsp &nbsp <input type="radio" name="style" value="1.4" 
onchange="estimateTotal(this);">apartment
&nbsp &nbsp <input type="radio" name="style" value="1.5" 
onchange="estimateTotal(this);">commercial
&nbsp &nbsp <input type="radio" name="style" value="1.6" 
onchange="estimateTotal(this);">official
&nbsp &nbsp <input type="radio" name="style" value="1.3" 
onchange="estimateTotal(this);">other
<input type="hidden" name="style">
<br/>

Facade Area <br/>
&nbsp &nbsp <input type="text" name="area" value="0" 
onchange="estimateTotal(this);">sqm 
<input type="hidden" name="area">
<br/>


<p>Total Price: <input type="text" name="total_price" value="0" 
readonly="readonly"></p>

</form>
</html>


code:

        <script type="text/javascript">
        var projectStyle = 
        document.querySelector('input[name=options]:checked').value,
        projectFunction = 
        document.querySelector('input[name=style]:checked').value,
        facadeArea = document.getElementByName('area').value;


       function estimateTotal(input) {
 var total = parseFloat(mdl.total_price.value);
 var value = parseFloat(input.value);

    if (input.type === 'radio') {
    if (input.name === 'options') {
       if (facadeArea == 0) {total = 0;}
       else if (facadeArea > 0 && facadeArea <= 1200) {
               total = parseInt(200000 + 166.7 * 
 facadeArea)*projectStyle*projectFunction;} 
       else if (facadeArea > 1200 && facadeArea <= 4000) {
               total = parseInt(400000 + 35.71 * 
 facadeArea)*projectStyle*projectFunction;} 
       else if (facadeArea > 4000 && facadeArea <= 10000) {
               total = parseInt(500000 + 16.66 * 
facadeArea)*projectStyle*projectFunction;}
       else {total = 700000;}
    }

  }


    mdl.total_price.value = total;
 }

 </script>

Answer 1

你有几个不同的问题：

如果未选择一组命名输入或其他输入，您的查询选择器将会出错。

document.getElementsByName函数返回一个没有.value属性的HTMLCollection。通过使用document.getElementsByName('area')[0].value

引用元素来解决此问题

由于未设置该值，因此if语句的结果始终为total = 700000;

还需要将此值转换为使用Number的数字，以使if语句正常工作。

        var ps = 'input[name="options"]:checked';
        var pf = 'input[name="style"]:checked'

        function estimateTotal(input) {
            if (!document.querySelector(ps) || document.querySelector(ps).length == 0) return;
            if (!document.querySelector(pf) || document.querySelector(pf) .length == 0) return;

            var projectStyle = document.querySelector(pf).value;
            var projectFunction = document.querySelector(ps).value;
            facadeArea = Number(document.getElementsByName('area')[0].value);

            var total = parseFloat(mdl.total_price.value);
            var value = parseFloat(input.value);

            if (input.type === 'radio') {
            if (input.name === 'options') {
            if (facadeArea == 0) {
                total = 0;
            } else if (facadeArea > 0 && facadeArea <= 1200) {
                total = parseInt(200000 + 166.7 *
                    facadeArea) * projectStyle * projectFunction;
            } else if (facadeArea > 1200 && facadeArea <= 4000) {
                total = parseInt(400000 + 35.71 *
                    facadeArea) * projectStyle * projectFunction;
            } else if (facadeArea > 4000 && facadeArea <= 10000) {
                total = parseInt(500000 + 16.66 *
                    facadeArea) * projectStyle * projectFunction;
            } else {
                total = 700000;
            }
             }

            }


            mdl.total_price.value = total;
        }

  <font face="Algerian">
        <h2>
            What Kind of Project Would You Like to Order?
        </h2>
    </font>
    <form name="mdl">


        <div>
            Project style:
        </div>
        <div>
            &nbsp &nbsp
            <input type="radio" name="options" value="1" onchange="estimateTotal(this);">modern &nbsp &nbsp <input type="radio" name="options" value="1.8" onchange="estimateTotal(this);">classic &nbsp &nbsp
            <input type="radio" name="options" value="1.6" onchange="estimateTotal(this);">traditional &nbsp &nbsp
            <input type="radio" name="options" value="1.7" onchange="estimateTotal(this);">prarmetric &nbsp &nbsp <input type="radio" name="options" value="1.3" onchange="estimateTotal(this);">organic
            <input type="hidden" name="options">
        </div>
        <div> Project function</div>
        <div>
            <input type="radio" name="style" value="1" onchange="estimateTotal(this);">villa &nbsp &nbsp <input type="radio" name="style" value="1.4" onchange="estimateTotal(this);">apartment &nbsp &nbsp <input type="radio" name="style" value="1.5" onchange="estimateTotal(this);">commercial
            &nbsp &nbsp <input type="radio" name="style" value="1.6" onchange="estimateTotal(this);">official &nbsp &nbsp <input type="radio" name="style" value="1.3" onchange="estimateTotal(this);">other
            <input type="hidden" name="style">
            <br /> Facade Area <br /> &nbsp &nbsp <input type="text" name="area" value="0" onchange="estimateTotal(this);">sqm
            <input type="hidden" name="area">
        </div>
        <br />


        <p>Total Price: <input type="text" name="total_price" value="0" readonly="readonly"></p>

    </form>

单选按钮形成即时价格计算

1 个答案: