我正在帮助一个朋友建立一个基本站点。我的JavaScript技能还有很多不足,因此我正在学习我是从Javascript而不是Jquery库开始的(旁注:我是否应该从一开始就使用Jquery ...?)
所以我有以下几点:
具有3个单选按钮的表单,其值分别为低(1),中(2),高(3)
带数量的滑块
选择时长。
通过用户选择风险(无线电btns)数量(滑块)持续时间(dropdowm)来计算公式
当用户更改风险,金额或期限时,应更新总计,并显示一个按钮。
所以我想出了以下javascript:
JAVASCRIPT:
function getReturn(){
var risk = document.forms[0];
var years = document.getElementById("investmentDuration").value;
var slideAmount = document.getElementById("slideAmount").value;
var txt;
var returns;
var i;
for(i = 0; i < risk.length; i++){
if(risk[i].checked){
txt = risk[i].value;
//for
if(txt == 1){
returns = (slideAmount * 0.06)*years;
returns = Math.ceil(returns); // NO decimals
}
if(txt == 2){
returns = slideAmount * 0.11;
returns = Math.ceil(returns)*years; // NO decimals
}
if(txt == 3){
returns = slideAmount *0.17;
returns = Math.ceil(returns)*years; // NO decimals
}
}//if
}//for
然后,我将
getReturn()
函数添加到表单中的每个元素...尝试运行它时,我得到以下信息,here is my JS FIDDLE
错误:
getReturn() is not defined
HTML(注意每个元素的点击功能)
<h2>SELECT INVESTMENT RISK LEVEL</h2>
<section>
<div>
<input type="radio" id="control_01" onclick="getReturn()" name="risk" value="1" checked>
<label for="control_01">
<h2>LOW RISK</h2>
<p>Slow & Steady. An Product Focused On Low Risk But Long term Gains</p>
</label>
</div>
<div>
<input type="radio" id="control_02" name="risk" onclick="getReturn()" value="2">
<label for="control_02">
<h2>MEDIUM</h2>
<p>Prepare For Glory. Medium To High Returns, Over A Medium To Long Period.</p>
</label>
</div>
<div>
<input type="radio" id="control_03" name="risk" onclick="getReturn()" value="3">
<label for="control_03">
<h2>High Risk</h2>
<p>Hardcore Investor. Tailored Based Package Focused on High Returns Over Short Periods</p>
</label>
</div>
</section>
<h4 style="color: black;">INVESTMENT AMOUNT:</h4>
<input type="range" id="slideAmount" name="slideAmount" onchange="getReturn()" value="6500" step="25" min="1000" max="10000">
<p>Number Of Years</p>
<select name="investmentDuration" id="investmentDuration" onclick="getReturn()">
<option value="1" selected>1 Year</option>
<option value="2">2 Years</option>
<option value="3">3 Years</option>
<option value="4">4 Years</option>
<option value="5">5 Years</option>
</select>
更新
我得到它的工作,但我感到
每个元素上都有一个
onclick() / onchange = function()
似乎效率很低。如果页面应该变大并扩展,我觉得代码很容易出现错误。
任何对我如何工作和改进的建设性批评和/或建议都表示赞赏。非常感谢
最佳答案
你得到
getReturn()
未定义
错误,因为您的代码在onLoad
事件内(这是jsfiddle中的默认事件)
您需要更改该设置,如图所示,以便您的函数位于全局范围内,因此可以从DOM调用。
然后,您还需要在HTML中添加#returns
元素。
最后的改进可能是在range元素上使用oninput事件,以便在滑动时进行更新
所有修复:https://jsfiddle.net/gaby/o1zmvmL9/2/
关于javascript - Javascript计算/更新总onclick多个表单元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46501757/