HTML代码中的错误

时间：2017-10-31 04:17:15

标签： javascript html

我正在撰写网页。我已经完成了所需的一切，但是，当您输入超过30的任何quantity时，它会使id = "shipping"颜色变为红色。它可以做到这一点，但它也适用于任何小于30的东西。我也无法将我的提交按钮发送到服务器/网址。任何帮助表示赞赏！我会附上我的代码！

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title> Widgets R' Us </title>

  <style>
    table,
    td {
      border: 1px solid black;
    }
  </style>

  <script type="text/javascript">
    //Check if non -number or a negative number
    function realNumber() {

      var qty1 = document.getElementById("Quantity1").value;
      var qty2 = document.getElementById("Quantity2").value;
      var qty3 = document.getElementById("Quantity3").value;

      //isNaN is a predetermined function
      if ((isNaN(qty1) || qty1 < 0) || (isNaN(qty2) || qty2 < 0) || (isNaN(qty3) || qty3 < 0)) {

        alert("The quantity given is not a real number or is a negative number!");
        return false; //Will not allow for data to go to server.	
      } else {
        return true;
      }
    }

    function total() {

      var p1 = document.getElementById("Price1").value; //Value is referenced to the input tag
      var p2 = document.getElementById("Price2").value;
      var p3 = document.getElementById("Price3").value;
      var qty1 = document.getElementById("Quantity1").value;
      var qty2 = document.getElementById("Quantity2").value;
      var qty3 = document.getElementById("Quantity3").value;
      var over = qty1 + qty2 + qty3;

      if (realNumber()) {
        var totals = (p1 * qty1) + (p2 * qty2) + (p3 * qty3);
        var yes = (totals).toFixed(2);
        document.getElementById("ProductTotal").innerHTML = "$" + yes;

        if (over > 30) {
          document.getElementById("shipping").style.color = "red";

        } else {
          document.getElementById("shipping").style.color = "black";
        }
      }
    }

    function checkOut() {

      if (total()) {
        if ((document.getElementById("shipping").style.color == "red") &&
          (document.getElementById("extra").checked)) {

          return true;
        }
      }
      return false;

    }
  </script>
</head>

<body>

  <div>

    <h1><b><big> Widgets R' Us </b></strong>
    </h1>

    <h2><b> Order/Checkout </b></h2>

    <form name "widgets" onsubmit="return checkOut();" action="https://www.reddit.com/" method="get">

      <div id="mainTable">

        <table>
          <tr>
            <td>Widget Model:</td>
            <td>37AX-L
              <td>
          </tr>
          <tr>
            <td>Price per Unit:</td>
            <td>$12.45 <input type="hidden" id="Price1" name="Price1" value="12.45" /</td>
          </tr>
          <tr>
            <td>State:</td>
            <td>Regular</td>
          </tr>
          <tr>
            <td>Quantity:</td>
            <td> <input type="text" id="Quantity1" name="Quantity1" value="0" /</td>
          </tr>
        </table>

        <tr>
          <td> &nbsp;</td>
          <td>&nbsp;</td>
        </tr>

        <table>
          <tr>
            <td>Widget Model:</td>
            <td>42XR-J</td>
          </tr>
          <tr>
            <td>Price per Unit:</td>
            <td>$15.34 <input type="hidden" id="Price2" name="Price2" value="15.34" /></td>
          </tr>
          <tr>
            <td>State:</td>
            <td>Regular</td>
          </tr>
          <tr>
            <td>Quantity:</td>
            <td> <input type="text" id="Quantity2" name="Quantity2" value="0" /></td>
          </tr>
        </table>

        <tr>
          <td> &nbsp;</td>
          <td>&nbsp;</td>
        </tr>

        <table>
          <tr>
            <td>Widget Model:</td>
            <td>93ZZ-A</td>
          </tr>
          <tr>
            <td>Price per Unit:</td>
            <td>$28.99 <input type="hidden" id="Price3" name="Price3" value="28.99" /></td>
          </tr>
          <tr>
            <td>State:</td>
            <td>Regular</td>
          </tr>
          <tr>
            <td>Quantity:</td>
            <td> <input type="text" id="Quantity3" name="Quantity3" value="0" /></td>
          </tr>
        </table>

        <tr>
          <td> &nbsp;</td>
          <td>&nbsp;</td>
        </tr>

        <table>
          <tr>
            <td>Product Total:</td>
            <td>
              <p id="ProductTotal"> 0 </p>
            </td>
          </tr>

          <tr>
            <td> <input type="checkbox" id="extra" name="extra"> </td>
            <td>
              <p id="shipping">If the quantity exceeds 30 units, there will be extra shipping!</p>
            </td>
          </tr>
        </table>

      </div>

      <tr>
        <td> <input type="Submit" value="Submit" /> </td>
        <td> <input type="button" value="Calculate" onClick="total()" /> </td>
      </tr>

    </form>
</body>

</html>

3 个答案:

答案 0 :(得分：5)

您的值qty1，qty2，qty3出现问题。这些值以字符串形式读取。所以不是添加这些值，而是将字符串连接起来。替换

  var qty1 = document.getElementById("Quantity1").value;
  var qty2 = document.getElementById("Quantity2").value;
  var qty3 = document.getElementById("Quantity3").value;

与

  var qty1 = parseInt(document.getElementById("Quantity1").value);
  var qty2 = parseInt(document.getElementById("Quantity2").value);
  var qty3 = parseInt(document.getElementById("Quantity3").value);

它将以“红色”解决您的问题。

对于提交按钮，函数total()没有返回任何内容。所以改变像

这样的东西 
  function total() {

   var p1 = document.getElementById("Price1").value; //Value is referenced to the input tag
   var p2 = document.getElementById("Price2").value;
   var p3 = document.getElementById("Price3").value;
   var qty1 = parseInt(document.getElementById("Quantity1").value);
   var qty2 = parseInt(document.getElementById("Quantity2").value);
   var qty3 = parseInt(document.getElementById("Quantity3").value);
   var over = qty1 + qty2 + qty3;

   if (realNumber()) {
    var totals = (p1 * qty1) + (p2 * qty2) + (p3 * qty3);
    var yes = (totals).toFixed(2);
    document.getElementById("ProductTotal").innerHTML = "$" + yes;
    if (over > 30) {
      document.getElementById("shipping").style.color = "red";
      return true;

    } else if(over>0) {
     document.getElementById("shipping").style.color = "black";
     return true;
    }else{
     document.getElementById("shipping").style.color = "black";
     return false;
    }
 }
 }

和checkout()为

function checkOut() {
  if (total()) {
    if (((document.getElementById("shipping").style.color == "red") &&
         (document.getElementById("extra").checked))||
        (document.getElementById("shipping").style.color != "red")) {

         return true;
    }
  }
  return false;

}

答案 1 :(得分：1)

替换

var over = qty1 + qty2 + qty3;

用

var over = parseInt(qty1) + parseInt(qty2) + parseInt(qty3);

答案 2 :(得分：0)

有一些轻微的HTML错误，但真正的问题是数字字符串正在连接。因此，要获取数量值，您需要使用parseInt（）来提取整数值，以便执行数学而不是字符串连接。此外，用户必须单击“计算”按钮才能查看总计，这有点奇怪。按钮确实可以正常工作，但这是你真正想要的吗？

另外一件事，就像使用JavaScript直接改变元素的颜色一样诱人，在保持代码更健壮方面，最好只是像本例中的代码那样更改类名，因为我为此目的在CSS中创建了两个类。

只要未选中复选框且单位不超过30，表单就会立即提交。我将方法更改为＆＃34; post＆＃34;并调整checkOut（）中的true / false返回语句。请注意，使用POST方法提交数据时，不会在URL中附加任何表单数据;有关详细信息，请参阅here。我还改变了totals（）函数，现在它返回一个值，即总价格。

＆＃13;
＆＃13; 
var d = document;
d.g = d.getElementById;

var qty = [0, 0, 0, 0];
var shipping = d.g("shipping");

function realNumber() {
  var qtyInvalid = [0, 0, 0, 0];
  for (let i = 1, max = qtyInvalid.length; i < max; i++) {
    qtyInvalid[i] = (isNaN(qty[i]) || qty[i] < 0);
  }

  if (qtyInvalid[1] || qtyInvalid[2] || qtyInvalid[3]) {
    console.log("The quantity given is not a real number or is a negative number!");
    return false;
  }
  return true;
}

function total() {
  var over = 0;
  var price = [0, 0, 0, 0];

  for (j = 1, max = price.length; j < max; j++) {
    price[j] = d.g("Price" + j + "").value;
    qty[j] = d.g("Quantity" + j + "").value;
  }

  var totals = 0;
  var yes = 0;
  const radix = 10;

  for (q = 1, max = qty.length; q < max; q++) {
  over += parseInt(qty[q], radix)
}  
  //console.log(over);

  if (!realNumber()) {
    return false;
  }

  for (let k = 1, max2 = price.length; k < max2; k++) {
    totals += (price[k] * qty[k]);
  }

  yes = (totals).toFixed(2);
  d.g("ProductTotal").innerHTML = "$" + yes;

  shipping.className = (over > 30) ? "red" : "black";
return totals;
} // end total

function checkOut() {
  var retval = false;
  var shippingIsRed = (shipping.className == "red");
  var extraChecked =  d.g("extra").checked;

  if ( total() ) {
    retval = (!shippingIsRed &&  !extraChecked)? true :  false;
  }
  return retval;
} //end checkout
＆＃13; 
h1 {
  font: 200% Arial, Helvetica;
  font-weight: bold;
}

h2 {
  font-weight: bold;
}

table,
td {
  border: 1px solid black;
}

p.red {
  color: #f00;
}

p.black {
  color: #000;
}
＆＃13; 
<div>

  <h1>Widgets R' Us</h1>

  <h2>Order/Checkout</h2>

  <form name="widgets" onsubmit="return checkOut()"  action="https://www.example.com/"  method="post">

    <div id="mainTable">

      <table>
        <tr>
          <td>Widget Model:</td>
          <td>37AX-L
            <td>
        </tr>
        <tr>
          <td>Price per Unit:</td>
          <td>$12.45 <input type="hidden" id="Price1" name="Price1" value="12.45" </td>
        </tr>
        <tr>
          <td>State:</td>
          <td>Regular</td>
        </tr>
        <tr>
          <td>Quantity:</td>
          <td> <input type="text" id="Quantity1" name="Quantity1" value="0" </td>
        </tr>
      </table>

      <tr>
        <td> &nbsp;</td>
        <td>&nbsp;</td>
      </tr>

      <table>
        <tr>
          <td>Widget Model:</td>
          <td>42XR-J</td>
        </tr>
        <tr>
          <td>Price per Unit:</td>
          <td>$15.34 <input type="hidden" id="Price2" name="Price2" value="15.34"></td>
        </tr>
        <tr>
          <td>State:</td>
          <td>Regular</td>
        </tr>
        <tr>
          <td>Quantity:</td>
          <td> <input type="text" id="Quantity2" name="Quantity2" value="0"></td>
        </tr>
      </table>

      <tr>
        <td> &nbsp;</td>
        <td>&nbsp;</td>
      </tr>

      <table>
        <tr>
          <td>Widget Model:</td>
          <td>93ZZ-A</td>
        </tr>
        <tr>
          <td>Price per Unit:</td>
          <td>$28.99 <input type="hidden" id="Price3" name="Price3" value="28.99"></td>
        </tr>
        <tr>
          <td>State:</td>
          <td>Regular</td>
        </tr>
        <tr>
          <td>Quantity:</td>
          <td> <input type="text" id="Quantity3" name="Quantity3" value="0"></td>
        </tr>
      </table>

      <tr>
        <td> &nbsp;</td>
        <td>&nbsp;</td>
      </tr>

      <table>
        <tr>
          <td>Total Price:</td>
          <td>
            <p id="ProductTotal"> 0 </p>
          </td>
        </tr>

        <tr>
          <td> <input type="checkbox" id="extra" name="extra"> </td>
          <td>
            <p id="shipping" class="black">If the quantity exceeds 30 units, there will be extra shipping!</p>
          </td>
        </tr>
      </table>

    </div>

    <tr>
      <td> <input type="Submit" value="Submit" /> </td>
      <td> <input type="button" value="Calculate" onClick="total()"> </td>
    </tr>

  </form>
＆＃13;
＆＃13;
＆＃13;

我还删除了一些不必要的重复代码来获取数量值，利用了JavaScript闭包和for循环。

相关问题
最新问题