Почему мой код JS / DOM не отображает содержимое? - PullRequest
Новая
       1

Почему мой код JS / DOM не отображает содержимое?

2 голосов
/ 28 ноября 2011 
<!DOCTYPE html>
<html>
<head>
<title>My test</title>
<style>

    .img {
            display:inline-block;
            border:dotted;
        }
        .button {
            display:inline-block;
            border:dotted;
        }
</style>
<script>
    //Loads all the elements and assigns event handlers
    function load()
    {
        var root = document.getElementById("body");

        var test = document.createElement("div");
        test.setAttribute("class", "button");
        test.setAttribute("id", "p");
        test.innerHTML = "Prev"
        root.appendChild(test);

        var test = document.createElement("div");
        test.setAttribute("class", "main");
        test.innerHTML = "Anne"
        root.appendChild(test);

        var test = document.createElement("div");
        test.setAttribute("class", "main");
        test.innerHTML = "Anise"
        root.appendChild(test);

        var test = document.createElement("div");
        test.setAttribute("class", "main");
        test.innerHTML = "Anna"
        root.appendChild(test);

        var test = document.createElement("div");
        test.setAttribute("class", "button");
        test.setAttribute("id", "n");
        test.innerHTML = "Next"
        root.appendChild(test);
    }
    document.addEventListener("DOMContentLoaded", load, false)
</script>
</head>
<body>
</body>
</html>

Это ничего не производит на странице! Почему?

Ответы [ 4 ]

2 голосов
/ 28 ноября 2011

Вы ищете элемент DOM с атрибутом id, равным body, когда вы действительно хотите получить тег body. 

// Instead of
var root = document.getElementById("body");

// Try:
var root = document.body;

Вы также можете добавить атрибут id в <body> пометьте как <body id='body'> без необходимости изменения вашего JavaScript, но это кажется неуместным.Измените ваш сценарий так, чтобы вместо него использовалось document.body.

Обновление

Вы перезаписываете свойство innerHTML btnPrev в каждой группе строк.Мы не видим, где btnPrev даже определяется в вашей разметке.Возможно, каждый раз, когда вы определяете var test, вы намереваетесь определить btnPrev?

1 голос
/ 28 ноября 2011

Вы должны изменить имя переменных, используемых в функции load ().Вы храните ссылки DOM в переменной test, но (test) она не используется для установки значений атрибутов. 

 var btnPrev = document.createElement("div");
 btnPrev.setAttribute("class", "button");
 btnPrev.setAttribute("id", "p");
 btnPrev.innerHTML = "Prev"
 root.appendChild(btnPrev);

РЕДАКТИРОВАТЬ: 

 function load()
    {
        var root = document.body;
        var test = document.createElement("div");
        test.setAttribute("class", "button");
        test.setAttribute("id", "p");
        test.innerHTML = "Prev"
        root.appendChild(test);

        var test = document.createElement("div");
        test.setAttribute("class", "main");
        test.innerHTML = "Anne"
        root.appendChild(test);

        var test = document.createElement("div");
        test.setAttribute("class", "main");
        test.innerHTML = "Anise"
        root.appendChild(test);

        var test = document.createElement("div");
        test.setAttribute("class", "main");
        test.innerHTML = "Anna"
        root.appendChild(test);

        var test = document.createElement("div");
        test.setAttribute("class", "button");
        test.setAttribute("id", "n");
        test.innerHTML = "Next"
        root.appendChild(test);
    }
1 голос
/ 28 ноября 2011

Когда я запустил это через отладчик IE, я получил: 'btnPrev' не определено.

0 голосов
/ 28 ноября 2011

Следующее изменение - все, что мне нужно для вашего (обновленного) кода, чтобы он работал в Firefox: 

var root = document.body;

(Или присвойте идентификатор элементу тела, в любом случае.)

После этого возникает вопрос: «С каким браузером вы тестируете?»

Это не будет работать в IE до версии 9, потому что более старые версии IE не поддерживают .addEventListener() или DOMContentLoaded событие.

В IE7 у меня работало следующее (единственная версия IE, с которой я должен тестировать): 

if (document.addEventListener)
  document.addEventListener('DOMContentLoaded', load, false);
else if (window.attachEvent)
  window.attachEvent('onload',load);
else
  window.onload = load;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...