javascript - 如何从两个表单值中获取总计？-6ren

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

转载作者：行者123 更新时间：2023-11-28 15:27:23

我最近决定自学 JavaScript/HTML/CSS 以创建网站。一个月前我开始自学，并且一直在一个网站上工作，看看到目前为止我能做什么，我想包含一些基本的 JavaScript 以使网站具有交互性。到目前为止，在开始我的元素时，我遇到了 2 个问题......

到目前为止，我有三个函数可以在您单击提交按钮时显示您的姓名、您采摘的花的类型以及您希望购买的花的数量。我被卡住的地方是我希望在“评论”div 中有一个“订单总计”部分，我希望在它下面显示它将花费的总价，这将是花的类型 * 花的数量。所以我基本上不知道如何制作一个函数，该函数将从花的类型和花的数量中获取表单值，并在单击提交按钮时让它给出订单总数。对于这个测试站点，我有3 朵花:向日葵、玫瑰和百合……假设向日葵 5 美元，玫瑰 6 美元，百合 7 美元。
当我在浏览器(我使用 chrome)中查看我的网站并点击刷新时，它会改变我在导航部分中的按钮大小，比它们最初显示的小得多。此外，当我尝试向我的导航按钮添加“:悬停”选项以让它们在我将鼠标悬停在它们上方时改变颜色时，什么也不会发生。我感觉这两个问题都与我的按钮有关，但我不知道为什么会出现这些问题。

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

代码:

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

<!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>

最佳答案

首先，我用实际标签替换了您输入的 p 标签。然后我将第一个按钮更改为实际按钮而不是提交按钮。然后我创建了另一个函数 showTotal() ，它将获取花的类型并从数组中获取成本并将总计放入订单总计 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>

关于javascript - 如何从两个表单值中获取总计？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45093560/

文章推荐： html - 为什么 flex 元素在这个 div 中增长不均匀？

文章推荐： swift - 在 load swift tableView 上选择特定行

文章推荐： javascript - 如何做出效果？

文章推荐： jquery - CSS div 增加高度但不要降低它

symfony - 多对多 Ajax 表单(Symfony2 表单)
我在 mongodb 中的玩家和锦标赛之间存在多对多关系。我希望能够一次将许多玩家添加到锦标赛中。如果没有 ajax，这很简单，但我们有一个包含数千名玩家的数据库，因此表单选择变得巨大。我们想为此
java - spring 表单 vs html 表单
这个问题已经有答案了: When should I use html's and when spring's in Spring MVC web app? (3 个回答) 已关闭 6 年前。我正
delphi - 如何将对话框(表单)中的 20 个项目的值传递给调用者(表单)
我正在 C++ Builder XE4 上使用 VCL。我有以下组件。 FormMain 具有 TButton *B_select; FormSelect(或DialogSelect)具有 TCom
delphi - 表单 :Transparent, 表单 :non Transparent? 上的控件
如何在不影响表单控件的情况下更改表单的 alphablend？德尔福XE7 最佳答案此问题的一个解决方案是使用多设备应用程序(如果无法使用VCL)。如果您需要保留透明的TForm，只需更改属性T
php - 动态 JavaScript 表单，无 HTML 表单
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
django 表单 is_valid 总是失败(扩展 django-registration 表单)
我正在尝试扩展 Django 注册以包含我自己的注册表单。原则上这是相当简单的。我只需要编写自己的表单( CustomRegistrationForm )，它是原始表单( RegistrationFo
python - ListView 中的 Django 表单，表单 POST 时出错
我正在尝试为我的网站实现聊天功能。为了做到这一点，我遵循了以下教程:https://channels.readthedocs.io/en/latest/tutorial/ 然后我稍微更改了代码以实现它
python - 一个 html 表单，几个相互关联的 django 表单 - 如何保存？
有一个问题，我需要用一个 html 表单提交两个相互关联的模型表单。我知道如何提交两个单独的表格，但是在相关模型表格的情况下外键让我发疯。问题是，第二个表单应该用外键填充字段到第一个表单的实例。在
javascript - 从 XSD 创建 Web 表单，然后输出 xml 表单
我正在创建一个工具，允许某人输入食谱，然后将其保存为 XML 文件，我已经创建了 XSD，但我想知道如何在我的网页上制作一个表单以允许用户输入他们的食谱并遵守模式。我一直在研究 Ajax 和 Jque
c# - .net win 表单(如 asp.net web 表单)中是否有可用的验证控件？
在 .net win 表单(如 asp.net web 表单)中是否有可用的验证控件？因为很难为我的每个控件设置正确的条件，所以我的表单中也有很多重复的代码。正确的做法是什么？最佳答案看看这个
Javascript 表单
我有一个简短的问题。我正在学习如何使用 javascript 制作注册表，发现此链接非常有用。 http://www.w3resource.com/javascript/form/javascript
JavaScript/表单
我正在开发一个项目，该项目将使用循环将许多表单添加到 mysql 数据库中。在 javascript 部分中，我无法让 var i 在函数 updatesum() 中工作。有人可以帮我吗？我试图避免
Android - 表单
在我的应用程序上有一个包含 2 个字段和一个保存按钮的表单。在我的 onClick 结束时我需要什么来将光标返回到第一个字段。我有这个来清除它们 txtData.setText("
类似于谷歌日历重复选项的javascript插件/表单
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
表单数字字符验证正则
<input type="text" name="textfield" onKeyPress="javascript:alert(event.
基本模板上的 Django 表单
我正在构建的网站有一个登录表单，作为所有其他模板扩展的 base.html 模板的一部分；因此，我需要以某种方式处理每个页面上的登录/注销逻辑。目前每个页面都在单独的 View 中加载，那么实现它的
Django UpdateView 表单
我有一个表单类，看起来像.. #forms.py class ExampleForm(forms.Form): color = forms.CharField(max_length=25)
django 表单 error_class
有没有办法在表单定义中给表单一个特殊的错误渲染函数？在 customizing-the-error-list-format 下的文档中它展示了如何为表单提供特殊的错误呈现函数，但似乎您必须在实例化表单
Redux 表单 - 如何将字段设置为触摸
我正在处理由多个页面组成的表单，我想解决验证问题。当我点击提交按钮时，当前页面上的所有字段都会在下方显示错误消息，但是如果我更改页面，那么我需要再次点击提交，因为这些字段未设置为已触摸。如果我可以
Django 表单 - 附加到类元排除和小部件
是否可以附加到继承表单的 exclude 或 widgets 变量？到目前为止，我有以下设置。 class AddPropertyForm(forms.ModelForm): num_mon

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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