This question already has answers here:
What is the difference between "let" and "var"?
(39 answers)
Closed 12 months ago.
This is a simple javascript code. I'm creating 5 divs in script and populate an 'onclick' event for each. However, all of them give me the id of the last one. Any idea why this behavior occurring? Many thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<style type="text/css">
.divImgPoint {
float: left;
border-radius: 50%;
width: 15px;
height: 15px;
margin-left: 5px;
margin-right: 5px;
border: ridge 2px #c73756;
}
.divTest {
position: absolute;
width: 100px;
height: 100px;
top: 200px;
left: 100px;
border: 1px solid red;
}
</style>
<script type="text/javascript">
function createNewDivs() {
var divFixed = document.getElementById('divFixed');
var newDiv;
for (xI = 0; xI < 5; xI++) {
newDiv = document.createElement('div');
newDiv.id = "newDiv_" + xI;
newDiv.className = "divImgPoint";
newDiv.onclick = () => { alert(newDiv.id + " | " + xI); }
divFixed.appendChild(newDiv);
}
}
</script>
</head>
<body>
<div id="divFixed">
</div>
</body>
</html>
<script type="text/javascript">
window.addEventListener('load', () => { createNewDivs(); });
</script>
Put let newDiv; inside loop.
Like
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<style type="text/css">
.divImgPoint {
float: left;
border-radius: 50%;
width: 15px;
height: 15px;
margin-left: 5px;
margin-right: 5px;
border: ridge 2px #c73756;
}
.divTest {
position: absolute;
width: 100px;
height: 100px;
top: 200px;
left: 100px;
border: 1px solid red;
}
</style>
<script type="text/javascript">
function createNewDivs() {
var divFixed = document.getElementById('divFixed');
for (xI = 0; xI < 5; xI++) {
let newDiv;
newDiv = document.createElement('div');
newDiv.id = "newDiv_" + xI;
newDiv.className = "divImgPoint";
newDiv.onclick = () => { alert(newDiv.id + " | " + xI); }
divFixed.appendChild(newDiv);
}
}
</script>
</head>
<body>
<div id="divFixed">
</div>
</body>
</html>
<script type="text/javascript">
window.addEventListener('load', () => { createNewDivs(); });
</script>
Try stuffing this code into files index.html, style.css and app.js, it doesn't open. The browser says that "The webpage was reloaded because a problem occurred" and keeps on loading.I am using an MacBook Air with macOS Big Sur with an M1, if that's of any help. I removed the full HTML code and rewrote it again, and found out it is the javascript that is causing the issue. But I have no idea why, because 1) I think my code is correct and 2) I can't open the console to check for errors because the file doesn't open. Could anybody help me?
My HTML file is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="./app.js" defer></script>
<title>Document</title>
</head>
<body>
<div class="type" contenteditable="true">In .type</div>
<div class="words">In .words</div>
</body>
</html>
My JavaScript file is:
const type = document.querySelector(".type");
const words = document.querySelector(".words");
console.log(type.innerHTML.split(""));
for (let i=0; i < type.innerHTML.split("").length; i++) {
type.innerHTML += `<span>${i}</span>`
}
And my css file is:
#import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #333;
}
.type, .words {
font-family: 'JetBrains Mono', monospace;
color: #fff;
border: 2px solid #007bff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 200px;
border-radius: 20px;
display: flex;
align-items: center;
padding: 50px;
font-size: 100px;
outline: none;
}
.type {
background-color: transparent;
z-index: 2;
}
.words {
background-color: #333;
z-index: 1;
}
You are running a loop on element type and updating it in loop.
You have created an endless loop my friend.
Try changing this-
for (let i=0; i < type.innerHTML.split("").length; i++) {
type.innerHTML += `<span>${i}</span>`
}
to this-
let typesplit = type.innerHTML.split("")
for (let i=0; i < typesplit.length ; i++) {
type.innerHTML += `<span>${i}</span>`
}
This way it won't update the value of .type every time.
Also try not to use type as variable name as it is a reserved word in Typescript which resembles JavaScript.
I wrote a js code to make the table and the tds and trs but there are these weird white lines between and I'm pretty sure that's a problem with one of the CSS properties but I just can't find the thing I need to change.
I am kind of a beginner programmer. Help will be welcome and if you have improvements to the code or maybe just a suggestion or something on how to continue my programing journey I will be very glad :)
const board = document.getElementById("board");
let black = true;
for(let i = 1; i <= 8; i++){
let row = document.createElement("tr");
if(black){
row.classList.add("black");
}
else{
row.classList.add("black");
}
black = !black;
board.appendChild(row);
for(let j = 1; j <= 8; j++){
let column = document.createElement("td");
if(black){
row.classList.add("black");
}
else{
row.classList.add("white");
}
black = !black;
board.appendChild(column);
}
}
.black {
background: black;
}
.white {
background: white;
}
table {
height: 900px;
width: 900px;
border: 2px solid black;
display: inline-block;
margin: -1px;
border-collapse: collapse;
}
td, tr {
border: 2px solid black;
height: 112.5px;
width: 112.5px;
}
td::after {
content: ' ';
display: block;
margin-top: 100%;
}
.sqr {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="chessContainer">
<table id="board">
</table>
</div>
<script src="chess.js"></script>
</body>
</html>
Your issue is in the javascript, you want to append the columns (td) to the row (tr) then append the row to the board.
board.appendChild(row); this is your issue. Change it to row.appendChild(column);
NOTE: If you right click browser when you run it and look at the way your table is built, you will see that you are creating a tr and there is nothing inside the row, then you have 8 td tags and the html continues in that manner. This should be the clue to look at.
const board = document.getElementById("board");
let black = true;
for(let i = 1; i <= 8; i++){
let row = document.createElement("tr");
// let sqr = document.createElement("div");
//sqr.classList.add("sqr");
if(black){
row.classList.add("black");
}
else{
row.classList.add("black");
}
black = !black;
//row.appendChild(sqr);
board.appendChild(row);
for(let j = 1; j <= 8; j++){
let column = document.createElement("td");
//let sqr2 = document.createElement("div");
//sqr2.classList.add("sqr");
if(black){
row.classList.add("black");
}
else{
row.classList.add("white");
}
black = !black;
// column.appendChild(sqr2);
row.appendChild(column);
}
}
.black {
background: black;
}
.white {
background: white;
}
table {
height: 900px;
width: 900px;
border: 2px solid black;
display: inline-block;
margin: -1px;
border-collapse: collapse;
}
td, tr {
border: 2px solid black;
height: 112.5px;
width: 112.5px;
}
td::after {
content: ' ';
display: block;
margin-top: 100%;
}
.sqr {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="chessContainer">
<table id="board">
</table>
</div>
<script src="chess.js"></script>
</body>
</html>
I am not quite sure how to phrase my question, so please forgive me. My plan was to create giant images of letters that make up the words "Hello World". I wanted to have these words nest inside of the big boxes and later decided to have each word be inside a smaller box. In the picture, I have created a small box (the sized has not been permanently set, I was just testing). But when I created the second small box, it flew out of the big box. In my index.html file, the <div> for the second small box was nested inside the big box div.
Here is the code:
INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div class = "box">
<div class = "hello-box"></div>
<div class = "h-left"></div>
<div class = "h-mid"></div>
<div class = "h-right"></div>
</div>
<div class = "world-box">
</div>
</div>
</body>
</html>
STYLE.CSS
body {
background-color: skyblue;
}
.box {
position: relative;
margin: auto;
margin-top: 15%;
display: block;
border: 3px solid black;
width: 800px;
height: 500px;
}
.hello-box {
position: relative;
margin: auto;
margin-top: 125px;
width: 100px;
height: 100px;
border: 1px solid black;
}
.world-box {
position: relative;
margin: auto;
margin-top: 125px;
width: 100px;
height: 100px;
border: 1px solid black;
}
RESULT
Any help would very appreciated!!!
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div class="flex-container">
<div>H</div>
<div>E</div>
<div>L</div>
<div>L</div>
<div>O</div>
<div>W</div>
<div>O</div>
<div>R</div>
<div>L</div>
<div>D</div>
<div>!</div>
</div>
</body>
</html>
using flexbox
Assuming you're able to modify the HTML, the easiest way to fix this would be to simply shift your .world-box <div> to be inside of your .box <div>:
body {
background-color: skyblue;
}
.box {
position: relative;
margin: auto;
margin-top: 15%;
display: block;
border: 3px solid black;
width: 800px;
height: 500px;
}
.hello-box {
position: relative;
margin: auto;
margin-top: 125px;
width: 100px;
height: 100px;
border: 1px solid black;
}
.world-box {
position: relative;
margin: auto;
margin-top: 125px;
width: 100px;
height: 100px;
border: 1px solid black;
}
<body>
<div class="box">
<div class="hello-box"></div>
<div class="h-left"></div>
<div class="h-mid"></div>
<div class="h-right"></div>
<div class="world-box"></div>
</div>
</body>
I would actually create a function that would put anything you want into some kind of wrapper, like so:
/* js/external.js */
//<![CDATA[
var doc, bod, M, I, S, Q, special, unspecial, shuffle, ReaderBoard, autoBoard, randBoard; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body;
M = function(tag){
return doc.createElement(tag);
}
I = function(id){
return doc.getElementById(id);
}
S = function(selector, within){
var w = within || doc;
return w.querySelector(selector);
}
Q = function(selector, within){
var w = within || doc;
return w.querySelectorAll(selector);
}
special = function(str){
return str.replace(/&/g, '&').replace(/'/g, ''').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
}
unspecial = function(str){
return str.replace(/&/g, '&').replace(/'/g, "'").replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
}
shuffle = function(array){
var a = array.slice(), l = a.length;
a.sort(function(b, c){
return 0.5 - Math.random();
});
return a;
}
ReaderBoard = function(outputElement){
this.output;
var t = this;
this.setOutput = function(element){
this.output = element;
return this;
}
this.setOutput(outputElement);
this.setText = function(text){
this.output.innerHTML = '';
for(var i=0,a=text.split(''),s,d,l=a.length; i<l; i++){
d = M('div'); s = a[i];
if(s === ' ')d.className = 'space';
d.innerHTML = special(s); this.output.appendChild(d);
}
return this;
}
}
autoBoard = function(outputElement, textArray, interval, noLoop){
var rb = new ReaderBoard(outputElement), i = 0, r, l = textArray.length;
var v = interval || 1500;
rb.setText(textArray[0]);
r = setInterval(function(){
i++;
if(i === l){
if(noLoop){
clearInterval(r); r = undefined;
return;
}
else{
i = 0;
}
}
rb.setText(textArray[i]);
}, v);
}
randBoard = function(outputElement, textArray, interval, noLoop){
var rb = new ReaderBoard(outputElement), i = 0, r, a = shuffle(textArray), l = a.length;
var v = interval || 1500;
rb.setText(a[0]);
r = setInterval(function(){
i++;
if(i === l){
if(noLoop){
clearInterval(r); r = undefined;
return;
}
else{
a = shuffle(a); i = 0;
}
}
rb.setText(a[i]);
}, v);
}
var rb = new ReaderBoard(I('readerboard'));
rb.setText('Hello World!');
autoBoard(I('autoboard'), ['Check this out!', "It's a reader board.", 'This one runs in order.', 'Are you not amazed?']);
autoBoard(I('noloop_autoboard'), ['Check this out!', "It's a reader board.", 'This one runs in order.', 'Are you not amazed?'], 2000, true);
randBoard(I('randboard'), ['This is Awesome!', "Isn't totally random.", 'Create Something Cool', 'Success!', 'Nice']);
randBoard(I('noloop_randboard'), ['This is Awesome!', "Isn't totally random.", 'Create Something Cool', 'Success!', 'Nice'], 3500, true);
});
//]]>
/* css/external.css */
*{
box-sizing:border-box; padding:0; margin:0;
}
html,body{
width:100%; height:100%;
}
body{
background:#ccc;
}
.flex_text{
display:flex;
}
.flex_text>div{
flex:1; background:#fff; font:bold 30px Arial, Helvetica, sans-serif; text-align:center; margin:3px;
}
.flex_text>.space{
background:#ccc; margin:0;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script type='text/javascript' src='js/external.js'></script>
</head>
<body>
<div class='flex_text' id='readerboard'></div>
<hr />
<div class='flex_text' id='autoboard'></div>
<hr />
<div class='flex_text' id='noloop_autoboard'></div>
<hr />
<div class='flex_text' id='randboard'></div>
<hr />
<div class='flex_text' id='noloop_randboard'></div>
</body>
</html>
Just a thought.
First and foremost, this is my code.
var size = 400
function createGrid(size) {
$("#create").click(function() {
for (i = 0; i <= size; i++) {
$("#container").append('<div class="grid"> </div>');
}
});
}
$(document).ready(createGrid);
#container {
top: 10px;
position: relative;
width: 960px;
height: 960px;
border-color: black;
margin: auto;
outline: 2px solid black;
}
.grid {
display: inline-block;
border: 1px solid white;
background-color: black;
float: left;
width: 10px;
height: 10px;
}
<!DOCTYPE html>
<html>
<title>
Sam's Etcha Sketch
</title>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div>
<button id="create">Create!</button>
</div>
<div id="container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
My goal is to create square divs inside #container after clicking on the button #create. I don't mind how ugly it looks right now, I just want to be able to click on the button to add squares(which isn't the result as of now). I checked JS Bin and my browser console for any bugs or errors but I can't seem to find any. Not sure what I'm doing wrong as I tried a simple FadeOut function on the button and it didn't seem to work, so maybe it's the way I placed the into the HTML? (I tried placing it inside as well.)
TL;DR
What is wrong with my code that is causing my click() function to not append any square divs inside a container?
You're never passing size to createGrid
Here's your code.
// the outer "size" variable
var size = 400
// this creates a new "size" variable which shadows the outer one
function createGrid(size) {
$("#create").click(function() {
for (i = 0; i <= size; i++) {
$("#container").append('<div class="grid"> </div>');
}
});
}
// this passes "createGrid" to the event handler, which calls it without any argument
$(document).ready(createGrid);
Here's how to do it:
// this generates an event handler with a custom "size" in its scope
function getGridCreator(container, size) {
return function () {
$("#create").click(function() {
for (i = 0; i <= size; i++) {
$(container).append('<div class="grid"> </div>');
}
});
};
}
// this passes the grid creator to the event handler, which again calls
// it without any argument, but this time "size" is in scope
$(document).ready(getGridCreator("#container", 400));
As a general tip: Avoid global variables, use function parameters and closures instead.
Try this i made a few changes in your script
$(document).ready(function(){
var size = 400
function createGrid(size) {
$("#create").click(function() {
for (i = 0; i <= size; i++) {
$("#container").append($('<div class="grid"/>'));
}
});
}
createGrid(size)
});
#container {
top: 10px;
position: relative;
width: 960px;
height: 960px;
border-color: black;
margin: auto;
outline: 2px solid black;
}
.grid {
display: inline-block;
border: 1px solid white;
background-color: black;
float: left;
width: 10px;
height: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<title>
Sam's Etcha Sketch
</title>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div>
<button id="create">Create!</button>
</div>
<div id="container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>