Question

我正在编写一个网页，当用户点击按钮时，我需要显示包含某些内容的div。我写了下面的代码，我不明白为什么它不起作用。有人知道为什么吗？

我的代码：

  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso 8859-1" />

    <script type="text/javascript">

    function traverse(){
        output.innerHTML+='Test'; // Nothing happens !
    }

          function check() {
            var keywords = document.getElementById('text').value.split(" ");

            for (var i=0; i < keywords.length; ++i) {
                traverse_tree()    
            }
          }


    </script>


  </head>
  <body onload ="init()">
        <input id="text" type="text" size="60" value="Type your keywords here" />
        <input type="button" value="Display the text 'Test'" onclick="check();" />      

        <div id="output">
        </div>

  </body>
  </html>

感谢，

布鲁诺

Answer 1

也许是因为该函数被称为traverse()并且您正在调用traverse_tree()？

Answer 2

此外，在方法traverse中，您应该使用document.getElementById('output')获取元素，而不是使用（未定义的）变量output：

即：

function traverse(){
  document.getElementById('output').innerHTML+='Test'; 
}

您还可以通过缓存节点来加快速度（避免每次单击按钮时调用getElementById）：

// Create a closure by wrapping the cached node in a self-executing
// function to avoid polluting the global namespace
var traverse = (function (nodeId) {

  // Cache the node to be updated here
  var node = document.getElementById(nodeId);

  // This is the function that "traverse()" will call. Return this function,
  // which will assign it to the variable traverse.
  return function () {
    node.innerHTML += 'test';
  };

// Execute the function with the id of the node to cache, i.e. output
}('output'));

用户单击按钮时显示div元素的错误

2 个答案: