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;
}

Javascript

    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 并在我的本地浏览器中测试了您的页面，输入数量和价格并检查了 giftware + 一个方法并且能够正确触发 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>

Javascript

    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
    }




}

JavaScript: 如何将单选按钮和复选框的总和放入输入框（初学者）

JavaScript: How to get sum of radio button and checkbox into a input box(Beginner)

javascript

checkbox

radio-button