You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
1.8 KiB
75 lines
1.8 KiB
<!doctype html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<title>var loop</title> |
|
<style> |
|
#box { |
|
display: flex; |
|
justify-content: space-around; |
|
} |
|
|
|
#box > div { |
|
height: 5em; |
|
width: 5em; |
|
background-color: purple; |
|
} |
|
</style> |
|
<link href="/styles/styles.css" rel="stylesheet" type="text/css"> |
|
<link href="/webdevelopment/styles/styles.css" rel="stylesheet" type="text/css"> |
|
|
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> |
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> |
|
<!--[if lt IE 9]> |
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> |
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> |
|
<![endif]--> |
|
</head> |
|
<body> |
|
<main> |
|
<h1>VAR LOOP</h1> |
|
<div id="box"></div> |
|
<script type="text/javascript"> |
|
var div; |
|
var box = document.getElementById("box"); |
|
|
|
for (var i=0; i<5; i++) { |
|
div = document.createElement("div"); |
|
div.onclick = function() { |
|
alert("This is box # " + i); |
|
}; |
|
box.appendChild(div); |
|
} |
|
</script> |
|
<pre> |
|
<h2>The CSS</h2> |
|
<style> |
|
#box { |
|
display: flex; |
|
justify-content: space-around; |
|
} |
|
|
|
#box &ht; div { |
|
height: 5em; |
|
width: 5em; |
|
background-color: purple; |
|
} |
|
</style></pre> |
|
<pre> |
|
<h2>The JavaScript code</h2> |
|
var div; |
|
var box = document.getElementById("box"); |
|
|
|
for (var i=0; i<5; i++) { |
|
div = document.getElementById("") |
|
div.onclick = function() { |
|
"This is box # " + i); |
|
} |
|
box.appendChild(div); |
|
} |
|
</script></pre> |
|
</main> |
|
</body> |
|
</html> |