javascript - 如何在一个文本区域中获得 3 个不同值的总和

标签 javascript html

我为我的每一个 radio 、每一个表格应用了值(value)。重点是,我需要将所有这些的总和设置在一起。我想我可以简单地设置一个简单的函数,作为在我的函数中添加的每个表单的每个文本区域的值,这样就会显示总数,但它似乎不起作用。我只是觉得我错过了什么。这是我的代码,谢谢! :

java :

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

同时将函数名从function sommeButton(){修改为function sommButton(){

修改取值代码:

var somme1 = ((aSomme1.value !='' )?aSomme1.value:'0');
var somme2 = ((aSomme2.value !='' )?aSomme2.value:'0');
var somme3 = ((aSomme3.value !='' )?aSomme3.value:'0');

在获取值时,我把它变成了一个单行 if 语句,当您的输入标签中没有值时返回 0。

希望对您有所帮助!

关于javascript - 如何在一个文本区域中获得 3 个不同值的总和,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36050267/

相关文章:

javascript - 当用户调整窗口大小时,页面布局发生变化?

javascript - RequireJS 优化器是否可以在没有 "app.js"的情况下以及依赖于内联模块的模块上工作?

javascript - 将函数参数作为字符串在函数本身中使用时遇到问题

javascript - 如何在angularjs中连接两个不同 Controller 的ng-model?

javascript - 在表单中选择单选按钮时如何显示和隐藏div?

html - 如何修改自动完成输入而不影响 css 或 html?

javascript - 将 Json_encode 获取到不同的 jQuery 页面

javascript - 为大型项目的新版本从 Flash 切换到 HTML5?

javascript - 添加新表单时如何保持表单处于焦点状态?

javascript - react native : undefined is not a function (evaluating 'this.props.passwordChanged(text)' )