2015-08-16 3 views
1

Моя программа javascript в основном создает серию изображений и случайным образом выбирает один и устанавливает свой src на определенный путь. Однако по какой-то причине код иногда застрял. В моей программе я вызываю element.parentNode одного из изображений, чтобы окружить его тегом привязки, но он вызывает ошибку в консоли, заявив, что он не может получить свойство «parentNode» неопределенной или нулевой ссылки, несмотря на то, что что иногда код фактически выполняется иногда без каких-либо изменений кода. Я должен обновлять несколько раз, прежде чем мне посчастливится, чтобы ошибка не была выбрана, а остальная часть кода выполнялась плавно. Вот мой код:Невозможно получить свойство «parentNode» неопределенной или нулевой ссылки

var id = generateRandom(325); 
var el = document.getElementById(id.toString()); 
var anchor = document.createElement("a"); 
var nextPage = "level" + (level + 1).toString() + ".html"; 
if (level == 3) { 
    nextPage = "win.html"; 
} 
anchor.setAttribute("href", nextPage); 
el.parentNode.insertBefore(anchor, el); // line 54 

Ошибка:

SCRIPT5007: Unable to get property 'parentNode' of undefined or null reference 
scripts.js (54,2) 

EDIT: обновляется целая функция

var div = document.getElementById("images"); 
var time = parseInt(document.getElementsByClassName("timer")[0].innerHTML); 
var level = getLevel(time); 
var rows = 13; 
var cols = 23; 
for (var i = 1; i <= rows; i++) { 
    var marquee = document.createElement("marquee"); 
    marquee.setAttribute("scrollamount", 30); 
      for (var j = 1; j <= cols; j++) { 
     var img = document.createElement("img"); 
     img.setAttribute("src", getPath()); 
     img.setAttribute("id", (i * j).toString()); 
     img.setAttribute("width", "80px"); 
     img.setAttribute("height", "70px"); 
     marquee.appendChild(img); 
    } 
    div.appendChild(marquee); 
} 
var id = generateRandom(rows * cols); 
var el = document.getElementById(id.toString()); 
var anchor = document.createElement("a"); 
var nextPage = "level" + (level + 1).toString() + ".html"; 
if (level == 3) { 
    nextPage = "win.html"; 
} 
anchor.setAttribute("href", nextPage); 
el.parentNode.insertBefore(anchor, el); 
var input = document.createElement("input"); 
input.setAttribute("type", "image"); 
input.setAttribute("width", "80px"); 
input.setAttribute("height", "70px"); 
input.setAttribute("src", "resources\\asotigue.jpg"); 
el.parentNode.replaceChild(input, el); 
anchor.appendChild(input); 

generateRandom функция:

function generateRandom(n) { 
    return Math.floor((Math.random() * n) + 1); 
} 
+2

Очевидно, что функция 'generateRandom()' иногда возвращает идентификатор, который не существует в вашей DOM. – slash197

ответ

0

Редактировать сейчас, когда вы указали больше кода: Вы генерируете 13 * 23 = 299 элементов, но выбираете случайный элемент до 325, поэтому иногда вам не хватает элементов для случайного выбора.


Итак, что этот код говорит вам, что переменная el является undefined или null. Есть несколько причин, почему это может быть:

  1. Ваш generateRandom(325) генерирует значение идентификатора, которое не присутствует на странице.

  2. Вы вызываете document.getElementById(id.toString()); до того, как страница закончит загрузку и разбор, и поэтому некоторые элементы страницы еще не представлены. Ваш скрипт не должен запускаться до тех пор, пока страница не будет загружена, переместив его в конец <body> или не дожидаясь, пока не закончится событие DOMContentLoaded.

FYI, если ваш вопрос является вторым, вы можете прочитать о различных решений, используя обычный Javascript здесь pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it.


Если вы знаете, что иногда generateRandom(325) подберет элемент идентификатор, который не на странице, и вы хотите, чтобы позволить, но защищаться от него остановить выполнение кода, то вы можете просто проверить для этого условия:

var id = generateRandom(325); 
var el = document.getElementById(id.toString()); 
var anchor = document.createElement("a"); 
var nextPage = "level" + (level + 1).toString() + ".html"; 
if (level == 3) { 
    nextPage = "win.html"; 
} 
anchor.setAttribute("href", nextPage); 
if (el) { 
    el.parentNode.insertBefore(anchor, el); 
} 

Чтобы помочь вам отследить вашу случайную ошибку, сразу после этого:

var id = generateRandom(rows * cols); 
var el = document.getElementById(id.toString()); 

Вы можете добавить дополнительный код отладки:

// add this to detect what situation you get a missing element 
if (!el) { 
    console.log("did not find id when: rows = " + rows + ", cols = " + cols"); 
} 
+0

все элементы, которые я ищу, на самом деле генерируются самим кодом JavaScript, поэтому эти элементы должны присутствовать к моменту запуска определенного кода. – JavaFanatic

+0

@JavaFanatic - я не сомневаюсь, что они должны быть доступны из вашего другого кода , но, очевидно, что-то не так, или 'el' не будет' null'. Возможно, в вашем другом коде есть ошибка, которая не генерирует все, что вы считаете, или не вставляет их все в DOM, чтобы их можно было найти с помощью 'document.getElementById()'. – jfriend00

+0

Спасибо. :) Я понимаю, что у моего кода была ошибка и что это связано с просчетом. Я изменил его так, что верхний предел случайного числа фактически задан столбцами строк *, а не фиксированным номером. – JavaFanatic

0

Этот метод будет собрать все идентификаторы на элементы с определенным классом можно ознакомиться на странице прямо сейчас, и будет возвращать один из идентификаторов в случайном порядке.

Вы можете увидеть это на работе в этом fiddle. Проверьте консоль.

function getIdsListByClassName(className) { 
    var elements = document.querySelectorAll('[id].' + className); // get all items that have the id attribute and the defined class name 

    var ids = Array.prototype.slice.call(elements, 0).map(function (element) { 
     return element.getAttribute('id'); 
    }); // convert the elements list to array, and map it to ids 

    var currentIndex = Math.floor(Math.random() * ids.length); // get an index between 0 and ids.length - 1 

    return ids[currentIndex]; 
} 
Смежные вопросы