Changing table data using javascript with innerHTML

Question

I am trying out one basic scenario where I want to change td content using javascript by means of innerHTML.

<html>
<head>
    <script>
            function changeContent(obj) {
                var elem = obj.name;
                //alert("obj : "+obj.name);
                alert("before : "+document.getElementById("mainContent").innerHTML);
                document.getElementById("mainContent").innerHTML = "wow";
                alert("after : "+document.getElementById("mainContent").innerHTML);
                /*
                if(elem == "home") {
                } else if (elem == "careers") {
                } else if (elem == "policies") {
                } else if (elem == "contactus") {
                } else if (elem == "feedback") {
                } else {
                }
                */
            }
    </script>
</head>

<table class="frame" border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">

    <tr style="background-color : #87ceeb">
        <td height="100" class="frameTop" colspan="2">
            <h1><center>EMBLEM IS HERE<center></h1>
        </td>
    </tr>

    <tr rowspan="0">
        <td width="20%" class="frameCenter" >
            <form>
                <a href="" name="home" onclick="changeContent(this)">Home</a><br/>
                <a href="" name="careers" onclick="changeContent(this)">Careers</a><br/>
                <a href="" name="policies" onclick="changeContent(this)">Policies</a><br/>
                <a href="" name="contactus" onclick="changeContent(this)">Contact Us</a><br/>
                <a href="" name="feedback" onclick="changeContent(this)">Feedback</a><br/>
            </form>
        </td>
        <td  class="frameCenter" id="mainContent">
        </td>
    </tr>

    <tr>
        <td height="10" class="frameBottom" colspan="2">
            Bottom area
        </td>
    </tr>

</table>
</html>

I am able to see that it is changing, but the value is not retaining as such.

What is my mistake ?

When you say "the value is not retaining as such", what do you mean? Is the "after" not showing the new value? — Ann L.
– Ann L., Commented Jul 11, 2015 at 12:31
It is showing the right value. but, then again the mainContent is changing to empty string. — Dinesh
– Dinesh, Commented Jul 11, 2015 at 12:32
Setting up a demo at jsfiddle.com might catalyze folks' interest in helping you diagnose the problem. — matty
– matty, Commented Jul 11, 2015 at 12:37

kdlcruz · Accepted Answer · 2015-07-11 12:39:38Z

Your code seems not working because after clicking the anchor tag your page was reloaded. Try the code below. I just added href="#"

<html>
<head>
    <script>
            function changeContent(obj) {
                var elem = obj.name;
                //alert("obj : "+obj.name);
                alert("before : "+document.getElementById("mainContent").innerHTML);
                document.getElementById("mainContent").innerHTML = "wow";
                alert("after : "+document.getElementById("mainContent").innerHTML);
                /*
                if(elem == "home") {
                } else if (elem == "careers") {
                } else if (elem == "policies") {
                } else if (elem == "contactus") {
                } else if (elem == "feedback") {
                } else {
                }
                */
            }
    </script>
</head>

<table class="frame" border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">

    <tr style="background-color : #87ceeb">
        <td height="100" class="frameTop" colspan="2">
            <h1><center>EMBLEM IS HERE<center></h1>
        </td>
    </tr>

    <tr rowspan="0">
        <td width="20%" class="frameCenter" >
            <form>
                <a href="#" name="home" onclick="changeContent(this)">Home</a><br/>
                <a href="#" name="careers" onclick="changeContent(this)">Careers</a><br/>
                <a href="#" name="policies" onclick="changeContent(this)">Policies</a><br/>
                <a href="#" name="contactus" onclick="changeContent(this)">Contact Us</a><br/>
                <a href="#" name="feedback" onclick="changeContent(this)">Feedback</a><br/>
            </form>
        </td>
        <td  class="frameCenter" id="mainContent">
        </td>
    </tr>

    <tr>
        <td height="10" class="frameBottom" colspan="2">
            Bottom area
        </td>
    </tr>

</table>
</html>

Shame on me!. Such a Silly mistake. :(. Thank you so much. :)

Collectives™ on Stack Overflow

Changing table data using javascript with innerHTML

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related