I am simply trying to run a javascript that will create a "grid" table for me. Here's my code...
<!DOCTYPE html>
<html>
<head>
<style>
* {margin: 0;}
body {width: 100%; height: 100%;}
table {margin: 20px auto; border-collapse: collapse;}
td {border: thin solid black; height: 5px; width: 5px;}
</style>
</head>
<body>
<table>
<script>
var x = 1;
var y = 1;
while (x < 10) {
document.write("<tr>");
while (y < 10) {
document.write("<td></td>");
y++;
}
document.write("</tr>");
x++;
}
</script>
</table>
</body>
When I run this, the nested WHILE loop works but the first one only runs once giving me one row of 9 blocks.
However if I comment out the nested loop and add in a simple output to make it look like...
<script>
var x = 1;
while (x < 10) {
document.write("<tr>");
document.write("<td></td>");
document.write("</tr>");
x++;
}
</script>
It will correctly print out 1 column of 9 rows... what am I missing??
Thanks.
You have to reset your y-variable after the y-loop finishes, else it will never enter the loop after the first time if exits the loop.
Though, I would recommend using for loops, since those are more appropriate for your case.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
}
body {
width: 100%;
height: 100%;
}
table {
margin: 20px auto;
border-collapse: collapse;
}
td {
border: thin solid black;
height: 5px;
width: 5px;
}
</style>
</head>
<body>
<table>
<script>
var x = 1;
var y = 1;
while (x < 10) {
document.write("<tr>");
while (y < 10) {
document.write("<td></td>");
y++;
}
y = 1;
document.write("</tr>");
x++;
}
</script>
</table>
</body>
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
}
body {
width: 100%;
height: 100%;
}
table {
margin: 20px auto;
border-collapse: collapse;
}
td {
border: thin solid black;
height: 5px;
width: 5px;
}
</style>
</head>
<body>
<table>
<script>
for (var x = 1; x < 10; x++) {
document.write("<tr>");
for (var y = 1; y < 10; y++) {
document.write("<td></td>");
}
document.write("</tr>");
}
</script>
</table>
</body>
Also note that every time you use the document.write method, the browser will have to reparse your whole DOM, which is not good for performance.
Related
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 try to load an array from an external JS file into my HTML and have problems with that.
My js.js:
var temp_max = [4,9,2,5,8,4,2,10];
My HTML:
Note: Please download this file DateJS and insert it into "DATE-JS"!!
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--CSS for layout-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!--Date library for german date layout-->
<script src="DATE-JS"></script>
<script src="js.js"></script>
</head>
<body>
<br>
<br>
<div style="width:80%" position="absolute">
<div class="header">
<script>
for(var i = 0 ; i <8 ; i++)
{
var weekday=Date.today().addDays(i).toString('dddd');
document.write("<div id='div_weekday'>" + weekday + "</div>");
}
for(var i = 0 ; i <8 ; i++)
{
var day = Date.today().addDays(i).toString('dd');
document.write("<div id='div_date'>" + day + "</div>")
}
</script>
</div>
</div>
</body>
</html>
My CSS:
* {
box-sizing: border-box;
}
body {
background-color: rgb(86,86,85);
}
h1:after {
content: " ";
width: 70.5%;
height: 2px;
background-color: rgb(228,203,153);
position:absolute;
top: 50%;
margin-left: 15px
}
.header {
width: 100%;
}
.header > div {
color: rgb(228,203,153);
width: 12.5%;
float: left;
border: solid rgb(228,203,153);
border-width: 1px 1px 1px 0;
text-align: left;
word-break: break-all;
}
.header > div:first-child {
border-width: 1px;
}
#div_date {
border: none;
width: 12.5%;
font-size: 60px;
text-align: right;
border-bottom: solid rgba(228,203,153,0.3);
border-width: 0.5px;
padding-right: 1%
}
#div_weekday {
border: none;
width: 12.5%;
font-size: 20px;
text-align: left;
padding-left: 1%
}
Here is a screenshot without importing the JS array.
So I want that my temp_max array values are displayed exactly above the German weekdays!
So above the first information: 'Donnerstag' the script should display the value 4 from the array and so on.
Please note that I want to export this array from an external JS-file, I am not able to write this variable into my HTML file!
I already tried to use
document.getElementById
but this does not work for me.
If the problem just in looping over the created divs, I think you can do this.
All what you need to change is just adding a different ids to your divs.
Just use i index in your ids.
Something like this:
Creation:
for(var i = 0 ; i <8 ; i++) {
var weekday=Date.today().addDays(i).toString('dddd');
document.write("<div id='div_weekday_" + i + "'>" + weekday + "</div>");
}
Updating data:
for (var i = 0; i < 8; i++) {
document.getElementById('div_weekday_' + i).innerHTML = temp_max[i].weekday;
}
Edit: Updated the code slightly based on your comments.
Edit 2: Live example: lachniet.com/chessboard
I'm trying to use a combination of HTML, CSS, and JS to draw out an empty chessboard. My code with CSS and JS inline is this:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>TitaniumChess</title>
<style>
html,body {
margin: 0;
padding: 0;
}
#board {
border: 1px solid #000;
border-collapse: collapse;
float: left;
height: 50vw;
width: 50vw;
}
.tile-white {
height: 12.5%;
width: 12.5%;
}
.tile-black {
background-color: #000;
color: #fff;
height: 12.5%;
width: 12.5%;
}
</style>
</head>
<body>
<table id="board"></table>
<script>
var board = document.getElementById('board');
var draw = '';
var letters = 'abcdefgh';
for (var column = 8; column > 0; column--) {
draw += '<tr id="' + column + '">';
for (var row = 0; row < 8; row++) {
draw += '<td id="' + letters.charAt(row) + column + '" class="';
if ((row + column) % 2 == 1) {
draw += 'tile-black';
} else {
draw += 'tile-white';
}
draw += '">test</td>';
}
draw += '</tr>';
}
board.innerHTML = draw;
</script>
</body>
</html>
Now, this code works perfectly fine for me in Chrome 52. However, in Firefox 47, the bottom row is cut off. Surprisingly, this code works fine even in IE 11, and Edge 12 (All on Windows 10 Enterprise 64-Bit).
This seems to be a problem specific to Firefox. Does anyone have any idea why?
The problem is in hidden borders and paddings. Also browser recalculates height if the sum less than 100%. This is css which works for me in Edge, FF, and GC.
html, body {
margin: 0;
padding: 0;
}
#board {
float: left;
height: 50vw;
width: 50vw;
border: 1px solid #000;
border-collapse: collapse;
padding:0;
}
#board td{ /*All td are created equal*/
height: 10%; /*Let browser recalculate*/
width: 12.5%;
border:none 0px; /*remove borders explicitly */
padding:0;
}
.tile-white {
}
.tile-black {
background-color: #000;
color: #fff;
}
As a bonus, you don't need .tile-black and .tile-white classes.
/*Odd td in even tr and even td in odd tr*/
#board tr:nth-child(2n) td:nth-child(2n+1),
#board tr:nth-child(2n+1) td:nth-child(2n)
{
background-color: #000;
color: #fff;
}
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>
I found some js on github that did what I needed it to do with the exception of being able to have multiple hand/glove animations on different pages of the site. The original js called the div ID and I assumed that the var needed an array of the existing div IDs. I tried that and it did not work. I am not a js or jquery guru at all but I can implement and tweak most of the time.
I have set up a fiddle so you can see how the original js is working with my code. I just need both div containers to animate the corresponding PNG that is called in the css for the separate div IDs.
http://jsfiddle.net/haagmeister/38LB2/14/
The code pulled from the CMS and the second div is not animating.. I assume it is because the calling of the var is not set up properly to pull from the array?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#new-headers-container{
width: 1024px;
height: 430px;
border: none;
margin: 0;
padding: 0;
}
#sports-gloves-container{
width: 411px;
height: 430px;
overflow: hidden;
float: left;
background: url('http://popticals.com/template/sportHeaders/circle-animation.gif') no-repeat 0 0;
border: none;
margin: 0;
padding: 0;
}
#golf-glove{
width: 284px;
height: 430px;
overflow: hidden;
float: left;
background: url('http://popticals.com/template/sportHeaders/gloves/golf-glove.png') no-repeat 0 0;
border: none;
margin: 0px 0px 0px 86px;
padding: 0;
}
#bike-glove{
width: 284px;
height: 430px;
overflow: hidden;
float: left;
background: url('http://popticals.com/template/sportHeaders/gloves/bike-glove.png') no-repeat 0 0;
border: none;
margin: 0px 0px 0px 86px;
padding: 0;
}
</style>
<script type='text/javascript'>
(function($) {
// you should change these variables
var numberOfSteps = 5;
var heightOfOneStep = 430;
var idOfAnimatedDiv = ["golf-glove","bike-glove"];
var timeBetweenSteps = 60;
// you probably won't have to change these
var index = -1;
var direction = "+";
var steps = [];
var timeOutDuration;
// instantiate steps with the correct heights of the PNG
for (var i = 0; i <= numberOfSteps - 1; i++) {
steps.push( heightOfOneStep * i );
}
var interval = setTimeout(function() {
// reset timeOutDuration
if ( timeOutDuration != timeBetweenSteps ) {
timeOutDuration = timeBetweenSteps;
}
// increment or decrement index
if ( direction == "+" ) {
index++;
} else {
index--;
}
// reverse direction if we are at the beginning or end of the animation
if (index == numberOfSteps) {
direction = "-";
timeOutDuration = 10000;
} else if ( index == -1 ) {
direction = "+";
timeOutDuration = 750;
}
$('#' + idOfAnimatedDiv ).css('backgroundPosition', '0px -' + steps[index] + 'px');
setTimeout(arguments.callee, timeOutDuration);
}, 1000);
})(jQuery);
</script>
</head>
<body>
<div id="sports-gloves-container">
<div id="golf-glove"></div>
</div>
<div id="sports-gloves-container">
<div id="bike-glove"></div>
</div>
</body>
</html>
Well, you are trying to use an array of ids there, so you need to make the transition for both ids. Change this:
for(var j=0;j<idOfAnimatedDiv.length;j++){
$('#' + idOfAnimatedDiv[j] ).css('backgroundPosition', '0px -' + steps[index] + 'px');
}