Jump to content

Things about document.getElementById

Recommended Posts

I want to change something in a table when i click on it,so i create a onclick function,but i notice if i have a fucntion like this:

<html><head><script type="text/javascript">function handleRightClick(){document.getElementById("test").innerHTML="123123";}</script</head><body><table id="test" oncontextmenu="handleRightClick(this); return false;"><tr><td>A</td></tr><tr><td>B</td></tr><tr><td>C</td></tr></body></html>

when i click on it, it will change everything,how can i change all my elements sperate ?like when i click on A, only a will change. I want to know how to make it in one function,not create a new functionbecause if i have 50 elements then i may need to have 50 same functions to do it lol Many thanks

Link to post
Share on other sites

Take a look at this code. It's jQuery but it works pretty well.

<!DOCTYPE html><html lang=en><head><meta charset="utf-8"><!-- saved from url=(0014)about:internet --><title>localhost - Viewing a Kennel</title><link rel="stylesheet" href="/css/main.css" media="screen"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(function(){	$("td").on("contextmenu",function(){		$(this).text("123123");	});});  </script></head><body> <table id="test" >	<tr>		<td>A</td>	</tr> 	<tr>		<td>B</td>	</tr> 	<tr>		<td>C</td>	</tr></table> </body></html>

Hope this helps. Regards, Labtec.

Edited by Labtec
Link to post
Share on other sites

The innerHTML refers to every single thing that's between the <table> and </table> tags. There are other ways to access elements, besides getElementById(). I use getElementsByTagName() a lot. For example, to get all the table cells inside the table:

var cells = document.getElementById("test").getElementsByTagName("td");for(var i = 0; i < cells.length; i++) {    cells[i].innerHTML = "123";}

Link to post
Share on other sites

Thanks for help,but let's said this, i have my table which wrote in javascript

document.write('<table>');//Creates Tabledocument.write('<table>');//for loop that creates the row, increments from 0 to 9 each time it reiteratesfor (var row=0; row<9; row++) {    document.write('<tr>');    //a nested for loop that reiterates 9 times creating the <td>'s and then exits to the parent for loop.    for (var col=0; col<9; col++) {        document.write('<td id="r', row, 'c', col, '"oncontextmenu="handleRightClick(this); return false;">');        document.write('</td>');    }    document.write('</tr>');}document.write('</table>');

and now i want to put an image when user right click on itso i try this code to test it:

function handleRightClick(){                document.getElementById('r0c0').innerHTML = '<img src="minesweeper_tiles.png" width="28px" height="28px" alt="Automine" />';}

it works , but i want to let the user click on any of themand the cell he select will have an image appeari had plan to loop throught the whole tablebut i realize if i do so, when the user click onceeverything cell will appear an image, not only the selected cell. Many thanks

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...