输入可见性在javascript中不会改变

时间：2016-12-10 17:29:48

标签： javascript html css html5 css3

该程序计算数字的范围。数字输入根据＆＃34; input7＆＃34;显示，表示输入数量。但由于某些原因，输入不会改变它的可见性（它们不会出现）。

＆＃13;
＆＃13; 
<!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 calcNota(){
		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");		
		}
	}
</script>
</head>
<body>
	<h1 id="title">Ajuda Matemática</h1>
    <h2 id="subtitle">Ajuda para exercicios matemáticos<h2>
    <div class="nav">
    <ul>
    	<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">
    	<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>
        <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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：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");
        }
	}
  </script>
</head>

<body onload="hideInputs();">
    <div class="container">
    	<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>

相关问题
最新问题