用4个值和一个按钮

时间:2016-03-16 20:53:42

标签: javascript html

我试图在4种文字类型中输入4个条目的总和,一切似乎都很好,只有当我点击按钮时,它不会设置总和。就像我在每个文本输入中输入1一样,总和的文本输入应显示4.谢谢!

这是我的Javascript代码:

(function(){
var oForm = document.forms;

oForm[2].querySelector("input[type='button']").
                                        addEventListener("click",
                                            sommeValeur,
                                            false);
}) ()

function sommeValeur() {

  var aTxt = document.forms[0].tEx1;
  var total = document.forms[0].tEx2;
var txt1  = aTxt[0].value;
var txt2  = aTxt[1].value;
var txt3  = aTxt[2].value;
var txt4  = aTxt[3].value;

total = parseInt(txt1) + parseInt(txt2) + parseInt(txt3) + parseInt(txt4) ;

return true;
}

这是我的HTML代码:

<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/form.css" />
</head>
<body>
<section>
            <form name="frm1">
                <label> Valeur 1:
                    <input type="text" name="tEx1" />
                </label>
                <label> Valeur 2:
                    <input type="text" name="tEx1" />
                </label>
                <label> Valeur 3:
                    <input type="text" name="tEx1" />
                </label>
                <label> Valeur 4:
                    <input type="text" name="tEx1" />
                </label>
            </form>
        </section>

        <section>
                <form name="frm2">
                <label> Somme:
                    <input type="text" name="tEx2" />
                </label>
                </form>
        </section>

        <section>
                <form name="frm3">
                <label>
                    <input type="button" 
                    value="bouton" 
                    name="btn1" /></br>
                </label>
                </form>
        </section>
</body>
<script src="js/exercise4.js"></script> 
</html>

2 个答案:

答案 0 :(得分:3)

看起来您输入的总数是第二种形式,因此您需要<script> ( function( $ ) { $( document ).on( 'ready', function() { // Detect Page Editor... var PageType = $( 'body.post-type-page' ); if( PageType.length ) { // Disable TinyMCE Tag... PageType .find( 'button#content-tmce' ) .css( { 'pointer-events' : 'none' } ) .html( 'Visual (Disabled)' ); // Detect Active TinyMCE... var ActiveTMCE = PageType.find( '.tmce-active' ); if( ActiveTMCE.length ) { // Toggle the TinyMCE off... ActiveTMCE .find( 'button#content-html' ) .trigger( 'click' ); alert( 'The Visual Editor is disabled on Pages due to its interference with HTML and shortcode structure. The editor will now switch to TEXT mode and refresh the page to preserve your data.' ); location.reload(); } } } ); } )( jQuery ); </script> 并且还需要使用form[1]来设置值:

total.value

实例:

var total = document.forms[1].tEx2;
...
total.value = parseInt(txt1) + parseInt(txt2) + parseInt(txt3) + parseInt(txt4) ;
(function(){
var oForm = document.forms;

oForm[2].querySelector("input[type='button']").
                                        addEventListener("click",
                                            sommeValeur,
                                            false);
}) ()

function sommeValeur() {

  var aTxt = document.forms[0].tEx1;
  var total = document.forms[1].tEx2;
  var txt1  = aTxt[0].value;
  var txt2  = aTxt[1].value;
  var txt3  = aTxt[2].value;
  var txt4  = aTxt[3].value;

  total.value = parseInt(txt1) + parseInt(txt2) + parseInt(txt3) + parseInt(txt4) ;

  return true;
}

答案 1 :(得分:0)

您正在更改总实例而不是total.value。 在行total = ...+...+..+...;中,您基本上用总和替换标签。您应该设置标签文字:total.value = ...+..+...+...;