Parameters: Parameters are another way of having something hold a value. E.g., var x = 3 Now the variable x holds 3. We can use x as if it is the number.

Slides:



Advertisements
Similar presentations
HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
Advertisements

function coffeeinfo() { document.getElementById('p3').innerHTML = "The word 'coffee' was.
Web Pages Week 10 This week: CSS Next week: CSS – Part 2.
Cascading Style Sheets
Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.
Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.
document.getElementById Used to change anything in your document (web page) that has an id Then you can change different aspects of the element with that.
Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.
Start menu -> all program -> Microsoft Visual SourceSafe-> Microsoft Visual Studio 2010 Click.
JavaScript Part 6. Calling JavaScript functions on an event JavaScript doesn’t have a main function like other programming languages but we can imitate.
Very quick intro HTML and CSS. Sample html A Web Title.
CHAPTER 8 ADVANCED CSS. LEARNING OBJECTIVES Assign formatting styles to a CSS class definition Use a tag’s class attribute to apply the styles defined.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science
CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.
1 Dreamweaver CS5 intermediate class by Cookie Setton Build a CSS website WITHOUT TABLES Just when you thought you were starting to understand HTML coding,
Cascade Style Sheet Demo. Cascading Style Sheets Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to.
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Unit 20 - Client Side Customisation of Web Pages
CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
HTML for Beginners An IEEE/ACM Presentation given by Hamilton Turner.
4.01 Cascading Style Sheets
Web Page Creation Part II ST: Introduction to Web Interface Design Prof. Angela Guercio.
Review. What is wrong with the following function? imgArray = new Array() imgArray[0] = “mypic.jpg” imgArray[1] = “mypic2.jpg” imgArray[2] = “mypic3.jpg”
CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.
1 Events Lect 8. 2 Event-driven Pages one popular feature of the Web is its interactive nature e.g., you click on buttons to make windows appear e.g.,
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
JavaScript, jQuery, and Mashups Incorporating JavaScript, jQuery, and other Mashups into existing pages.
Game var count = 0 var total = 0 function myfunc() { if (count < 50) {var basetime = 1000 document.getElementById('img1').src = "Images/gopher.jpg" document.getElementById('img1').style.position.
Given the following code, what picture is displayed in the second image on the page when the first image is clicked on the first time? ___________________________.
Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for defining the presentation of documents written in HTML.
SetTimeout()  What if you want to automatically cycle through the pics?  So you don’t have to keep clicking the button to see the next pic  Use the.
Link. setTimeout() What if you want to automatically cycle through the pics? So you don’t have to keep clicking the button to see the next pic Use the.
CSD 340 (Blum)1 Introducing Text Input elements and Ifs.
 Add one element at a time  If it doesn’t do what you want, › Delete it › DON’T just keep piling on more items.
1 R3 R1 R5 R4 R6 R2 B B A A Looking at the Code Under the View menu Select Source.
Functions Wouldn’t it be nice to be able to bring up a new animal and paragraph without having to reload the page each time? We can! We can place the.
HTML Help book. HTML HTML is the programming language used to make web pages for the Internet. HTML stands for Hyper Text Markup Language. HTML is made.
InnerHTML: This is a paragraph about Ted the cat What is the innerHTML of ‘cat’? zombies
HTML.
CS 0134 (term 2181) Jarrett Billingsley
4.01 Cascading Style Sheets
CSE 102 Introduction to Web Design and Programming
Looping SetTimeout is a loop
CSS Layouts: Grouping Elements
Creating Your Own Webpage
Week 4: Introduction to Javascript
JavaScript functions.
Cascading Style Sheets (Layout)
Programming the Web using XHTML and JavaScript
setTimeout() What if you want to automatically cycle through the pics?
Table CSS Create a new CSS called tablestyle.CSS Green Background
TOPICS Chrome Dev Tools Process for Building a Static Website
The Internet 10/13/11 The Box Model
Introduction to DOM.
Events Comp 205 Fall 2017.
TABLES IN HTML No, not that kind of table!! THIS KIND!!
Pertemuan 1b
Training & Development
Javascript and JQuery SRM DSC.
setTimeout() What if you want to automatically cycle through the pics?
Using tables in HTML Goes in order with Examples at my site.
4.01 Cascading Style Sheets
Writing to the Page Formatting Forms
Web Programming and Design
Web Programming and Design
Web Programming and Design
Presentation transcript:

Parameters: Parameters are another way of having something hold a value. E.g., var x = 3 Now the variable x holds 3. We can use x as if it is the number 3 var narr = new Array() narr[0] = “cat” narr[1] = “dog” Now the array narr at location 1 holds the word “dog”, and we can use narr[1] as if it is the word “dog” Parameters: <p onclick = “func(‘easy’)”> click here to call the function with the parameter ‘easy’ </p> <script> function func(easyorhard) { If (easyorhard == ‘easy’) … Now when you click on the paragraph, the word ‘easy’ is placed in the parameter easyorhard, so easyorhard can be used as if it is the word ‘easy’

Parameter Example: link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > function showparam(x) { if (x == 'snow') { document.getElementById("h11").innerHTML = "it's snowing!" } else if (x == 'rain') { document.getElementById("h11").innerHTML = "it's raining!" else if (x == 'sun') { document.getElementById("h11").innerHTML = "it's sunny!" </script> </head> <body> <h1 id = "h11"> Different Styles</h1> <p id = "p1" onClick = "showparam('snow')">click here for snow</p> <p id = "p2" onClick = "showparam('rain')">click here for rain</p> <p id = "p3" onClick = "showparam('sun')">click here for sun</p> </body> </html>

<!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> function changepic(x) { document.getElementById('bigpic').src = x } function changebak() { document.getElementById('bigpic').src = “frog.jpg" </script> </head> <body > <table ><tr><td colspan = "4" height = "300" width = "300"> <img src = "frog.jpg" width = "250" height = "250" id = "bigpic"> </td></tr> <tr><td > <img src = "pic1.jpg" width = "40" height = "40" id = "img1" onMouseOver = "changepic('pic1.jpg')" onMouseOut = "changebak()"> </td><td> <img src = "pic2.jpg" width = "40" height = "40" id = "img2" onMouseOver = "changepic('pic2.jpg')" onMouseOut = "changebak()"> <img src = "pic3.jpg" width = "40" height = "40" id = "img3" onMouseOver = "changepic('pic3.jpg')" onMouseOut = "changebak()"> <img src = "pic4.jpg" width = "40" height = "40" id = "img4" onMouseOver = "changepic('pic4.jpg')" onMouseOut = "changebak()"> </td></tr></table> </body> </html> link

Functions can have more than one parameter link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> function myFunction(x, y) { document.getElementById('p1').innerHTML = "Welcome " + x + ", the " + y; } </script> </head> <body> <p id = "p1">Results go here.</p> <button onclick="myFunction('Harry Potter','Wizard')">Try it</button> <button onclick="myFunction('Bob','Builder')">Try it</button> </body> </html> Parameters match in order: function myFunction( x, y) onClick = myFunction( ‘Harry Potter’, ‘Wizard’) onClick = myFunction( ‘Bob’ ‘Builder’)

Parameter Example: link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > function showparam(x, y) { document.getElementById(x).innerHTML =y document.getElementById(x).style.fontSize = "150%"; } function goBack(x, y) document.getElementById(x).style.fontSize = "100%"; </script> </head> <body> <h1 id = "h11"> Different Styles</h1> <p id = "snow" onMouseOver = "showparam('snow', 'it is snowing!')" onMouseOut = "goBack('snow', 'weather 1')">weather 1</p> <p id = "rain" onMouseOver = "showparam('rain', 'it is raining!')" onMouseOut = "goBack('rain', 'weather 2')">weather 2</p> <p id = "sun" onMouseOver = "showparam('sun', 'it is sunny')" onMouseOut = "goBack('sun', 'weather 3')">weather 3</p> </body> </html>

What is this code doing? link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> var race_on = true var ycoord = 5; function myfunc() { if (race_on == true) { ycoord = ycoord+ Math.floor(Math.random()*50)+1 document.getElementById('img1').style.left = ycoord+"px" if (ycoord > 800) { race_on = false func2() } else { setTimeout(function(){myfunc()},100) function func2() { document.getElementById('h11').innerHTML = "Snail won!" </script> </head> <body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 20px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 270px; left: 5px"> <input type = "button" onclick = "myfunc()" value = "start" ></p> </body> </html> What is this code doing? link

Add another snail for a race? link 1. add another snail image in your html code 2. DON’T WRITE ANOTHER FUNCTION TO DO THE SAME THING!! Add a parameter Could be the id of the image to move Or could put all ids into an array Then the parameter would be the number of the id in the array, e.g., <script> race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" var ycoord = 5; function myfunc(x) { if (race_on == true) { ycoord = ycoord+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord+"px" if (ycoord > 800) { race_on = false func2(x) } else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> Add another snail for a race? link

Next, make both snails go at once: link Since one click cannot call more than one function (or a single function more than once): ADD ANOTHER FUNCTION A starting function This function will ‘call’ the other function twice: And the click in the html should now call the starting function: function startit() { myfunc(0) myfunc(1) } function myfunc(x) { if (race_on == true) { ycoord = ycoord+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord+"px" if (ycoord > 800) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" … <input type = "button" onclick = "startit()" value = "start" > Next, make both snails go at once: link

Problem: both snails using the same y coordinate (why is this a problem?) Solution: an array for y coordinates as well as an array for ids: Then replace ycoord with ycoord[x]: var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x] + Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { race_on = false func2(x) } else { setTimeout(function(){myfunc(x)},100)

<!DOCTYPE html><html><head><meta charset= "utf-8" /> <script> race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; function startit() { myfunc(0) myfunc(1) } function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> </head> <body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 20px; left: 5px"></p> <p ><img src = "Images/snail2.jpg" width = "150" height = "150" id = "img2" style = "position: absolute; top: 170px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 310px; left: 5px"> <input type = "button" onclick = "startit()" value = "start" ></p> </body> </html> All Together: link

<!DOCTYPE html><html><head><meta charset= "utf-8" /> <script> race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; function startit() { myfunc(0) myfunc(1) } function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> </head> <body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 20px; left: 5px"></p> <p ><img src = "Images/snail2.jpg" width = "150" height = "150" id = "img2" style = "position: absolute; top: 170px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 310px; left: 5px"> <input type = "button" onclick = "startit()" value = "start" ></p> </body> </html> Now, how do we add another snail? (3 lines in js and 1 line in the html code)

Link Next: Make them go backwards? race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" idArray[2] = "img3" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; ycoord[2]= 5; function startit() { myfunc(0) myfunc(1) myfunc(2) } function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) } } function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> </head><body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 20px; left: 5px"></p> <p ><img src = "Images/snail2.jpg" width = "150" height = "150" id = "img2" style = "position: absolute; top: 170px; left: 5px"></p> <p ><img src = "Images/snail3.png" width = "150" height = "150" id = "img3" style = "position: absolute; top: 320px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 630px; left: 5px"> <input type = "button" onclick = "startit()" value = "start" ></p> Link Next: Make them go backwards?

Tougher: When a snail has a ycoord greater than 180, we want to reverse the direction. The easiest way to reverse the direction is to change the ycoordinate by a negative number instead of a positive number. To do that, we need a direction value (either 1 or negative 1) that we multiply the ycoordinate by. We need a different direction value for each snail: var direction = new Array(); direction[0] = 1 direction[1] = 1 direction[2] = 1 … function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ ((Math.floor(Math.random()*50)+1) * direction[x]) document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { direction[x] = direction[x] * -1; setTimeout(function(){myfunc(x)},100) } else if (ycoord[x] < 5) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100)

Add flipped pics: When snails go back towards the beginning, we want them facing the right direction: var backImage = new Array(); backImage[0] = "Images/snail1b.png" backImage[1] = "Images/snail2b.jpg" backImage[2] = "Images/snail3b.png" var direction = new Array(); direction[0] = 1 direction[1] = 1 direction[2] = 1 … function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ ((Math.floor(Math.random()*50)+1) * direction[x]) document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { document.getElementById(idArray[x]).src = backImage[x]; direction[x] = direction[x] * -1; setTimeout(function(){myfunc(x)},100) } else if (ycoord[x] < 5) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100)

race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" idArray[2] = "img3" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; ycoord[2]= 5; var backImage = new Array(); backImage[0] = "Images/snail1b.png" backImage[1] = "Images/snail2b.jpg" backImage[2] = "Images/snail3b.png" var direction = new Array(); direction[0] = 1 direction[1] = 1 direction[2] = 1 function startit() { myfunc(0) myfunc(1) myfunc(2) } function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ ((Math.floor(Math.random()*50)+1) * direction[x]) document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { document.getElementById(idArray[x]).src = backImage[x]; direction[x] = direction[x] * -1; setTimeout(function(){myfunc(x)},100) else if (ycoord[x] < 5) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> </head><body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 40px; left: 5px"></p> <p ><img src = "Images/snail2.jpg" width = "150" height = "150" id = "img2" style = "position: absolute; top: 190px; left: 5px"></p> <p ><img src = "Images/snail3.png" width = "150" height = "150" id = "img3" style = "position: absolute; top: 340px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 650px; left: 5px"> <input type = "button" onclick = "startit()" value = "start" ></p> All Together: Link:

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

Feedback: Privacy Policy Feedback
Do Not Sell My Personal Information
About project: SlidePlayer Terms of Service

© 2025 SlidePlayer.com. Inc. All rights reserved.