我不能通過在按鈕點擊計算警報

變量;我想計算所有的成本。我試圖btn警報不工作的點擊。我不能通過在按鈕點擊計算警報

我試着沒有它正在工作的變量。但當我計算所有的價值，並將其傳遞到警報功能。它只是不顯示任何東西。我也用intParse（）方法來強制轉換。

需要幫助。非常感謝

function milkHandler() { 
 
\t var tempMilk =document.orderForm.milk.value; 
 
\t var milkTotal = tempMilk * 3.19; 
 
\t console.log(milkTotal); 
 
} 
 
function eggHandler() { 
 
\t var tempEgg =document.orderForm.eggs.value; 
 
\t var eggTotal = tempEgg * 3.55; 
 
\t console.log(eggTotal); 
 
} 
 
function breadHandler() { 
 
\t var tempBread = document.orderForm.bread.value; 
 
\t var breadTotal = tempBread * 3.49; 
 
\t console.log(breadTotal); 
 
} 
 
function juiceHandler() { 
 
\t var tempJuice =document.orderForm.juice.value; 
 
\t var juiceTotal = tempJuice * 4.49; 
 
\t console.log(juiceTotal); 
 
} 
 
function honeyHandler() { 
 
\t var tempHoney = document.orderForm.honey.value; 
 
\t var honeyTotal = tempHoney * 6.59; 
 
\t console.log(honeyTotal); 
 
} 
 
function finish() { 
 
\t var mainTotal = milkTotal+eggTotal+breadTotal+juiceTotal+honeyTotal; 
 
\t alert(milkTotal); 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
<title>Shopping List</title> 
 
<link href="css-pass/style.css" rel="stylesheet" type="text/css" media="all"/> 
 
<!-- Custom Theme files --> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<meta name="keywords" content="Reset Password Form Responsive, Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" /> 
 
<!--google fonts--> 
 
<!-- <link href='//fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'> --> 
 
</head> 
 
<style type="text/css"> 
 
.main-box 
 
{ 
 
    border: 0px solid; 
 
    height: 50px; 
 
    width: 100%; 
 
} 
 
.box-1 
 
{ 
 
    border: 0px solid; 
 
    height: 50px; 
 
    width: 20%; 
 
    float: left; 
 
} 
 
.box-2 
 
{ 
 
    border: 0px solid; 
 
    height: 50px; 
 
    width: 69%; 
 
    float: left; 
 
} 
 
.text 
 
{ 
 
    font-size: 20px; 
 
    color: #0086E7; 
 
    margin-top: 10px; 
 
} 
 
</style> 
 
<body> 
 
<!--element start here--> 
 
<div class="elelment"> 
 
    <h2>Grocery Order Form</h2> 
 
    <div class="element-main"> 
 
     <h1>Type in the Quantities of each item you would like to purchase in the text box below</h1><br><br> 
 
     
 
     <form action="" method="post" name="orderForm" onsubmit="finish()"> 
 
      <div class="main-box"> 
 
       <div class="box-1"> 
 
       <input type="number" name="milk" onChange = "milkHandler()" id="milk"> 
 
       </div> 
 
       <div class="box-2"> 
 
       <div class="text">Low Fat Milk [$3.19/Gallon]</div><br> 
 
       </div> 
 

 
       <div class="box-1"> 
 
       <input type="number" name="eggs" onChange = "eggHandler()"> 
 
       </div> 
 
       <div class="box-2"> 
 
       <div class="text">Cage Free Organic Eggs [$3.55/Dozen]</div> 
 
       </div> 
 

 
       <div class="box-1"> 
 
       <input type="number" name="bread" onChange = "breadHandler()"> 
 
       </div> 
 
       <div class="box-2"> 
 
       <div class="text">Whole White Bread [$3.49/Loaf]</div> 
 
       </div> 
 

 
       <div class="box-1"> 
 
       <input type="number" name="juice" onChange = "juiceHandler()"> 
 
       </div> 
 
       <div class="box-2"> 
 
       <div class="text">Fresh Grape Juice [$4.49/Half Gallon]</div> 
 
       </div> 
 

 
       <div class="box-1"> 
 
       <input type="number" name="honey" onChange = "honeyHandler()"> 
 
       </div> 
 
       <div class="box-2"> 
 
       <div class="text">Home Grown Honey [$6.59/Pint]</div> 
 
       </div> 
 
      </div> 
 
      
 
      <input type="submit" name="calculate" value="Calcuate" > 
 
      <input type="reset" name="calculate" value="Reset"> 
 
     </form> 
 
    </div> 
 
</div> 
 
<div class="copy-right"> 
 
      
 
</div> 
 

 
<!--element end here--> 
 
</body> 
 
<script src="script.js"></script> 
 
</html>

來源

2017-04-09 Nirmal Patel

這是一種錯誤的標籤。 sry –

你不能在一個函數中使用的變量，而在另一個重用他們。您可以使用return。但更簡單的方法是將所有內容組合成一個函數。

function cal() { 
 

 
var milk = document.getElementById('milk').value; 
 
var butter = document.getElementById('butter').value; 
 
var cheese = document.getElementById('cheese').value; 
 

 
document.getElementById('result').innerHTML = milk*5 + butter*4 + cheese*3; 
 

 
} 
 

 
function res() { 
 

 
document.getElementById('milk').value = 0; 
 
document.getElementById('butter').value = 0; 
 
document.getElementById('cheese').value = 0; 
 

 
document.getElementById('result').innerHTML = "Value has been reset"; 
 

 
}

Milk: $5 <input type="number" id="milk" onchange="cal()" oninput="cal()"><br> 
 
Butter: $4 <input type="number" id="butter" onchange="cal()" oninput="cal()"><br> 
 
Cheese: $3 <input type="number" id="cheese" onchange="cal()" oninput="cal()"><br> 
 
<button onclick="res()">Reset</button><br> 
 

 
Total: <div id="result"></div>

來源

2017-04-09 11:50:50

非常感謝您的幫助.. :) –

我想在html中使用onchange（）方法並使用該函數創建相應的代碼。你能幫我解決嗎？請參考HTML文件 –

@NirmalPatel這樣的事情？ – 2017-04-09 12:24:55

的問題是所有的變量都在函數中定義使他們當函數結束停止現有的。

您需要在函數外定義這些變量。

var milkTotal = 0; 
 
var eggTotal = 0; 
 
var breadTotal = 0; 
 
var juiceTotal = 0; 
 
var honeyTotal = 0; 
 

 
function milkHandler() { 
 
\t var tempMilk =document.orderForm.milk.value; 
 
\t milkTotal = tempMilk * 3.19; 
 
\t console.log(milkTotal); 
 
} 
 
function eggHandler() { 
 
\t var tempEgg =document.orderForm.eggs.value; 
 
\t eggTotal = tempEgg * 3.55; 
 
\t console.log(eggTotal); 
 
} 
 
function breadHandler() { 
 
\t var tempBread = document.orderForm.bread.value; 
 
\t breadTotal = tempBread * 3.49; 
 
\t console.log(breadTotal); 
 
} 
 
function juiceHandler() { 
 
\t var tempJuice =document.orderForm.juice.value; 
 
\t juiceTotal = tempJuice * 4.49; 
 
\t console.log(juiceTotal); 
 
} 
 
function honeyHandler() { 
 
\t var tempHoney = document.orderForm.honey.value; 
 
\t honeyTotal = tempHoney * 6.59; 
 
\t console.log(honeyTotal); 
 
} 
 
function finish() { 
 
\t var mainTotal = milkTotal+eggTotal+breadTotal+juiceTotal+honeyTotal; 
 
\t alert(mainTotal); 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
<title>Shopping List</title> 
 
<link href="css-pass/style.css" rel="stylesheet" type="text/css" media="all"/> 
 
<!-- Custom Theme files --> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<meta name="keywords" content="Reset Password Form Responsive, Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" /> 
 
<!--google fonts--> 
 
<!-- <link href='//fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'> --> 
 
</head> 
 
<style type="text/css"> 
 
.main-box 
 
{ 
 
    border: 0px solid; 
 
    height: 50px; 
 
    width: 100%; 
 
} 
 
.box-1 
 
{ 
 
    border: 0px solid; 
 
    height: 50px; 
 
    width: 20%; 
 
    float: left; 
 
} 
 
.box-2 
 
{ 
 
    border: 0px solid; 
 
    height: 50px; 
 
    width: 69%; 
 
    float: left; 
 
} 
 
.text 
 
{ 
 
    font-size: 20px; 
 
    color: #0086E7; 
 
    margin-top: 10px; 
 
} 
 
</style> 
 
<body> 
 
<!--element start here--> 
 
<div class="elelment"> 
 
    <h2>Grocery Order Form</h2> 
 
    <div class="element-main"> 
 
     <h1>Type in the Quantities of each item you would like to purchase in the text box below</h1><br><br> 
 
     
 
     <form action="" method="post" name="orderForm" onsubmit="finish()"> 
 
      <div class="main-box"> 
 
       <div class="box-1"> 
 
       <input type="number" name="milk" onChange = "milkHandler()" id="milk"> 
 
       </div> 
 
       <div class="box-2"> 
 
       <div class="text">Low Fat Milk [$3.19/Gallon]</div><br> 
 
       </div> 
 

 
       <div class="box-1"> 
 
       <input type="number" name="eggs" onChange = "eggHandler()"> 
 
       </div> 
 
       <div class="box-2"> 
 
       <div class="text">Cage Free Organic Eggs [$3.55/Dozen]</div> 
 
       </div> 
 

 
       <div class="box-1"> 
 
       <input type="number" name="bread" onChange = "breadHandler()"> 
 
       </div> 
 
       <div class="box-2"> 
 
       <div class="text">Whole White Bread [$3.49/Loaf]</div> 
 
       </div> 
 

 
       <div class="box-1"> 
 
       <input type="number" name="juice" onChange = "juiceHandler()"> 
 
       </div> 
 
       <div class="box-2"> 
 
       <div class="text">Fresh Grape Juice [$4.49/Half Gallon]</div> 
 
       </div> 
 

 
       <div class="box-1"> 
 
       <input type="number" name="honey" onChange = "honeyHandler()"> 
 
       </div> 
 
       <div class="box-2"> 
 
       <div class="text">Home Grown Honey [$6.59/Pint]</div> 
 
       </div> 
 
      </div> 
 
      
 
      <input type="submit" name="calculate" value="Calcuate" > 
 
      <input type="reset" name="calculate" value="Reset"> 
 
     </form> 
 
    </div> 
 
</div> 
 
<div class="copy-right"> 
 
      
 
</div> 
 

 
<!--element end here--> 
 
</body> 
 
<script src="script.js"></script> 
 
</html>

來源

2017-04-09 10:25:47

然後它只會顯示「0」。 –

哦對不起，我忽略了代碼中的另一個錯誤，因爲在Alert函數中有'milkTotal'而不是'mainTotal' –

所以任何解決方案？ –

我不能通過在按鈕點擊計算警報

回答

相關問題