Question

我正在尝试一种基本方案，我希望通过td使用javascript更改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>

我能够看到它正在发生变化，但价值并未保留。

我的错误是什么？

Answer 1

您的代码似乎无法正常工作，因为点击锚标签后您的网页已重新加载。请尝试下面的代码。我刚刚添加了href =＆＃34;＃＆＃34;

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

使用带有innerHTML

1 个答案: