如何在一个文本区域中拥有 3 个不同值的总和
How to have the sum of 3 different value in one text area
我为每个收音机应用了值，对于我的每个表单。关键是，我需要将它们的总和放在一起。我想我可以简单地设置一个简单的函数，在我的函数中添加每个表单的每个文本区域的值，以便显示总数，但似乎它不起作用。我只是觉得我错过了什么。这是我的代码，谢谢！:
爪哇岛：
(function(){
var oForm = document.forms;
oForm[0].querySelector("input[type='radio']").addEventListener("click",sommButton,false);
}) ()
function sommeButton () {
var aSomme1 = document.forms[0].tEx1;
var aSomme2 = document.forms[1].tEx2;
var aSomme3 = document.forms[2].tEx3;
var total = document.forms[3].tEx4;
var somme1 = aSomme1[5].value;
var somme2 = aSomme2[5].value;
var somme3 = aSomme3[5].value;
total.value = parseInt(somme1) + parseInt(somme2) + parseInt(somme3) ;
}
以防万一，这是我的 html ：
<html>
<head>
<meta charset="UTF-8">
<title>Exercise 5</title>
<link rel="stylesheet" href="css/form.css" />
</head>
<body>
<section>
<form name="frm1">
<label>
<input type="radio" value="10" name="r1"
onClick="tEx1.value = this.value"/>
</label>
<label>
<input type="radio" value="15" name="r1"
onClick="tEx1.value = this.value"/>
</label>
<label>
<input type="radio" value="20" name="r1"
onClick="tEx1.value = this.value"/>
</label>
<label>
<input type="radio" value="25" name="r1"
onClick="tEx1.value = this.value"/>
</label>
<label>
<input type="radio"
<input type="radio" value="30" name="r1"
onClick="tEx1.value = this.value"/>
</label>
<label>
<input type="text" name="tEx1" />
</label>
</form>
</section>
<section>
<form name="frm2">
<label>
<input type="radio" value="10" name="r2"
onClick="tEx2.value = this.value"/>
</label>
<label>
<input type="radio" value="15" name="r2"
onClick="tEx2.value = this.value"/>
</label>
<label>
<input type="radio" value="20" name="r2"
onClick="tEx2.value = this.value"/>
</label>
<label>
<input type="radio" value="25" name="r2"
onClick="tEx2.value = this.value"/>
</label>
<label>
<input type="radio" value="30" name="r2"
onClick="tEx2.value = this.value"/>
</label>
<label>
<input type="text" name="tEx2" />
</label>
</form>
</section>
<section>
<form name="frm3">
<label>
<input type="radio" value="10" name="r3"
onClick="tEx3.value = this.value"/>
</label>
<label>
<input type="radio" value="15" name="r3"
onClick="tEx3.value = this.value"/>
</label>
<label>
<input type="radio" value="20" name="r3"
onClick="tEx3.value = this.value"/>
</label>
<label>
<input type="radio" value="25" name="r3"
onClick="tEx3.value = this.value"/>
</label>
<label>
<input type="radio" value="30" name="r3"
onClick="tEx3.value = this.value"/>
</label>
<label>
<input type="text" name="tEx3" />
</label>
</form>
</section>
<section>
<label>
<input type="button" value="Somme" name="btn1">
</label>
</section>
<section>
<form name="frm4">
<label>
<input type="text" name="tEx4" />
</label>
</form>
</section>
</body>
<script src="js/exercise5.js"></script>
</html>
您可以通过向输入按钮添加一个 onclick 属性来解决它，以便在单击按钮时调用函数：
<label>
<input type="button" value="Somme" name="btn1" onclick="sommButton()">
</label>
同时将函数的名称从函数 sommeButton （） { 修改为函数 sommButton （） {
并修改获取值的代码：
var somme1 = ((aSomme1.value !='' )?aSomme1.value:'0');
var somme2 = ((aSomme2.value !='' )?aSomme2.value:'0');
var somme3 = ((aSomme3.value !='' )?aSomme3.value:'0');
在获取值时，我将其制作成单行 if 语句，当输入标签中没有值时返回 0。
我希望这有帮助！
你可能需要一个 js 函数来处理事件并进行更新
https://jsfiddle.net/devilfox/huasn28d/
<body>
<section>
<form name="frm1">
<label>
<input type="radio" value="10" name="r1"
onClick="onChange(tEx1,this.value)"/>
</label>
<label>
<input type="radio" value="15" name="r1"
onClick="onChange(tEx1,this.value)"/>
</label>
<label>
<input type="radio" value="20" name="r1"
onClick="onChange(tEx1,this.value)"/>
</label>
<label>
<input type="radio" value="25" name="r1"
onClick="onChange(tEx1,this.value)"/>
</label>
<label>
<input type="radio" value="30" name="r1"
onClick="onChange(tEx1,this.value)"/>
</label>
<label>
<input class="disp" type="text" name="tEx1" />
</label>
</form>
</section>
<section>
<form name="frm2">
<label>
<input type="radio" value="10" name="r2"
onClick="onChange(tEx2,this.value)"/>
</label>
<label>
<input type="radio" value="15" name="r2"
onClick="onChange(tEx2,this.value)"/>
</label>
<label>
<input type="radio" value="20" name="r2"
onClick="onChange(tEx2,this.value)"/>
</label>
<label>
<input type="radio" value="25" name="r2"
onClick="onChange(tEx2,this.value)"/>
</label>
<label>
<input type="radio" value="30" name="r2"
onClick="onChange(tEx2,this.value)"/>
</label>
<label>
<input class="disp" type="text" name="tEx2" />
</label>
</form>
</section>
<section>
<form name="frm3">
<label>
<input type="radio" value="10" name="r3"
onClick="onChange(tEx3,this.value)"/>
</label>
<label>
<input type="radio" value="15" name="r3"
onClick="onChange(tEx3,this.value)"/>
</label>
<label>
<input type="radio" value="20" name="r3"
onClick="onChange(tEx3,this.value)"/>
</label>
<label>
<input type="radio" value="25" name="r3"
onClick="onChange(tEx3,this.value)"/>
</label>
<label>
<input type="radio" value="30" name="r3"
onClick="onChange(tEx3,this.value)"/>
</label>
<label>
<input class="disp" type="text" name="tEx3" />
</label>
</form>
</section>
<section>
<label>
<input type="button" value="Sum" name="btn1">
</label>
</section>
<section>
<form name="frm4">
<label>
<input type="text" name="tEx4" />
</label>
</form>
</section>
<script>
function onChange(element,val){
element.value = val;
$( ".disp" ).trigger("change");
};
var num = function(t){
return ((!isNaN(t))&&t!='')?Number(t):0;
};
</script>
</body>
和
(function(){
$( ".disp" ).on('change',function() {
var total = num($('[name="tEx1"]').val())+
num($('[name="tEx2"]').val())+
num($('[name="tEx3"]').val());
$('[name="tEx4"]').val(total);
});
})()
会为你做
相关文章：
- onkeyup无法动态创建多个文本区域
- FabricJs-限制主对象内添加对象的移动区域
- 具有所有样式的文本正在复制到可编辑文本区域
- 如何为高图中的区域线创建z索引
- 在文本区域POST后解码JSON
- 在文本区域中使用jQuery.text(）保持换行符
- ng在下拉列表和文本区域提交
- 使用fabric.js从矩形区域获取对象，并将该区域绘制到画布上
- 当用户按下回车键时，自动在text区域/text中插入消息
- 将文本插入光标所在的文本区域
- 离开页面导航后保留文本区域内容
- 不能在图像中的地图标记中使用花式框jquery插件的区域标记
- Javascript-在文本区域中断，但不在段落中中断
- 当选择值x时，Javascript需要在正确的位置显示文本区域，从而循环通过具有选择选项的表单
- 测试文本区域中的特定文本格式
- 画布中绘制的矩形区域的弹出工具提示
- 文本编辑后，append函数不适用于文本区域
- 如何在ReactJs中链接下拉列表和文本区域
- I'我试图在文本区域中进行特定的输入，调用特定的javascript函数，但没有成功;不起作用
- 如何在一个文本区域中拥有 3 个不同值的总和
