Looping SetTimeout is a loop It makes something happen again and again and again Every time the function setTimeout is executed, the function inside of it (that is called) is executed. We stop the loop by stopping setTimeout from being executed
Remember from lab? <script> var colorArray = new Array() colorArray[0] = "#FF3377" colorArray[1] = "#CCD234" colorArray[2] = "#33BB56" colorArray[3] = "#22BAC1" colorArray[4] = "#3432D3" colorArray[5] = "#DD45E2" function myfunc() { var x = Math.floor(Math.random() * colorArray.length) document.getElementById('h11').style.color = colorArray[x] var y = Math.floor(Math.random() * colorArray.length) if (y == x) { //What does this do? y = Math.floor(Math.random() * colorArray.length) } document.getElementById('h11').style.backgroundColor = colorArray[y] var z = Math.floor(Math.random() * colorArray.length) if ((y == z) || (x == z)) { //What does this do? z = Math.floor(Math.random() * colorArray.length) document.getElementById('h11').style.borderColor = colorArray[z] setTimeout(function(){myfunc()},1300) </script> </head><body> <h1 id = "h11" style = "padding: 40; border-style: solid; border-width: 5px; border-color:black; font-weight: bold;">Colors</h1> <input type = "button" onclick = "myfunc()" value = "start" ></p> Link
What if we do this? <script> var colorArray = new Array() colorArray[0] = "#FF3377" colorArray[1] = "#CCD234" colorArray[2] = "#33BB56" colorArray[3] = "#22BAC1" colorArray[4] = "#3432D3" colorArray[5] = "#DD45E2" function myfunc() { var x = Math.floor(Math.random() * colorArray.length) document.getElementById('h11').style.color = colorArray[x] var y = Math.floor(Math.random() * colorArray.length) while (y == x) { //What does this do? y = Math.floor(Math.random() * colorArray.length) } document.getElementById('h11').style.backgroundColor = colorArray[y] var z = Math.floor(Math.random() * colorArray.length) while ((y == z) || (x == z)) { //What does this do? z = Math.floor(Math.random() * colorArray.length) document.getElementById('h11').style.borderColor = colorArray[z] setTimeout(function(){myfunc()},1300) </script> </head><body> <h1 id = "h11" style = "padding: 40; border-style: solid; border-width: 5px; border-color:black; font-weight: bold;">Colors</h1> <input type = "button" onclick = "myfunc()" value = "start" ></p>
What does this do? <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> function afunc(countvar) { while (countvar < 5) { document.write("<p> really </p>"); countvar = countvar + 1; } document.write("<p> cute </p>"); </script> </head> <body> <p id = "here" onClick = "afunc(1)">Click to see the secret message </p> </body> </html> Link
Remember the race? race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" idArray[2] = "img3" … function startit() { myfunc(0) myfunc(1) myfunc(2) } We can use a loop here too That way it won’t matter how many images we are racing, e.g.,
Using a loop: var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" idArray[2] = "img3" idArray[3] = "img4" function startit() { var index = 0; while (index < idArray.length) { //will this work no matter how many images are added to the idArray? myfunc(index) index = index+1 }
getElementsByTagName() getElementById Gets one element at a time, based on id What if we want to get all elements with the same tag E.g., we want to change all the paragraphs on a web page We can use getElementsByTagName(“P”) var pArray = document.getElementsByTagName(“P”) This will make an array of all the paragraphs in a web page
<!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> function afunc() { var pArr = document.getElementsByTagName("P"); var y = Math.floor(Math.random() * pArr.length) pArr[y].innerHTML = 'random sentence' } </script> </head> <body> <p> first</p> <h2> Not p </h2> <p> second </p> <p> third </p> <p> fourth </p> <input type = "button" onClick = "afunc()" value = "click here"> </body> </html> Link
Get images <script> var picArr = new Array() picArr[0] = "Images/cute_puppy_02.jpg" picArr[1] = "Images/cute2.jpg" picArr[2] = "Images/cute3.jpg" picArr[3] = "Images/cute6.jpg" picArr[4] = "Images/cute7.jpg" var prev = -1; function afunc() { var iArr = document.getElementsByTagName('img') var y = Math.floor(Math.random() * iArr.length) var z = Math.floor(Math.random()*picArr.length) if (prev != -1) { iArr[prev].src = "Images/box.png" } iArr[y].src = picArr[z] prev = y; </script> </head> <body> <img src = "Images/box.png" width = "200" height = "200" alt = "a box"> <input type = "button" onClick = "afunc()" value = "click here"> Link
<script> function afunc() { var pArr = document <script> function afunc() { var pArr = document.getElementsByTagName("P"); var countvar = 0; while (countvar < pArr.length) { pArr[countvar].style.backgroundColor = "red" pArr[countvar].style.color = "white" pArr[countvar].style.fontSize = "150%" pArr[countvar].style.padding = "20px" pArr[countvar].style.width = "600px" pArr[countvar].style.boxShadow = "10px 20px 30px green"; countvar = countvar + 1; } </script> </head> <body> <p> first</p> <h2> Not p </h2> <p> second </p> <p> third </p> <p> fourth </p> <input type = "button" onClick = "afunc()" value = "click here"> Using a While Loop Link
<script> var colorArr = new Array() colorArr[0] = "red" colorArr[1] = "orange" colorArr[2] = "yellow" colorArr[3] = "green" colorArr[4] = "blue" function afunc() { var pArr = document.getElementsByTagName("P"); var countvar = 0; while (countvar < pArr.length) { var x = Math.floor(Math.random()*colorArr.length) var y = Math.floor(Math.random()*colorArr.length) while (x == y) { y = Math.floor(Math.random()*colorArr.length) } pArr[countvar].style.backgroundColor = colorArr[x] pArr[countvar].style.boxShadow = "10px 20px 30px "+colorArr[y]; pArr[countvar].style.color = "white" pArr[countvar].style.fontSize = "150%" pArr[countvar].style.padding = "20px" pArr[countvar].style.width = "600px" countvar = countvar + 1; </script> </head> <body> <p> first</p> <p> second </p> <p> third </p> <p> fourth </p> <input type = "button" onClick = "afunc()" value = "click here"> More than one loop Link
Fun Stuff: You can actually update the existing innerHTML (or anything else) <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <style> td { font-size: 170%; font-family: arial; padding: 10;text-align: center;} table { width: 900px; margin: auto; } </style> <script> function func() { var x = document.getElementById('text').innerHTML; x = ">>" + x document.getElementById('text').innerHTML = x; } </script> </head> <body> <table><tr><td colspan = '2'><h1 id = 'text'> 8-) <h1> </td></tr> <tr><td onClick = "func()"> Add tail </td></tr></table> </body> </html> Link
Another Example: <script> function func(letter) { var x = document.getElementById('text').innerHTML; x += letter; document.getElementById('text').innerHTML = x; } </script> </head> <body> <table><tr><td colspan = '9'> <h1 id = 'text' style = "font-size: 150%; text-align: center; font-family: arial; height: 100px;"></h1> </td></tr> <tr><td onClick = func('a')>a</td><td onClick = func('b')>b</td><td onClick = func('c')>c</td><td onClick = func('d')>d</td><td onClick = func('e')>e</td> <td onClick = func('f')>f</td><td onClick = func('g')>g</td><td onClick = func('h')>h</td><td onClick = func('i')>i</td> </tr> <tr><td onClick = func('j')>j</td><td onClick = func('k')>k</td><td onClick = func('l')>l</td><td onClick = func('m')>m</td><td onClick = func('n')>n</td> <td onClick = func('o')>o</td><td onClick = func('p')>p</td><td onClick = func('q')>q</td><td onClick = func('r')>r</td> <tr><td onClick = func('s')>s</td><td onClick = func('t')>t</td><td onClick = func('u')>u</td><td onClick = func('v')>v</td><td onClick = func('w')>w</td> <td onClick = func('x')>x</td><td onClick = func('y')>y</td><td onClick = func('z')>z</td><td onClick = func('.')>.</td> </table> Link
Moving <script> var xcoord = 10; var ycoord = 10; function func() { var x = Math.floor(Math.random() * 700); var y = Math.floor(Math.random() * 700); var xchange = (x-xcoord)/30; var ychange = (y-ycoord) / 30; count = 0; Move(xchange,ychange) } function Move(xc, yc) { count = count + 1; if (count < 30) { ycoord = ycoord + yc; xcoord = xcoord + xc; document.getElementById('p1').style.position = "absolute" document.getElementById('p1').style.left = ycoord + "px" document.getElementById('p1').style.top = xcoord + "px" setTimeout(function() {Move(xc,yc)}, 50) else { func(); </script> Link
Following Mouse: <script> var xcoord = 10; var ycoord = 10; function getClicks(e) { var x = e.clientX; var y = e.clientY; var xchange = (x-xcoord)/30; var ychange = (y-ycoord) / 30; count = 0; Move(xchange,ychange) } function Move(xc, yc) { count = count + 1; if (count < 30) { ycoord = ycoord + yc; xcoord = xcoord + xc; document.getElementById('p1').style.position = "absolute" document.getElementById('p1').style.left = xcoord + "px" document.getElementById('p1').style.top = ycoord + "px" setTimeout(function() {Move(xc,yc)}, 50) else { func(); </script> Link