我无法在警报中传递变量
[英]i cant pass the variable in alert
问题描述
on the button click of calculate ; 
在按钮上单击计算; i want to calculate all the cost. 我想计算所有费用。 i'm trying btn the alert is not working on the click. 我正在尝试btn，该警告不适用于该点击。
i'm trying without the variable it is working. 我正在尝试没有它正在工作的变量。 but when i calculate all the values and pass it in the alert function . 但是当我计算所有值并将其传递给警报功能时。 it just doesn't display anything. 它只是什么都不显示。 i have also used intParse() method to typecast.. 我还使用了intParse（）方法进行类型转换。
Help Needed. 需要帮助。 Much appreciated 非常感激
function milkHandler() { var tempMilk =document.orderForm.milk.value; var milkTotal = tempMilk * 3.19; console.log(milkTotal); } function eggHandler() { var tempEgg =document.orderForm.eggs.value; var eggTotal = tempEgg * 3.55; console.log(eggTotal); } function breadHandler() { var tempBread = document.orderForm.bread.value; var breadTotal = tempBread * 3.49; console.log(breadTotal); } function juiceHandler() { var tempJuice =document.orderForm.juice.value; var juiceTotal = tempJuice * 4.49; console.log(juiceTotal); } function honeyHandler() { var tempHoney = document.orderForm.honey.value; var honeyTotal = tempHoney * 6.59; console.log(honeyTotal); } function finish() { var mainTotal = milkTotal+eggTotal+breadTotal+juiceTotal+honeyTotal; 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>
2 个解决方案
解决方案1
0 2017-04-09 10:25:47
The problem is all your variables are defined inside the functions causing them to cease existing when function ends. 问题是所有变量都在函数内部定义，导致它们在函数结束时不再存在。
You need to define these variables outside the functions. 您需要在函数外部定义这些变量。
var milkTotal = 0; var eggTotal = 0; var breadTotal = 0; var juiceTotal = 0; var honeyTotal = 0; function milkHandler() { var tempMilk =document.orderForm.milk.value; milkTotal = tempMilk * 3.19; console.log(milkTotal); } function eggHandler() { var tempEgg =document.orderForm.eggs.value; eggTotal = tempEgg * 3.55; console.log(eggTotal); } function breadHandler() { var tempBread = document.orderForm.bread.value; breadTotal = tempBread * 3.49; console.log(breadTotal); } function juiceHandler() { var tempJuice =document.orderForm.juice.value; juiceTotal = tempJuice * 4.49; console.log(juiceTotal); } function honeyHandler() { var tempHoney = document.orderForm.honey.value; honeyTotal = tempHoney * 6.59; console.log(honeyTotal); } function finish() { var mainTotal = milkTotal+eggTotal+breadTotal+juiceTotal+honeyTotal; 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>
解决方案2
0 已采纳
You cannot use variables in one function and reuse them in another. 您不能在一个函数中使用变量，而在另一个函数中重用它们。 You could use return . 您可以使用return 。 But a simpler way to do this is to put everything into one function. 但是，一种更简单的方法是将所有内容都整合到一个函数中。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用$ .ajax将变量传递给alert（）？ - How can I pass a variable to alert() with $.ajax?
为什么我不能将此变量传递给javascript函数？ - why cant I pass this variable to the javascript function?
jstl-如何将表达式语言变量传递给javascript警报？ - jstl - how do i pass an expression language variable to a javascript alert?
为什么我不能将此变量从Javascript传递给PHP？ - Why cant i pass this variable from Javascript to PHP?
ExtJS 4无法检查变量是否未定义并警告错误 - ExtJS 4 cant check if variable is undefined and alert for error
无法将ajax变量传递给php - Cant pass ajax variable to php
为什么我不能通过活动？ - Why cant I pass the event?
Jquery：如何将字符串中的 Jquery 变量传递给 alert() 函数？ - Jquery:How do i pass a Jquery variable inside a string to the alert() function?
输入字段为空时我无法发出警报 - i cant give alert while input field is empty
执行此代码时看不到警报框 - I cant see the alert box while executing this code
相关标签