Блог

Главная - Вопросы по программированию - Ошибка отображения элемента div, когда пользователь нажимает на кнопку

Ошибка отображения элемента div, когда пользователь нажимает на кнопку

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

Я пишу веб-страницу, и мне нужно отобразить 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>

Спасибо,

Бруно

Ответ №1:

Возможно, потому, что вызывается функция, traverse() и вы вызываете traverse_tree() ?

Комментарии:

1. Не стоит. Я делал подобные вещи много раз. Такую ошибку легко совершить.

Ответ №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'));