使用带有html和javascript的按钮显示总和的结果

时间:2017-11-23 16:05:24

标签: javascript html forms

首先我是编程的初学者,所以我用havascript在html上创建了一个表单,机制很简单:你必须为每个问题选择一个选项(单选按钮),所以每个选项都是一大笔钱的一部分我们做出的每一个选择,最后都有一个按钮,你必须显示你的表格结果,我的问题是,当我选择一个问题的选项时,它会在那一刻向我展示那个问题的结果而不是当我点击这个节目时结果按钮。这是我的代码,谢谢你的帮助。



var valor1 = 0; //preg 1
var valor2 = 0; //preg2
var valor3 = 0; //preg3
var valor4 = 0; //preg4
var valor5 = 0; //preg5
var valor6 = 0; //preg6
var valor7 = 0; //preg7
var valor8 = 0; //preg8
var valor9 = 0; //preg9
var valor10 = 0; //preg10
var valor11 = 0; //preg11
var valor12 = 0; //preg12
var valor13 = 0; //preg13
var valor14 = 0; //preg14
var valor15 = 0; //preg15
var valor16 = 0; //preg16
var valor17 = 0; //preg17
var valor18 = 0; //preg18
var valor19 = 0; //preg19
var valor20 = 0; //preg20
    
function sumar(radio) {
    var valor = parseInt(radio.value);
    if (radio.name == "pregunta1")
        valor1 = parseInt (valor); 
    if (radio.name == "pregunta2")
        valor2 = parseInt (valor);
    if (radio.name == "pregunta3")
        valor3 = parseInt (valor);
    if (radio.name == "pregunta4")
        valor4 = parseInt (valor);
    if (radio.name == "pregunta5")
        valor5 = parseInt (valor);
    if (radio.name == "pregunta6")
        valor6 = parseInt (valor);
    if (radio.name == "pregunta7")
        valor7 = parseInt (valor);
    if (radio.name == "pregunta8")
        valor8 = parseInt (valor);
    if (radio.name == "pregunta9")
        valor9 = parseInt (valor);
    if (radio.name == "pregunta10")
        valor10 = parseInt (valor);
    if (radio.name == "pregunta11")
        valor11 = parseInt (valor);
    if (radio.name == "pregunta12")
        valor12 = parseInt (valor);
    if (radio.name == "pregunta13")
        valor13 = parseInt (valor);
    if (radio.name == "pregunta14")
        valor14 = parseInt (valor);
    if (radio.name == "pregunta15")
        valor15 = parseInt (valor);
    if (radio.name == "pregunta16")
        valor16 = parseInt (valor);
    if (radio.name == "pregunta17")
        valor17 = parseInt (valor);
    if (radio.name == "pregunta18")
        valor18 = parseInt (valor);
    if (radio.name == "pregunta19")
        valor19 = parseInt (valor);
    if (radio.name == "pregunta20")
        valor20 = parseInt (valor);
    valor = parseInt (valor1+valor2+valor3+valor4+valor5+valor6+valor7+valor8+valor9+valor10+valor11+valor12+valor13+valor14+valor15+valor16+valor17+valor18+valor19+valor20);  
     alert ("su resultado es:"+valor);
}

<form method="post" action="">
    <fieldset>
    <legend>1- Soy una persona con muchas cualidades.   </legend>
    <input type="radio"  name="pregunta1" id="radiogroup1_0"value="3" onclick="sumar(this);"> 
     A 
    
    <input type="radio"  name="pregunta1" id="radiogroup1_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta1"  id="radiogroup1_2" value="1" onclick="sumar(this);">
       C 
                                     
    </fieldset>
    
    <br>
    <fieldset>
    <legend>2- Por lo general, si tengo algo que decir lo digo.</legend>
    <input type="radio"  name="pregunta2" id="radiogroup2_0"value="3" onclick="sumar(this);"> 
     A 
    
    <input type="radio"  name="pregunta2" id="radiogroup2_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta2"  id="radiogroup2_2" value="1" onclick="sumar(this);">
       C 
    </fieldset>
    
    <br>
    <fieldset>
    <legend>3- Con frecuencia me avergüenzo de mi mismo.</legend>
    <input type="radio"  name="pregunta3" id="radiogroup3_0"value="1" onclick="sumar(this);"> 
     A 
    
    <input type="radio"  name="pregunta3" id="radiogroup3_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta3"  id="radiogroup3_2" value="3" onclick="sumar(this);">
       C 
    
    </fieldset>
    
    <br>
    <fieldset>
    <legend>4- Casi siempre me siento seguro de lo que pienso.</legend>
    
    <input type="radio"  name="pregunta4" id="radiogroup4_0"value="3" onclick="sumar(this);"> 
     A 
    <input type="radio"  name="pregunta4" id="radiogroup4_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta4"  id="radiogroup4_2" value="1" onclick="sumar(this);">
       C 
    
    </fieldset>
    
    <br>
    
    <fieldset>
    <legend>5- En realidad, no me gusto a mi mismo.</legend>
    <input type="radio"  name="pregunta5" id="radiogroup5_0"value="1" onclick="sumar(this);"> 
     A 
    
    <input type="radio"  name="pregunta5" id="radiogroup5_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta5"  id="radiogroup5_2" value="3" onclick="sumar(this);">
       C
    </fieldset>
    
    <br>
    <fieldset>
    <legend>6- Rara vez me siento culpable de cosas que he hecho.</legend>
    <input type="radio"  name="pregunta6" id="radiogroup6_0"value="3" onclick="sumar(this);"> 
     A
    
    <input type="radio"  name="pregunta6" id="radiogroup6_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta6"  id="radiogroup6_2" value="1" onclick="sumar(this);">
       C
    </fieldset>
    
    <br>
    <fieldset>
    <legend>7-Creo que la gente tiene buena opinión de mí.</legend>
    <input type="radio"  name="pregunta7" id="radiogroup7_0"value="3" onclick="sumar(this);"> 
     A 
    
    <input type="radio"  name="pregunta7" id="radiogroup7_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta7"  id="radiogroup7_2" value="1" onclick="sumar(this);">
       C
    </fieldset>
    
    <br>
    <fieldset>
    <legend>8-Soy bastante feliz.</legend>
    <input type="radio"  name="pregunta8" id="radiogroup8_0"value="3" onclick="sumar(this);"> 
     A
    
    <input type="radio"  name="pregunta8" id="radiogroup8_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta8"  id="radiogroup8_2" value="1" onclick="sumar(this);">
       C
    </fieldset>
    
    <br>
    <fieldset>
    <legend>9- Me siento orgulloso de lo que hago.</legend>
    <input type="radio"  name="pregunta9" id="radiogroup9_0"value="3" onclick="sumar(this);"> 
     A 
    
    <input type="radio"  name="pregunta9" id="radiogroup9_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta9"  id="radiogroup9_2" value="1" onclick="sumar(this);">
       C 
    </fieldset>
    <br>
    
    <fieldset>
    <legend>10- Poca gente me hace caso.</legend>
    <input type="radio"  name="pregunta10" id="radiogroup10_0"value="1" onclick="sumar(this);"> 
     A
    
    <input type="radio"  name="pregunta10" id="radiogroup10_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta10"  id="radiogroup10_2" value="3" onclick="sumar(this);">
       C
    </fieldset>
    
    <br>
    <fieldset>
    <legend>11- Hay muchas cosas de mí que cambiaría si pudiera.</legend>
    
    <input type="radio"  name="pregunta11" id="radiogroup11_0"value="1" onclick="sumar(this);"> 
     A
    
    <input type="radio"  name="pregunta11" id="radiogroup11_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta11"  id="radiogroup11_2" value="3" onclick="sumar(this);">
       C 
    </fieldset>
    <br>
    
    <fieldset>
    <legend>12- Me cuesta mucho trabajo hablar delante de la gente.</legend>
    <input type="radio"  name="pregunta12" id="radiogroup12_0"value="1" onclick="sumar(this);"> 
     A 
    
    <input type="radio"  name="pregunta12" id="radiogroup12_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta12"  id="radiogroup12_2" value="3" onclick="sumar(this);">
       C 
    
    </fieldset>
    <br>
    
    <fieldset>
    <legend>13- Casi nunca estoy triste.</legend>
    
    <input type="radio"  name="pregunta13" id="radiogroup13_0"value="3" onclick="sumar(this);"> 
     A 
    
    <input type="radio"  name="pregunta13" id="radiogroup13_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta13"  id="radiogroup13_2" value="1" onclick="sumar(this);">
       C
    
    </fieldset>
    
    <br>
    <fieldset>
    <legend>  14- Es muy difícil ser uno mismo.</legend>
    <input type="radio"  name="pregunta14" id="radiogroup14_0"value="1" onclick="sumar(this);"> 
     A 
    
    <input type="radio"  name="pregunta14" id="radiogroup14_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta14"  id="radiogroup14_2" value="3" onclick="sumar(this);">
       C
    </fieldset>
    <br>
    
    <fieldset>
    <legend>15- Es fácil que yo le caiga bien a la gente.</legend>
    <input type="radio"  name="pregunta15" id="radiogroup15_0"value="3" onclick="sumar(this);"> 
     A
    
    <input type="radio"  name="pregunta15" id="radiogroup15_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta15"  id="radiogroup15_2" value="1" onclick="sumar(this);">
       C
    </fieldset>
    <br>
    
    <fieldset>
    <legend>16- Si pudiéramos volver al pasado y vivir de nuevo, yo sería distinto.</legend>
    <input type="radio"  name="pregunta16" id="radiogroup16_0"value="1" onclick="sumar(this);"> 
     A
    
    <input type="radio"  name="pregunta16" id="radiogroup16_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta16"  id="radiogroup16_2" value="3" onclick="sumar(this);">
       C
    </fieldset>
    <br>
    
    <fieldset>
    <legend>17- Por lo general, la gente me hace caso cuando los aconsejo.</legend>
    <input type="radio"  name="pregunta17" id="radiogroup17_0"value="3" onclick="sumar(this);"> 
     A
    
    <input type="radio"  name="pregunta17" id="radiogroup17_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta17"  id="radiogroup17_2" value="1" onclick="sumar(this);">
       C
    </fieldset>
    <br>
    
    <fieldset>
    <legend>18- Siempre tiene que haber alguien que me diga que hacer.</legend>
    <input type="radio"  name="pregunta18" id="radiogroup18_0"value="1" onclick="sumar(this);"> 
     A 
    
    <input type="radio"  name="pregunta18" id="radiogroup18_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta18"  id="radiogroup18_2" value="3" onclick="sumar(this);">
       C 
    </fieldset>
    <br>
    
    <fieldset>
    <legend>19- Con frecuencia desearía ser otra persona.</legend>
    <input type="radio"  name="pregunta19" id="radiogroup19_0"value="1" onclick="sumar(this);"> 
     A
    
    <input type="radio"  name="pregunta19" id="radiogroup19_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta19"  id="radiogroup19_2" value="3" onclick="sumar(this);">
       C
    </fieldset>
    <br>
    
    <fieldset>
    <legend>20- Me siento bastante seguro de mí mismo.</legend>
    <input type="radio"  name="pregunta20" id="radiogroup20_0"value="3" onclick="sumar(this);"> 
     A 
    
    <input type="radio"  name="pregunta20" id="radiogroup20_1" value="2" onclick="sumar(this);">
      B
    
    <input type="radio" name="pregunta20"  id="radiogroup20_2" value="1" onclick="sumar(this);">
       C
    </fieldset>
    
    <p>
    <br>
             <input type="button" onclick="sumar(radio)"    value="Calcular resultado"  >  
        <br />
      </p>
     </form>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您正在按钮中的onclick事件中调用sumar函数。

<input type="button" onclick="sumar(radio)"    value="Calcular resultado"  > 

只需添加新功能showResult并将其绑定到点击

即可
function showResult() {
    var result = parseInt(valor1 + valor2 + valor3 + valor4 + valor5 + valor6 + valor7 + valor8 + valor9 + valor10 + valor11 + valor12 + valor13 + valor14 + valor15 + valor16 + valor17 + valor18 + valor19 + valor20);
    alert("su resultado es:" + result);
}


<input type="button" onclick="showResult()"    value="Calcular resultado"  > 

并删除sumar函数中的警报

这是一个有效的fiddle