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

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 函数 returns 一个没有 .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>

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

radio button form immediate price calculation

javascript

button

radio

price

calculation