文档不是“Document . getelementbyid()”的定义错误。

Essentially, I keep getting the message "document is not defined" when I run my .js doc on command line. I'm trying to create a super basic game where the user helps the squirrel get to the chestnuts by using arrow keys. So far I can't move the squirrel yet, and I suspect it has to do with the document is not defined error that I'm getting (lines 1-3 and maybe also 52 in the link).

从本质上讲，当我在命令行上运行.js文档时，我一直得到“文档没有定义”的消息。我正在尝试创建一个超级基础的游戏，用户通过使用箭头键帮助松鼠到达栗树。到目前为止，我还不能移动squirrel，我怀疑它与文档有关，这不是我所定义的错误(第1-3行，也可能是链接中的52行)。

You can find my code (html, css and js) in the following jsfiddle link

您可以在以下的jsfiddle链接中找到我的代码(html、css和js)。

(http://jsfiddle.net/8Lbkcsq2/)

var squirrelImg = document.getElementById("squirrelImg");
var forest = document.getElementById("forest");
var chestnutImg = document.getElementById("chestnutsImg");

var squirrel = {
    name: "Mr. Squirrel",
    has_chestnuts: false,
    hungry: true
};

var chestnuts = {
    name: "chestnuts"
};

var positionLeft = 0;
var positionTop = 0;

function move(e) {
    // 39 for right arrow
    if (e.keyCode === 39) {
        if (positionLeft < 850) {
            positionLeft += 50;
            squirrelImg.style.left = positionLeft + "px";
        }
    }
    // 40 for down arrow
    if (e.keyCode === 40) {
        if (positionTop < 600) {
            positionTop += 50;
            squirrelImg.style.top = positionTop + "px";
        }
    }
    // 37 for left arrow
    if (e.keyCode === 37) {
        positionLeft -= 50;
        if (positionLeft < 0) {
            positionLeft += 50; // CHANGE TO +=50 LATER
        }
        squirrelImg.style.left = positionLeft + "px";
    }
    // 38 for up arrow
    if (e.keyCode === 38) {
        positionTop -= 100;
        if (positionTop < 0) {
            positionTop += 50; // CHANGE TO +=50 LATER
        }
        squirrelImg.style.top = positionTop + "px";
    }
    foundChestnuts();
}

document.onKeyDown = move();

function foundChestnuts() {
    if ((squirrelImg.style.top == "300px") && (squirrelImg.style.left == "750px")) {
        squirrel.has_chestnuts = true;
        alert("Thank you for helping Mr. Squirrel find his chestnuts!");
        var eat = confirm("Should Mr.Squirrel eat his chestnuts?");
        if (eat === true) {
            alert("Time to eat!");
            alert("Yum! Mr. Squirrel isn't hungry anymore!");
        } else {
            alert("I guess Mr. Squirrel can wait a little longer...");
        }
    } else {
        squirrel.has_chestnuts = false;
    }
}

body {
    background-color: #b5916c;
}
h3 {
    font-weight: bold;
    text-decoration: underline;
}
p {
    font-family:'Dancing Script', cursive;
    font-size: large;
}
#forest {
    background-image: url(http://s21.postimg.org/jyht762hj/forestfloor.jpg);
    width: 850px;
    height: 600px;
    position: relative;
    /*opacity: 0.5;*/
}
#squirrelImg {
    position: absolute;
    background-image: url(http://s24.postimg.org/wkqh9by4x/squirrel.png);
    height: 100px;
    width: 100px;
    left: 0;
    top: 0;
}
#chestnutsImg {
    position: absolute;
    background-image: url(http://s28.postimg.org/kgiubxhnd/chestnuts.jpg);
    height: 100px;
    width: 100px;
    left: 750px;
    top: 300px;
}

<body>
     <h3>A Plea from Mr. Squirrel:</h3>

    <p>My dearest human,</p>
    <p>I seem to have misplaced my chestnuts and I am quite famished.</p>
    <p>Would you mind assisting me in locating them?</p>
    <p>Much obliged!</p>
    <div id="forest">
        <div id="squirrelImg"></div>
        <div id="chestnutsImg"></div>
    </div>
</body>

3 个解决方案

#1

please place the script before </body>, or in window.onload callback function. Because document object is not created when you call document.getElementById.

请在，或在窗口中放置脚本。onload回调函数。因为文档对象不是在您调用document. getelementbyid时创建的。

Yes, the problem is document.onKeyDown = move(). The right event handler isdocument.onkeydown, and handler should be a function move, not a function result move(). So just changed to document.onkeydown=move

是的，问题是文件。onKeyDown =()。正确的事件处理程序是文档。onkeydown和handler应该是一个函数移动，而不是函数结果移动()。切换到document。onkeydown=移动。

#2

The issue is that move() requires an event to be passed to it but when you do document.onKeyDown = move(); no event is passed.

问题是，move()需要将一个事件传递给它，但是当您执行文档时。onKeyDown =移动();不传递事件。

Change document.onKeyDown = move(); to document.addEventListener("keydown", move, false);

改变文档。onKeyDown =移动();文档。addEventListener(“keydown”,移动,假);

working jsfiddle

工作jsfiddle

#3

Add a event listener document.body.addEventListener('keydown', function(e) {...} instead of document.onKeyDown = move().

添加一个事件监听器document.body。addEventListener(keydown,函数(e){…},而不是文档。onKeyDown =()。

Updated Fiddle

更新的小提琴

var squirrelImg = document.getElementById("squirrelImg");
var forest = document.getElementById("forest");
var chestnutImg = document.getElementById("chestnutsImg");

var squirrel = {
  name: "Mr. Squirrel",
  has_chestnuts: false,
  hungry: true
};

var chestnuts = {
  name: "chestnuts"
};

var positionLeft = 0;
var positionTop = 0;

document.body.addEventListener('keydown', function(e) {
  // 39 for right arrow
  if (e.keyCode === 39) {
    if (positionLeft < 850) {
      positionLeft += 50;
      squirrelImg.style.left = positionLeft + "px";
    }
  }
  // 40 for down arrow
  if (e.keyCode === 40) {
    if (positionTop < 600) {
      positionTop += 50;
      squirrelImg.style.top = positionTop + "px";
    }
  }
  // 37 for left arrow
  if (e.keyCode === 37) {
    positionLeft -= 50;
    if (positionLeft < 0) {
      positionLeft += 50; // CHANGE TO +=50 LATER
    }
    squirrelImg.style.left = positionLeft + "px";
  }
  // 38 for up arrow
  if (e.keyCode === 38) {
    positionTop -= 100;
    if (positionTop < 0) {
      positionTop += 50; // CHANGE TO +=50 LATER
    }
    squirrelImg.style.top = positionTop + "px";
  }
  foundChestnuts();
});

// combined 3 functions previously separated for foundChestnuts, eatChestnuts and hungerLevel into the function below
function foundChestnuts() {
  if ((squirrelImg.style.top == "300px") && (squirrelImg.style.left == "750px")) {
    squirrel.has_chestnuts = true;
    alert("Thank you for helping Mr. Squirrel find his chestnuts!");
    var eat = confirm("Should Mr.Squirrel eat his chestnuts?");
    if (eat === true) {
      alert("Time to eat!");
      alert("Yum! Mr. Squirrel isn't hungry anymore!");
    } else {
      alert("I guess Mr. Squirrel can wait a little longer...");
    }
  } else {
    squirrel.has_chestnuts = false;
  }
}

body {
  background-color: #b5916c;
}
h3 {
  font-weight: bold;
  text-decoration: underline;
}
p {
  font-family: 'Dancing Script', cursive;
  font-size: large;
}
#forest {
  background-image: url(http://s21.postimg.org/jyht762hj/forestfloor.jpg);
  width: 850px;
  height: 600px;
  position: relative;
  /*opacity: 0.5;*/
}
#squirrelImg {
  position: absolute;
  background-image: url(http://s24.postimg.org/wkqh9by4x/squirrel.png);
  height: 100px;
  width: 100px;
  left: 0;
  top: 0;
}
#chestnutsImg {
  position: absolute;
  background-image: url(http://s28.postimg.org/kgiubxhnd/chestnuts.jpg);
  height: 100px;
  width: 100px;
  left: 750px;
  top: 300px;
}

<body>
  <h3>A Plea from Mr. Squirrel:</h3>

  <p>My dearest human,</p>
  <p>I seem to have misplaced my chestnuts and I am quite famished.</p>
  <p>Would you mind assisting me in locating them?</p>
  <p>Much obliged!</p>
  <div id="forest">
    <div id="squirrelImg"></div>
    <div id="chestnutsImg"></div>
  </div>
</body>

#1