Onclick functions, innerHTMLs and creating tables

Question

So here's the code:

window.onload=function(e){
//Created by Firestar001
	var X;
	var Y;
	
	var board="";
	
	var rizzalt=document.getElementById("rezzalt");
	
	var letters = new Array;
	letters = ["A","B","C","D","E","F","G","H","I","J"];
	
	for(a=0; a<=9; a++){
	board+="<tr>";
		for(b=1;b<=14; b++)
	{
		board+="<td id=/'"+ letters[a] +  b +"/' onClick=/'AreaCode()/'>" + letters[a]+b+"</td>";
	}
	board+="</tr>";
	}
	
	var Grade = document.getElementById('friend_water');
	Grade.innerHTML = board;
	}
	function AreaCode(){
	console.log("I work");
      rizzalt.innerHTML+="Works ";
	}

<table id="friend_water" border="1 solid black">jklol</table><p></p><p id="rezzalt"></p>

I've included the "rizzalt rezzalt" in there to provide a confirmation while using the code snippit thing on stackoverflow.

So it'll create a battleship grid, A-J, 1-14. What I want to happen is when a player clicks on a square (ex: C4), I want the console to say "I work" so.... I know it works. The table loads properly but when I click on a cell it gives me: Uncaught SyntaxError: Unexpected token ILLEGAL

Referencing to line 1 in the html which is the <!DOCTYPE html> line.

Thank you all for your help.

EDIT: SOLVED.

Thank you again all for your help. The code properly works and now I can get to work on more of my Battleship game.

This really needs a different title. The current one describes nothing about what the issue is, and won't be found by others who are experiencing the same problem. — Reinstate Monica -- notmaynard
– Reinstate Monica -- notmaynard, Commented Nov 21, 2014 at 21:52

Ammar · Accepted Answer · 2014-11-21 21:39:49Z

1

Please check this modified version of your code

var rizzalt=document.getElementById("rezzalt");
window.onload=function(e){
//Created by Firestar001
	var X;
	var Y;
	
	var board="";
	
	
	
	var letters = new Array;
	letters = ["A","B","C","D","E","F","G","H","I","J"];
	
	for(a=0; a<=9; a++){
	board+="<tr>";
		for(b=1;b<=14; b++)
	{
		board+="<td id='"+ letters[a] +  b +"' onClick='AreaCode()'>" + letters[a]+b+"</td>";
	}
	board+="</tr>";
	}
	
	var Grade = document.getElementById('friend_water');
	Grade.innerHTML = board;
	}
	function AreaCode(){
	console.log("I work");
      rezzalt.innerHTML+="Works ";
	}

<table id="friend_water" border="1 solid black">jklol</table><p></p><p id="rezzalt"></p>

answered Nov 21, 2014 at 21:39

Ammar

7096 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Firestar001 Over a year ago

So it seems I'd use "' '" to keep the quotations from mis-interpreting what's code and what's text. (Sorry if this doesn't make sense.) Again, thank you for your help.

Firestar001 Over a year ago

Just thought I'd comment on it in case someone else was looking at this so they won't be like "What's the difference?"

Ammar Over a year ago

when you use different type of quotations like " and ', you don't have to add escape character (there is no difference which one is outer or inner).But when you use same type you should add escape character before inner one like board+="<td id=\""+ letters[a] + b +"\" onClick=\"AreaCode()\">". and be aware to use same type.

ps2goat · Accepted Answer · 2014-11-21 21:30:55Z

Your escape character is wrong. It should be \, not /

window.onload=function(e){
//Created by Firestar001
	var X;
	var Y;
	
	var board="";
	
	var rizzalt=document.getElementById("rezzalt");
	
	var letters = new Array;
	letters = ["A","B","C","D","E","F","G","H","I","J"];
	
	for(a=0; a<=9; a++){
	board+="<tr>";
		for(b=1;b<=14; b++)
	{
       //error was below.  all escape slashes were the wrong slash.
		board+="<td id=\'"+ letters[a] +  b +"\' onClick=\'AreaCode()\'>" + letters[a]+b+"</td>";
	}
	board+="</tr>";
	}
	
	var Grade = document.getElementById('friend_water');
	Grade.innerHTML = board;
	}
	function AreaCode(){
	console.log("I work");
      rizzalt.innerHTML+="Works ";
	}

<table id="friend_water" border="1 solid black">jklol</table><p></p><p id="rezzalt"></p>

Alexis Peters · Accepted Answer · 2014-11-21 21:31:16Z

0

try that:

board+='<td id="' + letters[a] +  b + '" onClick="AreaCode()">' + letters[a]+b+'</td>';

answered Nov 21, 2014 at 21:31

Alexis Peters

1,6511 gold badge11 silver badges17 bronze badges

1 Comment

Josh Burgess Over a year ago

Please add an explanation as to why this code answers the asker's question.

Collectives™ on Stack Overflow

Onclick functions, innerHTMLs and creating tables

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related