Не могу прочитать свойство 'setAttribute' с нулевым значением - Javascript - PullRequest
Новая
       6

Не могу прочитать свойство 'setAttribute' с нулевым значением - Javascript

0 голосов
/ 17 января 2019

Я видел несколько вопросов, опубликованных здесь с этой ошибкой, и, увидев некоторые ответы, я заметил, что общее мнение состоит в том, что это вызвано тем, что DOM еще не создан.Я попробовал несколько различных решений, чтобы исправить это, например, переместить свой скрипт непосредственно перед тегом, используя выходные данные журнала до и после создания изображения, чтобы убедиться, что объект действительно создается правильно, но ничто не решило мою проблему.Я новичок в Javascript, так что может быть что-то очевидное, что мне не хватает? 

var dice = [6, 6, 6, 6, 6];

function rollDice() {
  for (var i = 0; i < dice.length; ++i) {
    var num = Math.floor(Math.random() * 6 + 1);
    dice[i] = 1;
    document.write(dice[i] + "<br>");
  }
  for (var i = 0; i < dice.length; ++i) {
    var value = dice[i];
    var path;
    var ArrayImage = ["images/dice 1.png", "images/dice 2.png", "images/dice 3", "images/dice 4.png", "images/dice 5.png", "images/dice 6.png"];
    path = ArrayImage[value];
  }
  document.getElementById("dice_1").setAttribute("src", path)
}
<html>

<head>

  <meta charset="utf-8">
  <title>Project 1</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <h1> This is a javascript application</h1>
  <script>
    console.log("script #1: %o", document.getElementById("dice_1")); // null
  </script>
  <div>
    <img id="dice_1" src="images/dice 1.png">
    <img id="dice_2" src="images/dice 1.png">
    <img id="dice_3" src="images/dice 1.png">
    <img id="dice_4" src="images/dice 1.png">
    <img id="dice_5" src="images/dice 1.png">
  </div>
  <input id="but" type="button" onclick="rollDice()" value="Roll Dice.">
  <script>
    console.log("script #1: %o", document.getElementById("dice_1")); // null
  </script>
  <script type="text/javascript" src="scripts/script.js"></script>
</body>

</html>

1 Ответ

0 голосов
/ 17 января 2019

Поскольку вы используете document.write после загрузки документа, он очищает весь документ (из-за того, что document.open () вызывается). Таким образом, ваши элементы img не существуют для setAttribute, который будет запущен против них. Попробуйте выполнить следующее (обратите внимание на исправления индекса, которые необходимы из-за индексации массива, начинающейся с нуля): 

var dice = [6,6,6,6,6];
var results;
var resultsContainer = document.querySelector('.results');

function rollDice(){
    // clear results array
    results = [];
    for(var i =0; i<dice.length; ++i){
        var num = Math.floor(Math.random()*6 +1);
        dice[i] = num;
        results.push(dice[i]);
    }
    for(var i =0; i< dice.length; ++i){
        var value = dice[i];
        var path;
        var ArrayImage = ["images/dice 1.png", "images/dice 2.png", "images/dice 3.png", "images/dice 4.png", "images/dice 5.png", "images/dice 6.png"];
        path = ArrayImage[value - 1];
        document.getElementById("dice_"+ (i + 1)).setAttribute("src",path);
    }
    // convert results array to text with <br> between them
    var resultsStr = results.join("<br>");
    // display results as text to page
    resultsContainer.innerHTML = resultsStr;
}
...