Get cell value, javascript.

**keyboard** · 05-22-2012, 02:07 AM

Hello All,

Code:

<script type="text/javascript">
var mouseStick = "false";
var selectedSquare;
function selected(elem) {
	selectedSquare = document.getElementById(elem);
	alert(selectedSquare.innerText);
}
</script>

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="w" id="1" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="2" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="3" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="4" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="5" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="6" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="7" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="8" onclick="selected(this)">&nbsp;</td>
  </tr>
</table>

I want it to alert  
Any help???

**ApacheTech** · 05-22-2012, 02:54 AM

Try:

PHP Code:


<script type="text/javascript">
var mouseStick = "false";
var selectedSquare;
function selected(elem) {
    selectedSquare = document.getElementById(elem);
    alert(selectedSquare.innerHTML.replace(/\s/g, '&nbsp;'));
}
</script>

EDIT: If you want to just alert whatever is in the element, use alert(selectedSquare.innerHTML);

**keyboard** · 05-22-2012, 02:56 AM

IE9 - debug window -

Code:

SCRIPT5007: Unable to get value of the property 'innerHTML': object is null or undefined

Also, I don't just want it to alert   I want it to alert the contents of the cell... (sorry if there was confusion)

Thanks!

**keyboard** · 05-22-2012, 02:57 AM

Actually - (FULL SOURCE)

Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table {
	border:solid 1px black;
}
td {
	width:60px; 
	height:60px;
}
td.w {
	background-color:white;
	color:black;
	text-align:center;
}
td.b {
	background-color:black;
	color:white;
	text-align:center;
}
</style>
<script type="text/javascript">
var mouseStick = "false";
var selectedSquare;
function selected(elem) {
    selectedSquare = document.getElementById(elem);
	alert(selectedSquare.innerHTML); 
}
function checkIfMove() {
	if(mouseStick != "false" && selected.innerHTML == "&nbsp;") {
		selected.innerHTML = moustStick;
		mouseStick = "false";
	}
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="w" id="1" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="2" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="3" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="4" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="5" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="6" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="7" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="8" onclick="selected(this)">&nbsp;</td>
  </tr>
  <tr>
    <td class="b" id="9" onclick="selected(this)"><span class="pawn">Pawn</span></td>
    <td class="w" id="10" onclick="selected(this)"><span class="pawn">Pawn</span></td>
    <td class="b" id="11" onclick="selected(this)"><span class="pawn">Pawn</span></td>
    <td class="w" id="12" onclick="selected(this)"><span class="pawn">Pawn</span></td>
    <td class="b" id="13" onclick="selected(this)"><span class="pawn">Pawn</span></td>
    <td class="w" id="14" onclick="selected(this)"><span class="pawn">Pawn</span></td>
    <td class="b" id="15" onclick="selected(this)"><span class="pawn">Pawn</span></td>
    <td class="w" id="16" onclick="selected(this)"><span class="pawn">Pawn</span></td>
  </tr>
  <tr>
    <td class="w" id="17" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="18" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="19" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="20" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="21" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="22" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="23" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="24" onclick="selected(this)">&nbsp;</td>
  </tr>
  <tr>
    <td class="b" id="25" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="26" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="27" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="28" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="29" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="30" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="31" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="32" onclick="selected(this)">&nbsp;</td>
  </tr>
  <tr>
    <td class="w" id="33" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="34" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="35" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="36" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="37" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="38" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="39" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="40" onclick="selected(this)">&nbsp;</td>
  </tr>
  <tr>
    <td class="b" id="41" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="42" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="43" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="44" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="45" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="46" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="47" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="48" onclick="selected(this)">&nbsp;</td>
  </tr>
  <tr>
    <td class="w" id="49" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="50" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="51" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="52" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="53" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="54" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="55" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="56" onclick="selected(this)">&nbsp;</td>
  </tr>
  <tr>
    <td class="b" id="57" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="58" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="59" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="60" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="61" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="62" onclick="selected(this)">&nbsp;</td>
    <td class="b" id="63" onclick="selected(this)">&nbsp;</td>
    <td class="w" id="64" onclick="selected(this)">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Ignore the checkIfMove() function.

EDIT- I did what you suggested ( alert(selectedSquare.innerHTML); ). Same problem.

**ApacheTech** · 05-22-2012, 03:03 AM

Found it:

Code:

<script type="text/javascript">
var mouseStick = "false";
var selectedSquare;
function selected(obj) {
    alert(obj.innerHTML);
}
</script>

When passing "this" to a function, the function automatically refers to the passed argument as an object.

This should hopefully work.

**keyboard** · 05-22-2012, 03:06 AM

Yes that works, but one question...

How come this works then??? -

Code:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function clickedMe(elem) {
	alert(elem.innerHTML);
}
</script>
</head>
<body>
<div onclick="clickedMe(this)">Hello</div>
</body>
</html>

**ApacheTech** · 05-22-2012, 03:15 AM

Because elem is merely a variable name.

Code:

<script type="text/javascript">
function clickedMe(myVeryLongAndStupidlyTitledVariable) {
	alert(myVeryLongAndStupidlyTitledVariable.innerHTML);
}
</script>

Would still work. It's the variable's type that matters.

var e = document.getElementById('id'); only works where 'id' is a string. e becomes an object that refers to the element you want, as defined in the string input.

**keyboard** · 05-22-2012, 03:21 AM

Ahhhh, I get it *facepalm*
Thanks ApacheTech!

Thread: Get cell value, javascript.

Thread Tools

Search Thread

Get cell value, javascript.

Bookmarks

Bookmarks

Posting Permissions