PDA

View Full Version : Resolved Get cell value, javascript.



keyboard
05-22-2012, 02:07 AM
Hello All,



<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 &nbsp;
Any help???

ApacheTech
05-22-2012, 02:54 AM
Try:



<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 -

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

Also, I don't just want it to alert &nbsp; 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)


<!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:


<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??? -

<!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.


<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!