#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    12
    Rep Power
    0

    Things about document.getElementById


    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:

    Code:
    <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 function

    because if i have 50 elements then i may need to have 50 same functions to do it lol

    Many thanks
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    You mean something like this?

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function handleRightClick(tag,tagKey,innerContent)
    {
    tagKey = tagKey - 1;
    document.getElementById("test").getElementsByTagName(tag)[tagKey].innerHTML = innerContent;
    }
    </script
    </head>
    <body>
    
    <table id="test" oncontextmenu="handleRightClick('td','1','123123'); return false;">
    
    <tr>
    <td>A</td>
    </tr>
    
    <tr>
    <td>B</td>
    </tr>
    
    <tr>
    <td>C</td>
    </tr>
    
    </body>
    </html>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    12
    Rep Power
    0
    Originally Posted by web_loone08
    You mean something like this?
    No, my friend your code doesn't work
    but Thanks for help. Anyway let's said this, i have my table which wrote in javascript


    Code:
    document.write('<table>');
    //Creates Tabledocument.write('<table>');
    //for loop that creates the row, increments from 0 to 9 each time it reiterates
    for (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 it
    so i try this code to test it:

    Code:
    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 them
    and the cell he select will have an image appear
    i had plan to loop throught the whole table
    but i realize if i do so, when the user click once
    everything cell will appear an image, not only the selected cell.

    Many thanks
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    No, my friend your code doesn't work
    Actually with the original code and idea, that you presented... my code worked just fine.





    But anyway... I think this is what you were wanting:

    Code:
    <style>
    td {
    width:28px;
    height:32px;
    }
    </style>
    
    <script>
    function handleRightClick(trNum,tdNum)
    {        
            document.getElementById('r'+trNum+'c'+tdNum).innerHTML = '<img src="minesweeper_tiles.png" width="28px" height="28px" alt="Automine" />';
    }
    
    document.write('<table border=1 oncontextmenu="return false">');
    //Creates Tabledocument.write('<table oncontextmenu="return false">');
    //for loop that creates the row, increments from 0 to 9 each time it reiterates
    for (var row=0; row<9; row++) {
        document.write('<tr oncontextmenu="return false">');
        //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(\''+row+'\',\''+col+'\'); return false;">');
            document.write('</td>');
        }
        document.write('</tr>');
    }
    document.write('</table>');
    </script>
    PS: I added some basic style and a border attribute to your table; so you could see the demo properly. You can remove it; as you need to. Plus I added a "oncontentmenu" inline event to all the elements in your table; otherwise the menu would have appeared anyway. You just had it set to return false; on the "td" element(s) and it would have appeared anyway, because the "<table>" element(s) and the <tr> element(s) are the parent elements. Again though... you can change it back; if you want to.

IMN logo majestic logo threadwatch logo seochat tools logo