2014-12-28 3 views
0

По существу, я продолжаю получать сообщение «document not defined» при запуске моего .js doc в командной строке. Я пытаюсь создать супер базовую игру, где пользователь помогает белке добраться до каштанов с помощью клавиш со стрелками. Пока я еще не могу переместить белку, и я подозреваю, что это связано с документом, который не определяет ошибку, которую я получаю (строки 1-3 и, возможно, также 52 в ссылке).Документ не определен error для 'document.getElementById()'

Вы можете найти свой код (HTML, CSS и JS) в следующем jsfiddle link

(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>

+0

* «По существу, я получаю сообщение "документ не определен", когда я запускаю мой .js документ в командной строке.» * На командной строки? С помощью чего? – Ryan

+1

'document' является частью HTML API. Конечно, он не будет определен «в командной строке» (однако это зависит от того, что говорит «командная строка»). Кроме того, ваша функция 'move' должна быть снабжена событием, но в' document.onKeyDown = move(); 'вы ничего не предоставили. –

+0

@ U2744SNOWFLAKE, введя в файле имя_файла.js в командной строке. Я не знаю, это то, что вы хотели знать? Ха-ха, извините. Я не шутил, когда говорил, что я супер новичок в этих вещах> ___ < – claaang

ответ

0

пожалуйста поместите скрипт перед тем </body> или в window.onload функция обратного вызова. Поскольку объект документа не создается, когда вы вызываете document.getElementById.

Да, проблема document.onKeyDown = move(). Правильный обработчик событий - document.onkeydown, а обработчик должен быть функцией move, а не функцией move(). Так что просто изменилось на document.onkeydown=move

+1

'document' будет определен. Он просто не будет иметь все свое содержание. – Ryan

+0

FYI, если нет 'document', скорее всего, не будет' окна'. –

+0

сценарий включен в теги в моем действительном коде (я положил его в тег

2

Проблема в том, что move() требует, чтобы событие было передано ему, но когда вы делаете document.onKeyDown = move();, события не принимаются.

Изменение document.onKeyDown = move(); в document.addEventListener("keydown", move, false);

working jsfiddle

1

Добавить прослушиватель событий document.body.addEventListener('keydown', function(e) {...} вместо 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(); 
 
}); 
 

 
// 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>

Смежные вопросы