javascript - Document is not defined error for 'document.getElementById()'

Essentially, I keep getting the message "document is not defined" when I run my .js doc on mand 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).

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

(/)

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(.jpg);
    width: 850px;
    height: 600px;
    position: relative;
    /*opacity: 0.5;*/
}
#squirrelImg {
    position: absolute;
    background-image: url(.png);
    height: 100px;
    width: 100px;
    left: 0;
    top: 0;
}
#chestnutsImg {
    position: absolute;
    background-image: url(.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>

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

(http://jsfiddle/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/jyht762hj/forestfloor.jpg);
    width: 850px;
    height: 600px;
    position: relative;
    /*opacity: 0.5;*/
}
#squirrelImg {
    position: absolute;
    background-image: url(http://s24.postimg/wkqh9by4x/squirrel.png);
    height: 100px;
    width: 100px;
    left: 0;
    top: 0;
}
#chestnutsImg {
    position: absolute;
    background-image: url(http://s28.postimg/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>

Share Improve this question edited Dec 28, 2014 at 7:09 Disposer 6,3815 gold badges33 silver badges39 bronze badges asked Dec 28, 2014 at 7:03 claaang 211 gold badge1 silver badge2 bronze badges

“Essentially, I keep getting the message "document is not defined" when I run my .js doc on mand line.” On the mand line? Using what? – Ry- ♦ Commented Dec 28, 2014 at 7:08
1 document is a part of the HTML API. Of course it won't be defined "on mand line" (however it depends what the "mand line" you are talking about). Also, your move function should be provided with an event, but in document.onKeyDown = move(); you provided nothing. – Derek 朕會功夫 Commented Dec 28, 2014 at 7:13
@U2744SNOWFLAKE by typing in node filename.js on mand line. I don't know if that's what you wanted to know? Haha, sorry. I wasn't kidding when I said I'm super new to these things >___< – claaang Commented Dec 28, 2014 at 7:20
You need a web browser. Node doesn’t have a document, won’t look at your HTML and CSS, etc.. – Ry- ♦ Commented Dec 28, 2014 at 7:21

Add a ment |

3 Answers 3

Sorted by: Reset to default 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.

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

working jsfiddle

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

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();
});

// bined 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/jyht762hj/forestfloor.jpg);
  width: 850px;
  height: 600px;
  position: relative;
  /*opacity: 0.5;*/
}
#squirrelImg {
  position: absolute;
  background-image: url(http://s24.postimg/wkqh9by4x/squirrel.png);
  height: 100px;
  width: 100px;
  left: 0;
  top: 0;
}
#chestnutsImg {
  position: absolute;
  background-image: url(http://s28.postimg/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>

please place the script before </body>, or in window.onload callback function. Because document object is not created when you call 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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Document is not defined error for 'document.getElementById()' - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)