如何从两个表单值中获取总计？

时间：2017-07-14 02:15:32

标签： javascript html css

我最近决定自学JavaScript / HTML / CSS以创建网站。我一个月前开始自己学习，并且一直在网站上工作，看看到目前为止我能做些什么，并且我希望包含一些基本的JavaScript来使网站互动。到目前为止，在开始我的项目时，我遇到了两个问题...

  1. 到目前为止，我有三个功能可以显示您的名字，您选择的花的类型，以及您单击提交按钮时想要购买的花的数量。在我被困的地方，我有一个＆＃34;订单总数＆＃34; “评论”中的部分＆＃39; div，我希望在它下面显示它将花费的总价格，这将是花的类型*花的数量。因此，我基本上不知道如何制作一个函数，该函数将从花的类型和花的数量中获取形式值，并在单击提交按钮时给出订单总数。对于此测试站点我有3朵花：向日葵，玫瑰和百合花...所以我们说向日葵是5美元，玫瑰是6美元，莉莉是7美元。

  2. 当我在浏览器中查看我的网站（我使用chrome）并点击刷新时，它会更改导航部分中按钮的大小，远小于它们原始显示的大小。当我尝试添加＆＃39;：hover＆＃39;当我将鼠标悬停在它们上面时，我的导航按钮选项让它们改变颜色，什么都不会发生。我觉得我的按钮这两个问题都是相关的，但我不知道为什么会出现这些问题。

    3. 这是我在这里发表的第一篇文章，所以我希望我做得对，并提供有关我的问题的足够信息。对于这个新手的任何帮助，非常感谢，谢谢。

    代码：

    ＆＃13;
    ＆＃13; 
    body {
    	background: #ff0055;
    	background: linear-gradient(#b30086, #ff0055) fixed;
    
    }
    
    .header {
    	width: 740px;
    	height: 130px;
    	margin: 20px auto 10px auto;
    	background: #ff80df;
    	background: linear-gradient(#ff80df, #ccffdd);
    	border-radius: 10px 50px 10px 10px;
    	box-shadow: 5px 5px 10px #3c2f00;
    	line-height: 130px;
    }
    
    .slogan {
    	font-size: 30px;
    	float: right;
    	font-family: 'Syncopate', sans-serif;
    	margin-right: 50px;
    }
    
    .workarea {
    	
    	
    	width:714px;
    	height: 417px;
    	background: #ff80df;
    	background: linear-gradient(#ccffdd, #ff80df);
    	border-radius: 10px 10px 10px 50px;
    	box-shadow: 5px 5px 10px #3c2f00;
    	padding: 20px;
    	clear: both;
    	float: left;
    	margin: 20px auto 20px auto;
    	position: absolute;
    	margin-left: 250px;
    }
    	
    .review {
    	background: green;
    	width: 180px;
    	height: 417px;
    	margin: 20px auto 20px auto;
    	float: left; 
    	margin-left:1025px;
    	position: relative;
    	padding: 20px;
    	border-radius: 10px 50px 50px 10px;
    	box-shadow: 5px 5px 10px #3c2f00;
    	background: #ff80df;
    	background: linear-gradient(#ccffdd, #ff80df);
    
    }
    
    button {
    	display: block;
    	width: 150%;
    	padding: 20%;
    	border-radius: 50px 10px 10px 50px;
    	margin-bottom: 30px;
    	margin: 20px;
    	background: #ff80df;
    	background: linear-gradient(#ccffdd, #ff80df);
    	box-shadow: 5px 5px 10px #3c2f00;
    	font-weight: bold;
    	
    	
    		
    }
    		
    		.nav {
    			position: absolute;
    			margin: 40px 40px 40px -10px;
    			margin-top: 40px;
    			
    		}
    		
    		.nav button:not(:last-child) {
    			border-bottom: none;
    		}
    		
    		.nav button:hover {
    			background-color: green;
    		}
    		
    #but2, #but3 {
    	margin-top: 50px;
    }
    ＆＃13; 
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="flower.css" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Syncopate" rel="stylesheet">
    <script>
    function showName() {
    document.getElementById("display").innerHTML = document.getElementById("name").value;
    }
    
    function showType() {
    document.getElementById("display2").innerHTML = document.getElementById("typeFlo").value;
    }
    
    function showNumber() {
    document.getElementById("display3").innerHTML = document.getElementById("numFlo").value;
    
    
    
    }
    
    </script>
    
    </head>
    
    <body>
    <div class="header">
    <span class="slogan">Miss Lemon's Flower Shop</span>
    
    
    </div>
    
    
    <div class="workarea">
    
    <h3>Place your order below!</h3>
    
    <form>
    <p>Your Name: 
    <input type="text" id="name" placeholder="Enter your name"></p><br>
    <p>Type of flower: 
    <select id="typeFlo">
    <option>Sunflower</option>
    <option>Roses</option>
    <option>Lily</option>
    </select></p><br>
    <p>Number of flowers:
    <input type="number" id="numFlo" placeholder="How many flowers?"></p><br>
    </form>
    <input type="submit" onclick="showName(); showType(); showNumber();">
    </div>
    
    <div class="review">
    <b><span id="display" style="color: red"></span><br> Review your order below</b><br><br><br>
    
    <b>Type of flower:</b><br>
    <span id="display2"></span>
    <br><br>
    <b>Number of Flowers:</b><br>
    <span id="display3"></span>
    <br><br>
    <b>Order Total:</b><br>
    <span id="display4"></span>
    <br><br><br>
    <input type="submit" value="checkout">
    
    </div>
    
    <div class="nav">
    <button id="but1">Home</button>
    <button id="but2">Products</button>
    <button id="but3">Buy Now</button>
    
    </div>
    
    
    
    </body>
    </html>
    ＆＃13;
    ＆＃13;
    ＆＃13;

2 个答案:

答案 0 :(得分：1)

首先，我用实际标签替换了输入的p标签。然后我将第一个按钮更改为实际按钮而不是提交。然后我创建了另一个函数showTotal（），它将获取花型并从数组中获取成本并将总数放入order total div中。虽然没有理由不能将所有这四个功能合并在一起。

showTotal函数将花型值存储在一个对象中，读取所选的花型和花的数量，计算总数并将其显示为2位小数。

您的悬停不起作用的原因是由于背景：线性渐变。你的背景颜色正在变化，它刚好在线性渐变之下。

How to check if a variable is an integer in JavaScript? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed 

function showName() 
{
  document.getElementById("display").innerHTML = document.getElementById("name").value;
}

function showType() 
{
  document.getElementById("display2").innerHTML = document.getElementById("typeFlo").value;
}

function showNumber() 
{
  document.getElementById("display3").innerHTML = document.getElementById("numFlo").value;
}

function showTotal()
{
  //flower prices in object
  var flowerPrices = {
    'Sunflower': 5,
    'Roses': 6,
    'Lily': 7
  };
  var numberFlowers = document.getElementById('numFlo').value;
  var flowerType = document.getElementById('typeFlo').value;
  var total = 0;
  var totalContainer = document.getElementById('display4');
  
  //check for integer
  if (!isNaN(numberFlowers) && 
         parseInt(Number(numberFlowers)) == numberFlowers && 
         !isNaN(parseInt(numberFlowers, 10)) &&
         //check that valid flower is selected
         flowerPrices.hasOwnProperty(flowerType)
   ) {
      //get total
      total = flowerPrices[flowerType] * numberFlowers;
      //format to 2 decimal places
      totalContainer.innerHTML = '$' + total.toFixed(2);
   }
}
body {
    background: #ff0055;
    background: linear-gradient(#b30086, #ff0055) fixed;

}

.header {
    width: 740px;
    height: 130px;
    margin: 20px auto 10px auto;
    background: #ff80df;
    background: linear-gradient(#ff80df, #ccffdd);
    border-radius: 10px 50px 10px 10px;
    box-shadow: 5px 5px 10px #3c2f00;
    line-height: 130px;
}

.slogan {
    font-size: 30px;
    float: right;
    font-family: 'Syncopate', sans-serif;
    margin-right: 50px;
}

.order-label {
  display: inline-block;
  width: 128px;
}

.workarea {
    width:714px;
    height: 417px;
    background: #ff80df;
    background: linear-gradient(#ccffdd, #ff80df);
    border-radius: 10px 10px 10px 50px;
    box-shadow: 5px 5px 10px #3c2f00;
    padding: 20px;
    clear: both;
    float: left;
    margin: 20px auto 20px auto;
    position: absolute;
    margin-left: 250px;
}

.review {
    background: green;
    width: 180px;
    height: 417px;
    margin: 20px auto 20px auto;
    float: left; 
    margin-left:1025px;
    position: relative;
    padding: 20px;
    border-radius: 10px 50px 50px 10px;
    box-shadow: 5px 5px 10px #3c2f00;
    background: #ff80df;
    background: linear-gradient(#ccffdd, #ff80df);

}

button {
    display: block;
    width: 150%;
    padding: 20%;
    border-radius: 50px 10px 10px 50px;
    margin-bottom: 30px;
    margin: 20px;
    background: #ff80df;
    background: linear-gradient(#ccffdd, #ff80df);
    box-shadow: 5px 5px 10px #3c2f00;
    font-weight: bold;
}

        .nav {
            position: absolute;
            margin: 40px 40px 40px -10px;
            margin-top: 40px;

        }

        .nav button:not(:last-child) {
            border-bottom: none;
        }

        .nav button:hover {
            background: linear-gradient(#0F0, #ff80df);
        }

#but2, #but3 {
    margin-top: 50px;
}

#but1:hover {
  color: #00F;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="flower.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Syncopate" rel="stylesheet">
</head>

<body>
  <div class="header">
    <span class="slogan">Miss Lemon's Flower Shop</span>
  </div>

  <div class="workarea">
    <h3>Place your order below!</h3>
    <form>
        <label for="name" class="order-label">Your Name:</label>
        <input type="text" id="name" placeholder="Enter your name"><br>
      
        <label for="typeFlo" class="order-label">Type of flower: </label>
        <select id="typeFlo">
          <option>Sunflower</option>
          <option>Roses</option>
          <option>Lily</option>
        </select><br>
        
        <label for="numFlo" class="order-label">Number of flowers: </label>
        <input type="number" id="numFlo" placeholder="How many flowers?"><br>
    </form>
    <input type="button" onclick="showName(); showType(); showNumber(); showTotal();" value="Show Totals">
  </div>

  <div class="review">
    <b><span id="display" style="color: red"></span><br> Review your order below</b><br><br><br>

    <b>Type of flower:</b><br>
    <span id="display2"></span>
    <br><br>
    <b>Number of Flowers:</b><br>
    <span id="display3"></span>
    <br><br>
    <b>Order Total:</b><br>
    <span id="display4"></span>
    <br><br><br>
    <input type="submit" value="checkout">
  </div>

  <div class="nav">
    <button id="but1">Home</button>
    <button id="but2">Products</button>
    <button id="but3">Buy Now</button>
  </div>
</body>
</html>

答案 1 :(得分：0)

这应该可以解决您的计算总数问题。请注意price_array，以便您可以对其进行自定义。这里的逻辑就像@Barmar所解释的那样。

function showOrderTotal() {
  var price_array = {"Sunflower": 5, "Roses": 6, "Lily": 7};
  var str = document.getElementById("numFlo").value;
  if (str && str.length > 0)
    var countis = str;
  else
   var  countis = 0;
  document.getElementById("display4").innerHTML =  price_array[document.getElementById("typeFlo").value] * countis;
}

至于你的css，请改用它。请注意，我使用背景而不是背景颜色来取消您使用的线渐变。我还在悬停时添加了光标更改以表示它是可点击的。

.nav > button:hover {
  background: green;
  cursor: pointer;
}
相关问题
最新问题