CODEWITHSUNDEEP
javascriptonclick
Noam Gal
Noam Gal

Reputation: 1164

changing the value of "onclick" of a td from javascript

I am trying to change the value of "onclick" of a td from a function in javascript. I've tried everything i can think of and i've searched it on the internet but nothing worked, exept from this code below, but the problem with it is that it's executing what i want the value of onclick to be instead of changing it.

<div align="center" id="bodyC">
<table width="800" height="410">
<td class="bodyCC">
    <table id="MYtable" class="MYtable" border="0" width="100%" height="100%" cellpadding="50">
    <td id="one" class="one" onclick=""></td>
    <td id="two" class="two" onclick=""></td>
    <td id="three" class="three" onclick=""></td>
    </table>
</td>
</table>
</div>


function download()
{
<!-- this function is called when the "Download" button on the website's menu is pressed, and is soppused to change the "body" table so when the sells are clicked an alert will pop.-->
document.getElementById('one').onclick=alert("A..!");
document.getElementById('two').onclick=alert("B..!");
document.getElementById('three').onclick=alert("C..!");
}

any help?

p.s. there are no errors.

Upvotes: 2

Views: 24334

Answers (1)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382264

When you write 

document.getElementById('one').onclick=alert("A..!");

you set as onclick handler the the returned value of alert("A..!") : it's undefined. So this can't work.

What you need is a function definition : 

document.getElementById('one').onclick = function() {alert("A..!");};

Alternatively, you could have :

function myfunc() {
    alert("A..!");
} 
document.getElementById('one').onclick = myfunc;

But it's fine to write anonymous function definitions, as it keeps the code in the place where it is used and thus is often cleaner.

You also need to have you javascript inside a script element :

<script>
    document.getElementById('one').onclick = function() {alert("A..!");};
    document.getElementById('two').onclick = function() {alert("B..!");};
    document.getElementById('three').onclick = function() {alert("C..!");};
</script>

Here is a complete, fixed, tested version of your page :

<div align="center" id="bodyC">
<table width="800" height="100"><tr>
<td class="bodyCC">
    <table id="MYtable" class="MYtable" border="0" width="100%" cellpadding="50"><tr>
    <td id="one" class="one" onclick="">ONE</td>
    <td id="two" class="two" onclick="">TWO</td>
        <td id="three" class="three" onclick="">THREE</td></tr>
    </table>
    </td></tr>
</table>
    <span onclick="download();">CLICK HERE</span>
</div>
<script>
// this function is called when the "Download" button on the website's menu
// is pressed, and is soppused to change the "body" table so when the sells
// are clicked an alert will pop.
function download() {
   document.getElementById('one').onclick=function(){alert("A..!");};
   document.getElementById('two').onclick=function(){alert("B..!");};
   document.getElementById('three').onclick=function(){alert("C..!");};
} 
</script>​​​​​​​​​​

(I fixed also the HTML comments, and the missing tr)

You can click test it here : click on "CLICK HERE" to activate the ability to click on the three other sections (one, two, three).

Upvotes: 8

Related Questions