CODEWITHSUNDEEP
javascripthtml
aguy90321
aguy90321

Reputation: 3

javascript code not running, blank page on browser

I have made a novice mistake I am sure, but for the life of me I cannot make anything show up on this code, they are saved in the same directory on my comp and I can view the file and html on view source in chrome but nothing comes up on jsFiddle?

It said I need more details to submit this question. I'm not sure what else to write accept that this is a great example of my foolish code technique of writing a bunch of stuff and expecting it to do anything remotely right :/


<!doctype html>

<html lang="en">
<head>
 <meta charset="utf-8">

 <title>290 index file</title>
 <meta name="description" content="The HTML5 Herald">
 <meta name="author" content="SitePoint">



</head>

<body>
 <script src="./script.js"></script>
</body>
</html>



function tableMaker(){
   var d1 = document.createElement("div");
   var t = document.createElement("table");
   document.getElementById("body").appendChild(d1);
   document.getElementById("d1").appendChild(t);
   var tr1 = document.createElement("tr");
   document.getElementById("tr1").appendChild(t); 
   for(var i = 1; i < 5; i++){
       var newth = document.createElement("th");   
       newth.id = i;
       newth.textContent = "Header " + i ; 
       tr1.appendChild(newth);}

   var tr2 = document.createElement("tr");
   document.getElementById("tr2").appendChild(t); 

   for(var i = 1; i < 5; i++){
       var newth = document.createElement("td");
       newth.id = i;
       newth.textContent = "1, " + i ; 
       tr2.appendChild(newth);}

   var tr3 = document.createElement("tr");
   document.getElementById("tr3").appendChild(t); 

   for(var i = 1; i < 5; i++){
       var newth = document.createElement("td");
       newth.textContent = "2 " + i ; 
       newth.id = 4+i;

       tr3.appendChild(newth);}

   var tr4 = document.createElement("tr");
   document.getElementById("tr4").appendChild(t);  
   for(var i = 1; i < 5; i++){
       var newth = document.createElement("td");
       newth.id = 8+i;
       newth.textContent = "3 " + i ; 
       tr4.appendChild(newth);}
}



function moveUp(x){
if (x>=5)
{
   document.getElementById(x).style.borderWidth = "medium";
   x -=4;
   document.getElementById(x).style.borderWidth = "thick";
}
}
function moveDown(x){
if (x<9)
{
   document.getElementById(x).style.borderWidth = "medium";
   x -=4;
   document.getElementById(x).style.borderWidth = "thick";
}
}function moveLeft(x){

 if (x!=1 ||x!=5 ||x!=9 )
 {
   document.getElementById(x).style.borderWidth = "medium";
   x--;
   document.getElementById(x).style.borderWidth = "thick";
 }

}
function moveRight(x){
if (x!=4 ||x!=8 ||x!=12 ) {
   document.getElementById(x).style.borderWidth = "medium";
   x++;
   document.getElementById(x).style.borderWidth = "thick";
}
}

function markCell(x){
   document.getElementById(x).style.backgroundColor = "yellow"; }

tableMaker();
var d2 = document.createElement("div");
document.getElementById("body").appendChild(d2);
var up = document.createElement("button");
var down =document.createElement("button");
var left =document.createElement("button");
var right =document.createElement("button");
var mark = document.createElement("button");
document.getElementById("d1").appendChild(up);
document.getElementById("d1").appendChild(down);
document.getElementById("d1").appendChild(left);
document.getElementById("d1").appendChild(right);
document.getElementById("d1").appendChild(mark);

var x = 1;
document.getElementById(x).style.borderWidth = "thick";

up.textContent = "up";
down.textContent="down";
right.textContent="right";
left.textContent="left";
mark.textContent="Mark Cell"; 
document.getElementById("up").addEventListener("click", moveUp);
document.getElementById("down").addEventListener("click",moveDown);
document.getElementById("left").addEventListener("click", moveLeft);
document.getElementById("right").addEventListener("click",moveRight);
document.getElementById("mark").addEventListener("click", markCell);

Upvotes: 0

Views: 899

Answers (2)

Marcell Toth
Marcell Toth

Reputation: 3688

welcome to StackOverflow! Great job for providing a Minimal, Complete, Verifiable example.

You have multiple issues related to document.getElementById.

Check its documentation, see that this only works for html elements that have their id attribute set to something.

  • For example this looks for any element that has its id set to 'body'. document.getElementById("body"). Getting the body element is easy: use document.body simply.
  • Same with document.getElementById("tr1"). No element has the id tr1, tr1 is the name of the variable that contains the element. The fix is simple, use tr1 itself, you don't need to look it up: tr1.appendChild(t);. Same with d1.appendChild(t);

But those appendChild's logic are messed up.

You are appending the table to the tr, you want to do the opposite. It's reallyt.appendChild(tr1); instead of tr1.appendChild(t);.

You have duplicate ID's.

HTML element IDs need to be globally (page) unique. It looks like you tried to fix it in the third and fourth row (by adding 4 and 8) but the first two rows still collide. If you need those IDs I would prefix them with the name / index of the row. Remember that IDs are strings in HTML. Do for example newth.id = "TH"+i;

How to find errors by yourself

I found the document.getElementById errors really quickly using Chrome Dev Tools. Just look at the Console Tab: enter image description here

You should familiarize yourself with the Dev Tools, it can save an enormous amount of time when debugging.

Upvotes: 1

Max
Max

Reputation: 799

I think it does not render because you made a lot of mistakes in your code, some examples:

document.getElementById("body").appendChild(d1);

You are trying get elemen by ID which does not exist, or another example:

var d1 = document.createElement("div");

You created div element and then you are trying get it by id, like that:

document.getElementById("d1").appendChild(t);

For getting element by ID you firstly need set ID via setAttribute('id', 'nameID'):

d1.setAttribute('id', 'nameID')

After that you can get element by id

Upvotes: 0

Related Questions