Machen div Element auf bestimmte Eingabe unsichtbar

Was ich tun möchte, ist einfach zu machen Div mit ID = "eins" unsichtbar bei Eingabe von "1" in Eingabefeld und entsprechend gleiche für Divs mit ID = "2" und ID = "3" für Eingabe von "2", Eingabe von "3".Machen div Element auf bestimmte Eingabe unsichtbar

Ich suche nach einem kurzen und einfachen Weg, aber andere Möglichkeiten sind auch willkommen. Ich bin ein Anfänger in Web-Design und Entwicklung. Für jede Frage kommentieren Sie bitte unten.

<head> 

    <title> 
      sample 
    </title> 

    <script type="text/javascript"> 

     function myFunction0() 

     { 
      var x = document.getElementById("text_1").value; 

      if (x == 1){ 
       document.getElementById("one").style.visibility = "hidden"; 
      } 

      if (x == 2){ 
       document.getElementById("one").style.visibility = "hidden"; 
       document.getElementById("two").style.visibility = "hidden"; 
      } 
      if (x == 3){ 
       document.getElementById("one").style.visibility = "hidden"; 
       document.getElementById("two").style.visibility = "hidden"; 
       document.getElementById("three").style.visibility = "hidden"; 
      } 
     } 
    </script> 
</head> 
<body> 
    <div style="margin-left: 250px;"> 
     <form> 
      <input id="text_1" name="text1" type="text"/> 
      <input id="text_2" name="text2" onclick="myFunction0();" type="submit"/> 
     </form> 
     <br/> 
     <br/> 
     <br/> 
     <div id="one" style="height:100px; width:200px; border:1px solid black;"> 
      box 1 
     </div> 
     <br/> 
     <div id="two" style="height:100px; width:200px; border:1px solid black;"> 
      box 2 
     </div> 
     <br/> 
     <div id="three" style="height:100px; width:200px; border:1px solid black;"> 
      box 3 
     </div> 
     <br/> 
     <div id="four" style="height:100px; width:200px; border:1px solid black;"> 
      box 4 
     </div> 
     <br/> 
    </div> 
</body>

Quelle

2016-08-03 R K

entfernen Sie einfach 'var' in Zeile' if (var x == 1) {' –

Sie können' document.getElementById ("eins") verwenden. Style.display = "none" ' –

Versuchen Sie, diese

<head> 
 

 
    <title> 
 
      sample 
 
    </title> 
 

 
    <script type="text/javascript"> 
 

 
     function myFunction0() 
 
     { 
 
      [ 'one', 'two', 'three','four' ].forEach(function(ide) { 
 
      document.getElementById(ide).style.visibility = "visible"; 
 
      }); 
 
var arr = [ 'one','two','three','four']; 
 
      var x = Number(document.getElementById("text_1").value); 
 
      for(var i=1;i<=x;i++){ 
 
       
 
       document.getElementById(arr[i-1]).style.visibility = "hidden"; 
 
      } 
 
      
 
     } 
 
    </script> 
 
</head> 
 
<body> 
 
    <div style="margin-left: 250px;"> 
 
     <form> 
 
      <input id="text_1" name="text1" type="text"/> 
 
      <input id="text_2" name="text2" value="click" onclick="myFunction0()" type="button"> 
 
     </form> 
 
     <br/> 
 
     <br/> 
 
     <br/> 
 
     <div id="one" style="height:100px; width:200px; border:1px solid black;"> 
 
      box 1 
 
     </div> 
 
     <br/> 
 
     <div id="two" style="height:100px; width:200px; border:1px solid black;"> 
 
      box 2 
 
     </div> 
 
     <br/> 
 
     <div id="three" style="height:100px; width:200px; border:1px solid black;"> 
 
      box 3 
 
     </div> 
 
     <br/> 
 
     <div id="four" style="height:100px; width:200px; border:1px solid black;"> 
 
      box 4 
 
     </div> 
 
     <br/> 
 
    </div> 
 
</body>

Quelle

2016-08-03 18:21:46

können Sie eins mit Änderungen wie machen wenn ich [div id = "eins"] anstatt [div id = "1"] geben möchte –

Ich habe es zur Reduzierung der Codezeile –

gemacht, wenn du ID als alphabetisches oder alphanumerisches Zeichen verwenden darfst, wenn ID als Nummer genommen wird ist nicht erlaubt von meinem Trainer –

$("body").on("keyup","#text_1",function() { 
     var x = $("#text_1").val(); 
     if (x == 1){ 
       document.getElementById("one").style.visibility = "hidden"; 
      } 

      if (x == 2){ 
       document.getElementById("one").style.visibility = "hidden"; 
       document.getElementById("two").style.visibility = "hidden"; 
      } 
      if (x == 3){ 
       document.getElementById("one").style.visibility = "hidden"; 
       document.getElementById("two").style.visibility = "hidden"; 
       document.getElementById("three").style.visibility = "hidden"; 
      } 
});

Quelle

2016-08-03 18:29:29

Machen div Element auf bestimmte Eingabe unsichtbar

Antwort

Verwandte Themen