JavaScript：如何將單選按鈕和復選框的總和輸入框（初學者）

Question

我試圖在單擊計算按鈕時獲得單選按鈕和復選框的總和。 usps按鈕應該是$ 4，而ups按鈕應該是2.50。 我無法弄清楚如何將該金額添加到計算值中。 我只能得到數量*價格和禮品包裝選項的總和。 多謝您的協助！ 這是我的代碼。 我猜大部分工作必須在函數calculatetotal（）中完成

的CSS

 body {
    background: navy;
}
form {
    display: block;
    background: #ccc;
    width: 80%;
    color: navy;
    font-size: 14px;
    margin: auto;
}
#wrapper {
    width: 80%;
    margin: auto;
    background: navy;
    height: 800px;
}
h1 {
    color: white;
    padding: 0px 100px;
}
.buttons {
    width: 150px;
    height: 40px;
    background: white;
    color: red;
    border: 2px solid black;
    font-size: 18px;
}
.inputs {
    margin-left: 10px;
}
ul {
    text-decoration-style: none;
    padding: 20px;
}
li {
    display: inline;
    padding: 20px;
}
p {
    margin-left: 5px;
    padding: 2px 2px;
}

Java腳本

    function sayHello() {
    var userName;
    userName = document.getElementById("fname").value
    alert("Hello" + userName);
}

function validateInput() {
    if (document.getElementById("fname").value == "", document.getElementById("lname").value == "", document.getElementById("email").value == "", document.getElementById("qty").value == "") {
        document.getElementById("fname").style.background = "red";
        document.getElementById("fname").value = "Enter your First Name";
        document.getElementById("lname").style.background = "red";
        document.getElementById("lname").value = "Enter your Last Name";
        document.getElementById("email").style.background = "red";
        document.getElementById("email").value = "Enter your Email";
        document.getElementById("qty").style.background = "red";
        document.getElementById("qty").value = "Enter the Quantity";
        document.getElementById("price").style.background = "red";
        document.getElementById("price").value = "Enter the Price";
        document.getElementById("due").style.background = "red";
        document.getElementById("due").value = "Enter the Amount Due";
        return false
    } else {
        return true
    }
}

function changeText() {
    document.getElementById("changetext").innerHTML = "Complete the Order Form"
}

function mouseOut() {
    document.getElementById("changetext").innerHTML = "Order Form"
}

function calculatetotal() {
    var a = 7.50
    var b = 5.00
    var c = 2.50
    var x = document.getElementById("qty").value;
    var y = document.getElementById("price").value;
    var z = (x * y);

    if (document.getElementById("wrap").checked) {
        document.getElementById("due").value = z + a;
    } else {
        document.getElementById("due").value = z
    }
}

的HTML

    <div id=wrapper>
   <h1 id="changetext" onmouseover="changeText()" onmouseout="mouseOut()">Order Form</h1>
   <form method="get" onsubmit="return validateInput()" >
      <p>*First Name:</p>
      <input class="inputs" type="text" name="fname" id="fname">
      <p>*Last Name:</p>
      <input class="inputs" type="text" name="lname" id="lname">
      <p>*E-mail: </p>
      <input class="inputs" type="text" name="email" id="email">
      <p>Gift Wrap: <input class="inputs" type="checkbox" name="wrap" id="wrap" value = "wrap" ></p>
      <p>Select Shipping Method: 
         <input class="inputs" type="radio" name="ship" id="usps" value = "usps" >USPS 
         <input type="radio" name="ship" id="ups" value = "ups">UPS
      <p>*Quantity to Order:</p>
      <input class="inputs" type="text" name="qty" id="qty" style="text-align:right;">
      <p>*Price per Unit:</p>
      <input class="inputs" type="text" name="price" id="price" style="text-align:right;" >
      <p>Amount Due:</p>
      <input class="inputs" type="text" name="due" id="due" style="text-align:right;" readonly>
      <ul>
         <li><input class="buttons" type="button" value="Calculate Total" id="total" onclick="calculatetotal()" ></li>
         <li><input class="buttons" type="submit" value="Submit"></li>
         <li><input class="buttons" type="button" value="Print Form" id="print"></li>
         </br>
      </ul>
   </form>
</div>

Answer 1

我修復了一個不同的函數，並calculatetotal totalto，並在我的本地瀏覽器中測試了您的頁面，輸入了數量和價格，並檢查了禮物軟件和一種方法，能夠正確觸發calculatetotal() 。 請注意，這僅檢查giftwrap + shipping method 。 您應該能夠基於此模式將if分解為其他組合的其他塊。

function calculatetotal(){
   var giftwrap = 7.50;
   var usps = 4.00;
   var ups = 2.50;
   var x =  document.getElementById("qty").value;
   var y = document.getElementById("price").value;
   var z = (x*y) ;

   if ( document.getElementById("wrap").checked &&
         document.getElementById("ups").checked) {
         var total = z + ups + giftwrap;
       document.getElementById("due").value = total;
   }   
   else if ( document.getElementById("wrap").checked &&
         document.getElementById("usps").checked) {
       var total = z + usps + giftwrap;
      document.getElementById("due").value = total;
   }
   else {
          document.getElementById("due").value = z
    }
}

另外，我對validateInput()進行了以下操作，即用OR分隔條件測試，以便在其中任何一個失敗的情況下調用該塊：

function validateInput()  {

      if (document.getElementById("fname").value == "" || 
        document.getElementById("lname").value == "" || 
        document.getElementById("email").value == "" ||
        document.getElementById("qty").value == ""  )
      {
       document.getElementById("fname").style.background = "red";
       document.getElementById("fname").value = "Enter your First Name";
       document.getElementById("lname").style.background = "red";
       document.getElementById("lname").value = "Enter your Last Name";
       document.getElementById("email").style.background = "red";
       document.getElementById("email").value = "Enter your Email";
       document.getElementById("qty").style.background = "red";
       document.getElementById("qty").value = "Enter the Quantity";
       document.getElementById("price").style.background = "red";
       document.getElementById("price").value = "Enter the Price";
       document.getElementById("due").style.background = "red";
       document.getElementById("due").value = "Enter the Amount Due";
       return false 

      }
      else{
          return true

      }

}

Answer 2

只是想通了。 這不是解決問題的最有效方法，但可以完成工作。

的HTML

<div id=wrapper>


<h1 id="changetext" onmouseover="changeText()" onmouseout="mouseOut()">Order Form</h1>


<form method="get" onsubmit="return validateInput()" >

<p>*First Name:</p> <input class="inputs" type="text" name="fname" id="fname">

<p>*Last Name:</p> <input class="inputs" type="text" name="lname" id="lname">

<p>*E-mail: </p><input class="inputs" type="text" name="email" id="email">



<p>Gift Wrap: <input class="inputs" type="checkbox" name="wrap" id="wrap" value = "wrap" ></p>



<p>Select Shipping Method: 
<input class="inputs" type="radio" name="ship" id="usps" value = "usps" >USPS 

<input type="radio" name="ship" id="ups" value = "ups">UPS



<p>*Quantity to Order:</p> <input class="inputs" type="text" name="qty" id="qty" style="text-align:right;">

<p>*Price per Unit:</p> <input class="inputs" type="text" name="price" id="price" style="text-align:right;" >


<p>Amount Due:</p> <input class="inputs" type="text" name="due" id="due" style="text-align:right;" readonly>

<ul>

<li><input class="buttons" type="button" value="Calculate Total" id="total" onclick="calculatetotal()" ></li>

<li><input class="buttons" type="submit" value="Submit"></li>
<li><input class="buttons" type="button" value="Print Form" id="print"></li></br>
</ul>
</form>
</div>

Java腳本

    function sayHello() {
        var userName;
        userName = document.getElementById("fname").value

        alert ("Hello" + userName);

    }



function changeText(){
    document.getElementById("changetext").innerHTML = "Complete the Order Form"
}

function mouseOut(){
    document.getElementById("changetext").innerHTML = "Order Form"
}    

function calculatetotal(){


var a = 7.50
var b = 5.00
var c = 2.50
var x =  document.getElementById("qty").value;
var y = document.getElementById("price").value;
var d = x*y
if (document.getElementById("usps").checked){

var z = d + b  ; 
}
     else if (document.getElementById("ups").checked)
    {
    var z = d + c  ;
    }



if ( document.getElementById("wrap").checked)
{
document.getElementById("due").value = z + a  ;

}   



    else {
          document.getElementById("due").value = z
    }




}