我无法通过警报传递变量

时间：2017-04-09 10:11:30

标签： javascript html

按钮点击计算;我想计算所有的费用。 我正在尝试btn警报不起作用。

我正在尝试没有它正在运行的变量。 但是当我计算所有值并将其传递给警报功能时。 它只是没有显示任何东西。 我也使用intParse（）方法进行类型转换..

需要帮助。 非常感谢

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 个答案:

答案 0 :(得分：0)

问题是所有变量都在函数内定义，导致它们在函数结束时停止存在。

您需要在函数之外定义这些变量。

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>

答案 1 :(得分：0)

您不能在一个函数中使用变量，而在另一个函数中重用它们。您可以使用return。但更简单的方法是将所有内容放在一个函数中。

＆＃13;
＆＃13; 
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";

}
＆＃13; 
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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题