时间戳

首页 > 解决方案 > 如果满足条件，如何使我的按钮出现

javascript - 如果满足条件，如何使我的按钮出现

问题描述

我正在尝试做的事情：创建一个函数，自动检查总计值是否大于 250，如果大于 250，它将显示一个按钮，如果总数不是 250，那么它会出现奇怪的情况

所以我对我在这里做错了什么感到困惑

function calculateTotal() {

  // first row //
  var Unit_Price_1 = document.getElementById('Unit Price_1').value;
  var Quantity_1 = document.getElementById('Quantity_1').value;
  var Total_1 = document.getElementById('Total_1')
  var Total_Amount_1 = Unit_Price_1 * Quantity_1;
  Total_1.value = Total_Amount_1

  // Second row //
  var Unit_Price_2 = document.getElementById('Unit Price_2').value;
  var Quantity_2 = document.getElementById('Quantity_2').value;
  var Total_2 = document.getElementById('Total_2')
  var Total_Amount_2 = Unit_Price_2 * Quantity_2;
  Total_2.value = Total_Amount_2

  // grand total //
  var arr = document.getElementsByName('total');
  var total = 0;
  for (var i = 0; i < arr.length; i++) {
    if (parseInt(arr[i].value))
      total += parseInt(arr[i].value);

    if (total < 0) {
      alert("an error has occured");
      total = 0
    }

  }
  document.getElementById('total_final').value = total.toFixed(2);

  function DiscountButton() {
    var Amount = document.getElementsByName('total_final');

    if (Amount >= 250) {
      document.getElementById("dis_Button").style.visibility = "visible";
    } else {
      document.getElementById("dis_Button").style.visibility = "hidden";
    }
  }
}
<table>

  <thead>
    <tr>
      <th>Unit Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>

  <tbody>
    <!---------------- ROW 1 ------------------>

    <td>
      <input type="number" name="unit price" placeholder="0.00" id="Unit Price_1">
    </td>

    <td>
      <input type="number" name="Quality" placeholder="0" id="Quantity_1">
    </td>

    <td>
      <input required type="number" name="total" value="0.00" readonly="readonly" id="Total_1" />
    </td>
    </tr>

    <!---------------- ROW 2 ------------------>

    <td>
      <input type="number" name="unit price" placeholder="0.00" id="Unit Price_2">
    </td>

    <td>
      <input type="number" name="Quality" placeholder="0" id="Quantity_2">
    </td>

    <td>
      <input required type="number" name="total" value="0.00" readonly="readonly" id="Total_2" />
    </td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>
        <input required type="button" value="Calculate Grand Total Price" onclick="calculateTotal();" />
      </td>

      <td colspan="2">
        <input type="number" name="total_final" id="total_final" value="0.00" style="font-size: 18px; background-color: silver" readonly="readonly" />
      </td>
    </tr>
  </tfoot>
</table>
<button id="dis_Button">Press to apply discount</button>

标签： javascripthtmlcss

解决方案

Amount是一个元素，要获得它的价值，请使用Amount.value.

    <script>
  function calculateTotal() {
  
  // first row //
  var Unit_Price_1 = document.getElementById('Unit Price_1').value; 
  var Quantity_1 = document.getElementById('Quantity_1').value;
  var Total_1 = document.getElementById('Total_1')
  var Total_Amount_1 = Unit_Price_1 * Quantity_1;
  Total_1.value = Total_Amount_1

  // Second row //
  var Unit_Price_2 = document.getElementById('Unit Price_2').value; 
  var Quantity_2 = document.getElementById('Quantity_2').value;
  var Total_2 = document.getElementById('Total_2')
  var Total_Amount_2 = Unit_Price_2 * Quantity_2;
  Total_2.value = Total_Amount_2

 // grand total //
  var arr = document.getElementsByName('total');
  var total = 0;
  for (var i = 0; i < arr.length; i++) {
    if(parseInt(arr[i].value))
     total += parseInt(arr[i].value);

     if(total<0){
      alert("an error has occured");
      total = 0
            }
        
  }
  document.getElementById('total_final').value = total.toFixed(2);

  function DiscountButton(){
  var Amount = +document.getElementsByName('total_final').value;

  if (Amount >= 250){
    document.getElementById("dis_Button").style.visibility = "visible";
  }
  else {
    document.getElementById("dis_Button").style.visibility = "hidden";
  }

} }

</script>

推荐阅读