javascript - 从输入字段和复选框添加值
问题描述
我正在尝试从输入字段和复选框值中计算值。
这是我的 html 和 js,我用它们在输入字段中获取值:
function displayAbo(el) {
document.getElementById("contactFormFieldId_284").value =
el.querySelector('.product__title').textContent + " " +
el.querySelector('.product__price').textContent;
}
<div class="product__item" onclick="displayAbo(this)" id="product-basic" tabindex="0" role="radio" aria-checked="false" aria-describedby="basic-desc">
<div class="product__inner" id="basic-desc" onclick="smoothScroll(document.getElementById('scroll'))">
<h3 class="product__title">LEUWIN M</h3>
<ul class="product__features">
<li class="product__features-item">40 Mbit/s</li>
<li class="product__features-item"><img src="themes/zuerich/images/I.png" style="width: 100px; margin-right: 110px;"></li>
</ul>
<div class="product_footer">
<h4 class="product__price">CHF 39.–</h4>
<p class="product__bestellen">Zum Bestellformular</p>
</div>
</div>
</div>
<div class="product__item" onclick="displayAbo(this)" id="product-medium" tabindex="-1" role="radio" aria-checked="false" aria-describedby="medium-desc">
<div class="product__inner" id="medium-desc" onclick="smoothScroll(document.getElementById('scroll'))">
<h3 class="product__title">LEUWIN L</h3>
<ul class="product__features">
<li class="product__features-item">100 Mbit/s</li>
<li class="product__features-item"><img src="themes/zuerich/images/I.png" style="width: 100px; margin-right: 110px;"></li>
</ul>
<div class="product_footer">
<h4 class="product__price">CHF 49.–</h4>
<p class="product__bestellen">Zum Bestellformular</p>
</div>
</div>
</div>
<!--Checkbox and Result Field-->
<div class="contact row">
<label for="contactFormFieldId_284" style="color: #003664; font-size: 16px; font-weight: bold;">[[284_LABEL]]</label>
<input class="contactFormClass_text" id="contactFormFieldId_284" type="text" name="contactFormField_284" value="[[284_VALUE]]" />
</div>
<div class="contact row">
<label for="contactFormFieldId_385">[[385_LABEL]]</label>
<input class="contactFormClass_checkbox" id="contactFormFieldId_385" type="checkbox" name="contactFormField_385" value="5" [[SELECTED_385]] />
</div>
<div class="contact row">
<label for="contactFormFieldId_386">[[386_LABEL]]</label>
<input class="contactFormClass_checkbox" id="contactFormFieldId_386" type="checkbox" name="contactFormField_386" value="15" [[SELECTED_386]] />
</div>
<div class="contact row">
<label for="contactFormFieldId_387">[[387_LABEL]]</label>
<input class="contactFormClass_checkbox" id="contactFormFieldId_387" type="checkbox" name="contactFormField_387" value="20" [[SELECTED_387]] />
</div>
<div class="contact row">
<label for="contactFormFieldId_388" style="color: #003664; font-size: 16px; font-weight: bold;">[[388_LABEL]]</label>
<input class="contactFormClass_text" id="contactFormFieldId_388" type="text" name="contactFormField_388" value="0" />
</div>
使用此代码,我可以计算复选框中的值
window.onload=function(){
var inputs = document.getElementsByClassName('contactFormClass_checkbox'),
total = document.getElementById('contactFormFieldId_388');
for (var i=0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var add = this.value * (this.checked ? 1 : -1);
total.innerHTML = parseFloat(total.innerHTML) + add
var new_total = parseFloat(document.getElementById('contactFormFieldId_388').value);
console.log(new_total);
document.getElementById('contactFormFieldId_388').value=new_total + add
}
}
}
现在我要从字段中收集值,我以为我是解析和值,我用这段代码做了,剩下的我仍然要包含代码,但我没有成功..
var price = document.querySelector('[aria-checked=true] .product__price').innerHTML;
var multiplier = price.substr(price.indexOf(" ")+1,price.indexOf('.') - price.indexOf(" ")-1);
var new_total = multiplier *
有人可以帮我看看我在加起来时哪里出错了。谢谢!
解决方案
var checkBoxes = document.getElementsByClassName('contactFormClass_checkbox');
var sum = 0,
inputField = document.getElementById('contactFormFieldId_284'),
finalInput = document.getElementById('contactFormFieldId_388');
Array.prototype.slice.call(checkBoxes).forEach( (checkBox) => {
checkBox.addEventListener('change', calculateTotal, false);
})
inputField.addEventListener('blur', calculateSumWithInput, false);
function calculateTotal(e) {
if(e.target.checked) {
sum += parseInt(e.target.value, 10);
} else {
sum -= parseInt(e.target.value, 10);
}
finalInput.value = sum;
}
function calculateSumWithInput(e) {
var value = e.target.value;
if(value && !isNaN(value) && Number(value) === parseInt(value, 10)) {
sum = parseInt(value, 10);
finalInput.value = sum;
}
}
<div class="product__item" onclick="displayAbo(this)" id="product-basic" tabindex="0" role="radio" aria-checked="false" aria-describedby="basic-desc">
<div class="product__inner" id="basic-desc" onclick="smoothScroll(document.getElementById('scroll'))">
<h3 class="product__title">LEUWIN M</h3>
<ul class="product__features">
<li class="product__features-item">40 Mbit/s</li>
<li class="product__features-item"><img src="themes/zuerich/images/I.png" style="width: 100px; margin-right: 110px;"></li>
</ul>
<div class="product_footer">
<h4 class="product__price">CHF 39.–</h4>
<p class="product__bestellen">Zum Bestellformular</p>
</div>
</div>
</div>
<div class="product__item" onclick="displayAbo(this)" id="product-medium" tabindex="-1" role="radio" aria-checked="false" aria-describedby="medium-desc">
<div class="product__inner" id="medium-desc" onclick="smoothScroll(document.getElementById('scroll'))">
<h3 class="product__title">LEUWIN L</h3>
<ul class="product__features">
<li class="product__features-item">100 Mbit/s</li>
<li class="product__features-item"><img src="themes/zuerich/images/I.png" style="width: 100px; margin-right: 110px;"></li>
</ul>
<div class="product_footer">
<h4 class="product__price">CHF 49.–</h4>
<p class="product__bestellen">Zum Bestellformular</p>
</div>
</div>
</div>
<!--Checkbox and Result Field-->
<div class="contact row">
<label for="contactFormFieldId_284" style="color: #003664; font-size: 16px; font-weight: bold;">[[284_LABEL]]</label>
<input class="contactFormClass_text" id="contactFormFieldId_284" type="text" name="contactFormField_284" value="" />
</div>
<div class="contact row">
<label for="contactFormFieldId_385">[[385_LABEL]]</label>
<input class="contactFormClass_checkbox" id="contactFormFieldId_385" type="checkbox" name="contactFormField_385" value="5" [[SELECTED_385]] />
</div>
<div class="contact row">
<label for="contactFormFieldId_386">[[386_LABEL]]</label>
<input class="contactFormClass_checkbox" id="contactFormFieldId_386" type="checkbox" name="contactFormField_386" value="15" [[SELECTED_386]] />
</div>
<div class="contact row">
<label for="contactFormFieldId_387">[[387_LABEL]]</label>
<input class="contactFormClass_checkbox" id="contactFormFieldId_387" type="checkbox" name="contactFormField_387" value="20" [[SELECTED_387]] />
</div>
<div class="contact row">
<label for="contactFormFieldId_388" style="color: #003664; font-size: 16px; font-weight: bold;">[[388_LABEL]]</label>
<input class="contactFormClass_text" id="contactFormFieldId_388" type="text" name="contactFormField_388" value="0" />
</div>
推荐阅读
- breadcrumbs - 面包屑在 Google 搜索结果中不可点击
- parameters - Blazor 级联参数
- c++ - 尝试删除动态数组时遇到的困难
- python - 如何将列表重新格式化为列表列表?
- terraform - 使用 Terraform 将快照还原到 GCP 卷
- java - 集成测试 - 虚拟 SSH 服务器未正确执行 ssh 命令
- c# - $(TargetFrameworkVersion) (v9.0) 小于 Xamarin.Forms (10.0) 所需的最低 $(TargetFrameworkVersion)
- python - 正则表达式前瞻和后视
- python-3.x - 如何在没有http请求的情况下更改python代码中的ip或代理
- mysql - 如何编写一个mysql查询来解决这个问题?