Question

我试图放一些金额，然后它会显示计算，如果所有输入都会给出任何数字，但我想，当我没有在任何一个输入中放任何东西时，那么输入将计算＆＃34 ; 0＆＃34;自动..

<body>
    <input type='text' id='aaa'/>
    <input type='text' id='bbb'/>
    <input type='text' id='ccc'/>
    <input type='text' id='answer' name='ans' />
<form name ="testarea" Method="GET" Action="" id='form1'>
    <input type="button" onClick="Calculate();" value="calculate"/>
</form>
</body>
<script>


    function Calculate()
        {
        var aaa= document.getElementById('aaa').value;
        var bbb= document.getElementById('bbb').value;
        var ccc= document.getElementById('ccc').value; 
        var permin = parseFloat(aaa) * 82;
        var permin1 = parseFloat(bbb) * 40;
        var permin2 = parseFloat(ccc) * 10;
        var permin3=permin+permin1+permin2;
        document.getElementById('answer').value=permin3;
        document.form1.submit();
    }
</script>

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="container">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <div>Total: <span id="mytotal"></span></div>
  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
          <a class="btn1" role="button" data-toggle="collapse" data-parent="" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <p>Name of Section <span class="count-checked-checkboxes">0</span></p>
            <p class="numOfQuestions"></p>
          </a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          <form id="form1" action="">
            <input id="question-1" type="checkbox">
            <label for="question-1">solution name</label>

            <br>
            <input id="description" type="checkbox">
            <label for="description">solution name</label>

            <br>
            <input id="question-2" type="checkbox">
            <label for="question-2">demo question</label>

            <br>
            <input id="question-3" type="checkbox">
            <label for="question-3">another demo question</label>
          </form>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
          <a class="collapsed btn1" role="button" data-toggle="collapse" data-parent="" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
            <p>Name of Section <span class="count-checked-checkboxes">0</span></p>
            <p class="numOfQuestions"></p>
          </a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
          <form id="form2" action="">
            <input id="ques-1" type="checkbox">
            <label for="ques-1">solution name</label>

            <br>
            <input id="description1" type="checkbox">
            <label for="description1">solution name</label>

            <br>
            <input id="ques2" type="checkbox">
            <label for="ques2">demo question</label>

            <br>
            <input id="ques3" type="checkbox">
            <label for="ques3">another demo question</label>

            <br>
            <input id="ques11" type="checkbox">
            <label for="ques11">another demo question</label>
          </form>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title">
          <a class="collapsed btn1" role="button" data-toggle="collapse" data-parent="" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
            <p>Name of Section <span class="count-checked-checkboxes">0</span></p>
            <p class="numOfQuestions"></p>
          </a>
        </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body">
          <form id="form3" action="">
            <input id="ques4" type="checkbox">
            <label for="ques4">solution name</label>

            <br>
            <input id="description3" type="checkbox">
            <label for="description3">solution name</label>

            <br>
            <input id="ques5" type="checkbox">
            <label for="ques5">demo question</label>

            <br>
            <input id="ques6" type="checkbox">
            <label for="ques6">another demo question</label>

            <br>
            <input id="ques44" type="checkbox">
            <label for="ques44">another demo question</label>

            <br>
            <input id="ques64" type="checkbox">
            <label for="ques64">another demo question</label>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>

如果parseFloat返回 NaN ，您可以使用着名的OR运算符。

然而，上面的代码真的很难看。我愿意（也很丑，但是干;））：

    var aaa= document.getElementById('aaa').value;
    var bbb= document.getElementById('bbb').value;
    var ccc= document.getElementById('ccc').value; 
    var permin = (parseFloat(aaa)||0) * 82;
    var permin1 = (parseFloat(bbb)||0) * 40;
    var permin2 = (parseFloat(ccc)||0) * 10;
    var permin3=permin+permin1+permin2;
    document.getElementById('answer').value=permin3;

http://jsbin.com/zanireneki/edit?output

Answer 2

您可以选择使用default parameter作为您的功能。

您的计算结果如下：

Calculate(aaa=0, bbb, ccc) {

this question涵盖了如何将html元素作为函数的参数传递。

Answer 3

您可以依赖空字符串的假值来代替使用if / else构造。

因此，您可以像这样初始化所有变量：

var aaa = document.getElementById('aaa').value || '0';

有关假值的更多信息，请参阅MDN。

如果我输入空白，那么它将计为0

3 个答案: