0

我现在正在学习 JavaScript，并且一直在玩一些简洁的东西。我设法编写了一个使盒子变大的函数。在过去的半小时里，我一直在尝试在它增长后在框中获取一些文本。

我尝试使用 InnerHTML 方法，但无论我把它放在哪里（我知道我引用了正确的元素）都不会出现任何文本（颜色没问题，不是不可见的颜色问题）。

更奇怪的是，如果我使用 InnerHTML 将 HTML 放入其中，盒子根本不会增长。例如，我尝试放入，target.InnerHTML = "<p style="text-align:center"> It is <b> Done </b><p>";但单击按钮时框不会变大。

所以我想知道的两件事是如何让文本在文本增长后出现在框中，如果我放入 HTML，为什么它不会增长？

<html>

    <head>
        <style type="text/css">
        body {
            color: blue;
            width: 300px;
        }
        #a{ 
            color: green;
            padding: 10pt;
            background-color: blue;
            height: 200;
        }
        </style>
        <script type="text/javascript">
        var newSetting = 200;
        function growLonger(element){
            target = document.getElementById(element);
            target.style.height = newSetting;
            target.style.width = newSetting;
            newSetting = newSetting +20;

            if (newSetting == 500){
                clearTimeout(loopTimer);
                return false;
            }
            var loopTimer = setTimeout('growLonger(\''+element+'\')',50);
                target.InnerHTML = "<p style="text-align:center"> It is <b> Done </b><p>";
        }
        </script>
        <title>"Test</title>
    </head>

    <body>
    <p>Hi How are you?</p>
    <button onclick="growLonger('a')"> Grow Height </button>
    <div id="a">More text?</div>
    </body>

    </html>
4

1 回答 1

1 
target.InnerHTML = "<p style="text-align:center"> It is <b> Done </b><p>";

innerHTML is innerHTML and not InnerHTML(camel casing)

This should work: 

target.innerHTML = "...";
于 2013-02-11T04:36:40.473 回答