2016-12-10 9 views
-1

このプログラムは数値のアバレッジを計算します。数値入力は、入力の量を表す "input7"に従って表示されます。しかし、何らかの理由で入力が表示されない(表示されない)。入力可視性はjavascriptで変更されません

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>Ajuda Matemática</title> 
 
<link rel="stylesheet" href="style2.css" type="text/css"/> 
 
<script> 
 
\t function calcNota(){ 
 
\t \t var input7 = document.getElementById("input7"); 
 
\t \t if(input7.value === 1){ 
 
\t \t \t \t document.getElementById("input1").style.visibility = 'visible'; 
 
\t \t } 
 
\t \t else if(input7.value === 2){ 
 
\t \t \t \t document.getElementById("input1").style.visibility = 'visible'; 
 
\t \t \t \t document.getElementById("input2").style.visibility = 'visible'; 
 
\t \t } 
 
\t \t else if(input7.value === 3){ 
 
\t \t \t \t document.getElementById("input1").style.visibility = 'visible'; 
 
\t \t \t \t document.getElementById("input2").style.visibility = 'visible'; 
 
\t \t \t \t document.getElementById("input3").style.visibility = 'visible'; 
 
\t \t } 
 
\t \t else if(input7.value === 4){ 
 
\t \t \t \t document.getElementById("input1").style.visibility = 'visible'; 
 
\t \t \t \t document.getElementById("input2").style.visibility = 'visible'; 
 
\t \t \t \t document.getElementById("input3").style.visibility = 'visible'; 
 
\t \t \t \t document.getElementById("input4").style.visibility = 'visible'; \t \t \t \t \t 
 
\t \t } 
 
\t \t else if(input7.value === 5){ 
 
\t \t \t \t document.getElementById("input1").style.visibility = 'visible'; 
 
\t \t \t \t document.getElementById("input2").style.visibility = 'visible'; 
 
\t \t \t \t document.getElementById("input3").style.visibility = 'visible'; 
 
\t \t \t \t document.getElementById("input4").style.visibility = 'visible'; 
 
\t \t \t \t document.getElementById("input5").style.visibility = 'visible'; \t \t \t 
 
\t \t } 
 
\t \t else if(input7.value === 6){ 
 
\t \t \t \t document.getElementById("input1").style.visibility = 'visible'; 
 
\t \t \t \t document.getElementById("input2").style.visibility = 'visible'; 
 
\t \t \t \t document.getElementById("input3").style.visibility = 'visible'; 
 
\t \t \t \t document.getElementById("input4").style.visibility = 'visible'; 
 
\t \t \t \t document.getElementById("input5").style.visibility = 'visible'; 
 
\t \t \t \t document.getElementById("input6").style.visibility = 'visible'; \t \t \t \t 
 
\t \t } 
 
\t \t else { 
 
\t \t \t \t console.log("Error"); \t \t 
 
\t \t } 
 
\t } 
 
</script> 
 
</head> 
 
<body> 
 
\t <h1 id="title">Ajuda Matemática</h1> 
 
    <h2 id="subtitle">Ajuda para exercicios matemáticos<h2> 
 
    <div class="nav"> 
 
    <ul> 
 
    \t <li id="nav1"><a href="media.html">Média</a></li> 
 
     <li id="nav2"><a href="#">Porcentagem</a></li> 
 
     <li id="nav3"><a href="#">R. de Três</a></li> 
 
    </ul> 
 
    </div> 
 
    <div class="container"> 
 
    \t <h2>Média</h2>  
 
    \t <input type="text" class="numE" id="input1"/> 
 
     <input type="text" class="numD" id="input2"/> 
 
     <br/> 
 
     <input type="text" class="numE" id="input3"/> 
 
     \t <input type="text" class="numD" id="input4"/> 
 
     <br/> 
 
     <input type="text" class="numE" id="input5"/> 
 
     <input type="text" class="numD" id="input6"/> 
 
     <br/> 
 
     <br/> 
 
     <div id="botao"> 
 
     Quantidade de números: <input type="number" id="input7"/> 
 
     <br/> 
 
     <br/> 
 
     <button onclick="calcNota()">Calcular</button>    
 
\t \t </div> 
 
     <h2 id="resultado">Resultado: </h2> 
 
     <p id="aviso">* IMPORTANTE: Escreva os valores na tabela e digite a quantidade de valores em "Quantidade de números". Também no caso de números decimais use um ponto (.) ao invés de uma vírgula (,). Do contrário resultará um erro.</p> 
 
    </div>   
 
</body> 
 
</html>

+0

入力がすでに 'visible'なので、何が変更するつもりですか? – nmnsud

+0

@nmnsud投稿されていないCSSがそれを処理していると仮定しましたが、もちろん正しいです。 – LGSon

+0

また、 'input7.value'は' string'ではなく 'number'です – nmnsud

答えて

2

入力値がStringであるため、コメントに基づいて、この

if(parseInt(input7.value) === 1){ 

または

if(input7.value === "1"){ 

好き、ここにあなたからのサンプルでありますコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <title>Ajuda Matemática</title> 
 
    <link rel="stylesheet" href="style2.css" type="text/css" /> 
 
    <script> 
 
    function hideInputs() { 
 
     document.getElementById("input1").style.visibility = 'hidden'; 
 
     document.getElementById("input2").style.visibility = 'hidden'; 
 
     document.getElementById("input3").style.visibility = 'hidden'; 
 
     document.getElementById("input4").style.visibility = 'hidden'; 
 
     document.getElementById("input5").style.visibility = 'hidden'; 
 
     document.getElementById("input6").style.visibility = 'hidden'; 
 
    } 
 
    function calcNota() { 
 
     hideInputs(); 
 
     var input7 = document.getElementById("input7"); 
 
     if (input7.value === "1") { 
 
      document.getElementById("input1").style.visibility = 'visible'; 
 
     } else if (input7.value === "2") { 
 
      document.getElementById("input1").style.visibility = 'visible'; 
 
      document.getElementById("input2").style.visibility = 'visible'; 
 
     } else if (input7.value === "3") { 
 
      document.getElementById("input1").style.visibility = 'visible'; 
 
      document.getElementById("input2").style.visibility = 'visible'; 
 
      document.getElementById("input3").style.visibility = 'visible'; 
 
     } else if (input7.value === "4") { 
 
      document.getElementById("input1").style.visibility = 'visible'; 
 
      document.getElementById("input2").style.visibility = 'visible'; 
 
      document.getElementById("input3").style.visibility = 'visible'; 
 
      document.getElementById("input4").style.visibility = 'visible'; 
 
     } else if (input7.value === "5") { 
 
      document.getElementById("input1").style.visibility = 'visible'; 
 
      document.getElementById("input2").style.visibility = 'visible'; 
 
      document.getElementById("input3").style.visibility = 'visible'; 
 
      document.getElementById("input4").style.visibility = 'visible'; 
 
      document.getElementById("input5").style.visibility = 'visible'; 
 
     } else if (input7.value === "6") { 
 
      document.getElementById("input1").style.visibility = 'visible'; 
 
      document.getElementById("input2").style.visibility = 'visible'; 
 
      document.getElementById("input3").style.visibility = 'visible'; 
 
      document.getElementById("input4").style.visibility = 'visible'; 
 
      document.getElementById("input5").style.visibility = 'visible'; 
 
      document.getElementById("input6").style.visibility = 'visible'; 
 
     } else { 
 
      console.log("Error"); 
 
     } 
 
\t } 
 
    </script> 
 
</head> 
 

 
<body onload="hideInputs();"> 
 
    <div class="container"> 
 
    \t <h2>Média</h2> 
 
    <input type="text" class="numE" id="input1" /> 
 
    <input type="text" class="numD" id="input2" /> 
 
    <br/> 
 
    <input type="text" class="numE" id="input3" /> 
 
    <input type="text" class="numD" id="input4" /> 
 
    <br/> 
 
    <input type="text" class="numE" id="input5" /> 
 
    <input type="text" class="numD" id="input6" /> 
 
    <br/> 
 
    <br/> 
 
    <div id="botao"> 
 
    Quantidade de números: 
 
    <input type="number" id="input7" /> 
 
    <br/> 
 
    <br/> 
 
    <button onclick="calcNota()">Calcular</button> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

+0

あなたの答えを試しました。それは何もしなかった。そしてinput7タイプはnumberに設定されています。 –

+0

@RafaelBorges私はそれが働くことを示すサンプルで私の答えを更新しました – LGSon

+0

それは同じままです。 –

関連する問題