JS Event Exercises

1. Click the button to pop the window 5 times

<div class= "Noe" ><div class= "Noe1" onclick= "N ()" > Loop 5 times Pop-up window </div></div>function n () {var i= 0; while (i<=5) {I++;alert ("This is the first" +i+ "Popup");}}

2, batch modify the style (with for, the number of fixed elements)

<div class= "Noe" ><div class= "Noe1" onclick= "N ()" > Loop 5 times Pop-up </div></div><div class= "Noe" > <div class= "noe1" onclick= "NN ()" > Bulk Modify Style </div><div class= "nn" ></div><div class= "nn" > </div><div class= "nn" ></div></div>function nn () {  var nn = Document.getelementsbyclassname ("nn");  Find the NN set for (var i = 0;i<=nn.length;i++) {     //In the loop take out the set style nn[i].style.backgroundcolor= ' Yellow ';}}

3, the mouse after the transformation of content

<divclass="Zai"> <divclass="JJ"> After submission is shown here: </div></div><divclass="Zai1"Onmouseover="Z (this)"> Column 1</div><divclass="Zai1"Onmouseover="Z (this)"> Column 2</div><divclass="Zai1"Onmouseover="Z (this)"> Column 3</div><divclass="Zai1"Onmouseover="Z (this)"> Column 4</div><divclass="za"></div>function Z (z) {varza = document.getelementsbyclassname ("za")[0]; Za.innerhtml="";//is equal to each time the loop clears the value once     for(vari =0; i<=3; i++) {za.innerhtml+ = z.innerhtml+"the content <br>"; }}

4. Select, uncheck and reverse Select all

1<div class= "Noe" >2<input type= "checkbox" Name= "value=" "id=" "class=" X ">3<input type= "checkbox" Name= "value=" "id=" "class=" X ">4<input type= "checkbox" Name= "value=" "id=" "class=" X ">5<input type= "checkbox" Name= "value=" "id=" "class=" X ">6<input type= "checkbox" Name= "value=" "id=" "class=" X ">7<br>8<input type= "button" Name= "value=" all Select "Id=" "onclick=" O () "class=" E ">9<input type= "button" name= "value=" reverse select "id=" "class=" E "onclick=" ee () ">Ten<input type= "button" name= "value=" not selected "id=" "onclick=" OP () "class=" E "> One</div> A  -  for(vari = 0;i<x.length;i++){ -     if(x[i].checked) {//set a reverse selection thex[i].checked =false; -}Else{ -x[i].checked =true; -     } + }     - } + functionO () {//Positive Selection A     varx = Document.getelementsbyclassname ("x"); at      for(vari = 0;i<=x.length;i++){ -x[i].checked = ' checked '; -     } - } - functionOP () {//not selected -     varx = Document.getelementsbyclassname ("x"); in      for(vari = 0;i<=x.length;i++){ -x[i].checked =false; to     } + }     -     

5.

<div class= "Zai" ><input type= "text" Name= "id=" Inn "value=" "><div class=" Zai1 "onclick=" Ti () "> Submit </div></div>

<div class= "Zai" >
<div id= "Ti1" > After submission is shown here:</div>
</div>

function Ti () {///Find the collection of input, and then find the collection of ti1, ti1 this div's innerHTML = the value of the kanji +inn.value var inn = document.getElementById ("inn"); var Ti1 = document.getElementById ("Ti1"); ti1.innerhtml = ' show here after commit: ' +inn.value;   }

6.

<div class= "Zai" ><input type= "text" name= "" id= "" value= "" class= "innn" ><div id= "P" >+</div> <input type= "text" name= "id=" "value=" "class=" innn "> <div class=" zai1 "onclick=" Jia () "> Submit </div> </div><div class= "Zai" ><div class= "J" > After submission is shown here: </div></div>function Jia () {var inn1 = Document.getelementsbyclassname ("innn") [0];var inn2 = Document.getelementsbyclassname ("innn") [1];var j = Document.getelementsbyclassname ("J") [0];j.innerhtml = ' show here ' +inn1.value+inn2.value after submission;}

　　

　　

JS Event Exercises