使用 Javascript 计算具有单选按钮、文本字段和滑块组合的表单字段
Using Javascript to calculate Form fields with a combination of radio buttons, text fields, and a slider
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script>
function baseCalculate(slider,sqft,plumbing,credit){
var cost = document.getElementById("cost");
var slideval = document.getElementById("slideval");
var sqft = document.getElementById("sqft");
var plumbing = document.getElementsByName("plumbing");
var credit = document.getElementsByName("Credit");
var price = slider;
cost.innerHTML = "$"+(((sqft * price) + plumbing) * credit);
slideval.innerHTML = slider;
}
</script>
</head>
<body>
<h2>Job Estimator</h2>
How many square feet?
<input type="text" id="sqft"><br>
Price per Square Foot? <input type="range" min="55" max="80" value="70" step="1
onChange="baseCalculate(this.value,'sqft','plumbing','Credit')" style="width:500px;">
<span id="slideval">70</span>
<p>
<legend>Will there be plumbing?</legend> <label>
<input type="radio" name="plumbing" value="150" id="plumbing_0">
yes</label>
<br>
<label>
<input type="radio" name="plumbing" value="0" id="plumbing_1">
no</label>
<br>
<label>
<input type="radio" name="plumbing" value="-150" id="plumbing_2">
promo</label>
<br>
</p>
<p><legend>Paying with credit card?</legend>
<label>
<input type="radio" name="Credit" value="1.06" id="Credit_0">
Yes</label>
<br>
<label>
<input type="radio" name="Credit" value="1" id="Credit_1">
No</label>
<br>
<label>
<input type="radio" name="Credit" value=".94" id="Credit_2">
Promo</label>
<br>
</p>
<h2>This is the cost of the project: <span id="cost"></span></h2>
</body>
</html>
这是我正在使用的代码。我试图让它将平方英尺乘以价格,然后加上管道,然后将所有这些乘以信用。
我在这里错过了什么?它返回一个 NaN。
感谢您提供的任何帮助。
您必须使用 textContent 获取文本值并执行计算
var cost = document.getElementById("cost").textContent;
var slideval = document.getElementById("slideval").textContent;
var sqft = document.getElementById("sqft").textContent;
以及输入元素的值
var plumbing = document.getElementsByName("plumbing")[0].value;
var credit = document.getElementsByName("Credit")[0].value;
getElementsByName
将返回数组,这里我取了第一个值[0]
您的情况需要执行 for 循环并检查checked
属性并获取其value
以进行计算
相关文章:
- 使用通用方法覆盖每个组合getValue字段
- 如何使用jquery将两个字段组合为下拉菜单中的选项
- 将多字段html输入组合为一个参数并传递给javascript
- 将日期和时间变量组合为mysqli日期时间字段
- ExtJs组合框显示字段编码
- 谷歌地图API JS-放置两个组合字段的自动完成
- 组合功能以使用 Jquery 在一组单选按钮中显示输入字段和单选按钮
- 如何组合来自三个不同字段的值,并仅在所有三个字段都填充值时才将其设置为隐藏字段
- 从 Rally 构建的 extjs 组合框中,如何获取子 ChangeSet 记录上的字段
- 重新加载 w2ui 的 grid.columns.editable.items 如果字段是组合框
- 组合作用域后,字段在 Angular 中未正确重复
- jQuery 选择错误:添加新的选择字段并对其进行组合时出现问题
- EXT JS :在组合框中,如何为不在存储中的记录设置显示字段
- ExtJS 4 组合框在表单绑定上显示值字段而不是显示字段
- 使两个字段的组合在我的收藏中独一无二
- Adobe Acrobat:使用组合框(下拉)选择更改另一个字段
- 从多个字段组合文本字段集
- 如何将数组中的字段组合到相同长度的另一个数组中
- 文本框&选择字段组合(Javascript + Rails)
- 使用 JavaScript 确定复选框 + 隐藏字段组合的值