大家下午好！
经过一些研究后，我发现有些人已经提出了这个问题，但即使阅读了所有这些问题，我仍然无法解决问题。
事实上，我有一个html文档，其中包含两个.js文件。我也有一个css来初始化我的块。
我的目标是显示图片以做一点视差。我已经在html文件中定义了我的第一张图片，另外一张是带有AJAX请求并注入了html。
所以我要展示的第一张图片是ID为＆＃34; paysage＆＃34;。
我将这两个文件包含在html主体的末尾。
但是当我尝试启动应用程序时，＆＃34;调试器＆＃34;说＆＃34;无法阅读财产＆＃34;风格＆＃34; of null＆＃34;。
或者，在执行＆＃34; getElementById（var）＆＃34;之前，我做了一个console.log来检查var的值。 var具有价值＆＃34; paysage＆＃34;。我无法解决它......
我把我的文件放在这里。我已经清理了＆＃34; functions.js＆＃34;文件，其中包含一些函数以控制鼠标和键盘。我只是把问题涉及到这个问题。
提前谢谢你，抱歉我的英语不好！
BBEMG.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="main.css" />
</head>
<body onkeydown = "applyKey();" onkeyup="unApplyKey();">
<div id="mainContainer" onclick="hClicked(event);">
<div id="background">
<img src="img/paysage-backgr.jpg" id="paysage">
</div>
<div id="Man">
<img src="img/man-stand-up.png" id="standMan">
</div>
<div id="foreground">
<img src="img/paysage-foregr.png" id="paysage-foregr">
</div>
<div id="text">
<p id="blank"></p>
<p id="cuisine-1"><em>Toaster</em><br />x µT to y µT</p>
<p id="cuisine-2"><em>Coffee machine</em><br />x µT to y µT</p>
<p id="cuisine-3"><em>Fridge</em><br />x µT to y µT</p>
<p id="cuisine-4"><em>Microwave oven</em><br />x µT to y µT</p>
<p id="cuisine-5"><em>Dishwasher</em><br />x µT to y µT</p>
<p id="cuisine-6"><em>Oven</em><br />x µT to y µT</p>
<p id="buanderie-1"><em>Vacuum cleaner</em><br />x µT to y µT</p>
<p id="buanderie-2"><em>Iron</em><br />x µT to y µT</p>
<p id="buanderie-3"><em>Washing machine</em><br />x µT to y µT</p>
<p id="buanderie-4"><em>Dryer</em><br />x µT to y µT</p>
<p id="buanderie-5"><em>Inverter</em><br />x µT to y µT</p>
<p id="buanderie-6"><em>Meter panel</em><br />x µT to y µT</p>
<p id="atelier-1"><em>Circular saw</em><br />x µT to y µT</p>
<p id="atelier-2"><em>Jigsaw</em><br />x µT to y µT</p>
<p id="atelier-3"><em>Screwgun</em><br />x µT to y µT</p>
<p id="atelier-4"><em>Drilling</em><br />x µT to y µT</p>
<p id="atelier-5"><em>Mower</em><br />x µT to y µT</p>
<p id="bureau-1"><em>Photocopier</em><br />x µT to y µT</p>
<p id="bureau-2"><em>Computer</em><br />x µT to y µT</p>
<p id="bureau-3"><em>Flatscreen</em><br />x µT to y µT</p>
<p id="bureau-4"><em>Cathodescreen</em><br />x µT to y µT</p>
<p id="salon-1"><em>Halogen lamp</em><br />x µT to y µT</p>
<p id="salon-2"><em>Flat TV</em><br />x µT to y µT</p>
<p id="salon-3"><em>Stereo</em><br />x µT to y µT</p>
<p id="sdb-1"><em>Hairdryer</em><br />x µT to y µT</p>
<p id="sdb-2"><em>Heater</em><br />x µT to y µT</p>
<p id="sdb-3"><em>Shaver</em><br />x µT to y µT</p>
<p id="sdb-4"><em>Fluotube</em><br />x µT to y µT</p>
<p id="sdb-5"><em>Toothbrush</em><br />x µT to y µT</p>
<p id="chambre-1"><em>Clock</em><br />x µT to y µT</p>
<p id="chambre-2"><em>Bed</em><br />x µT to y µT</p>
<p id="chambre-3"><em>Ledlamp</em><br />x µT to y µT</p>
<p id="chambre-4"><em>TV cathode</em><br />x µT to y µT</p>
</div>
</div>
<script src="Functions.js"></script>
<script src="Code.js"></script>
</body>
</html>
Functions.js
//structures
function Item(IDo, darkIDo, textIDo, xPoso, yPoso, isForegroundo, widtho, heighto) { //Si l'objet n'est pas connecté et est "foreground" : multiplier par 2 sa position x donnée a la base. si connecté, multiplier par 2 la position de l'objet auquel il est connecté et ajouter la largeur de l'objet auquel il est connecté
this.ID = IDo;
this.darkID = darkIDo;
this.textID = textIDo;
this.xPos = xPoso;
this.yPos = yPoso;
this.isForeground = isForegroundo;
this.width = widtho;
this.height = heighto;
}
function Man(standingIDo, leftIDo, rightIDo) {
this.standingID = standingIDo;
this.leftID = leftIDo; //Array
this.rightID = rightIDo;//Array
}
function Room(relPoso, IDo, darkIDo) {
this.relPos = relPoso;
this.ID = IDo;
this.darkID = darkIDo;
}
function toShow(xo, yo, IDo) {
this.x = xo;
this.y = yo;
this.ID = IDo;
}
//Variables Globales ici
var START = false; //Global switch
var KEYPRESS = false; //Master du clavier sur la souris
var INPROGRESS = false; //Switch d'attente de fin de boucle move avant de redonner la main a une eventuelle nouvelle instruction clavier
var WAITINGFORSTARTING = false;
var KEEPRUNNING = false;
var WAITFORENDTIMEOUT = false;
//Parallax
var actualRoom = 0;
var calledByMoveTo = false;
var clickedOnBackground = true;
var panWidth;
var goTill;
var parallaxFactor = 2;
var actualX = 0;
var direction = 0;
var counter = 0;
var items = new Array (8);
for (var i = 0; i < 8; i++) {
switch (i){
case 0:
items[i] = new Array (1);
break;
case 1:
items[i] = new Array (6);
break;
case 2:
items[i] = new Array (6);
break;
case 3:
items[i] = new Array (5);
break;
case 4:
items[i] = new Array (4);
break;
case 5:
items[i] = new Array (4);
break;
case 6:
items[i] = new Array (5);
break;
case 7:
items[i] = new Array (4);
break;
}
}
var rooms = [];
var midgroundCoordx = 300;//A gerer pour centrer le bonhomme
var midgroundCoordy = 100;
var roomZLabelXDefault = 100;
var roomZLabelYDefault = 400;
//var toShow = [];
//var toHide = [];
var man;
var panWidth = 600;
var firstMove = true;
var ArrayToPaintBack = [];
var ArrayToPaintFore = [];
var ArrayToPaintText = [];
var midgroundParallax;
var oldArrayToPaintBack = [];
var oldArrayToPaintFore = [];
var oldArrayToPaintText = [];
var oldmidgroundParallax;
var manActDir = 0;
var actualImgNb = 0;
var tll = true;
//End
//Initialisation
//!!ROOMS!!
/*console.log(panWidth);*/
rooms[0] = new Room (0, "paysage", "paysage"); // pas de dark!!!!!! v0 car une variable ne peut pas commencer par un chiffre
rooms[1] = new Room (1, "cuisine", "cuisine-dark");
rooms[2] = new Room (2, "buanderie", "buanderie-dark");
rooms[3] = new Room (3, "atelier", "atelier-dark");
rooms[4] = new Room (4, "bureau", "bureau-dark");
rooms[5] = new Room (5, "salon", "salon-dark");
rooms[6] = new Room (6, "sdb", "sdb-dark");
rooms[7] = new Room (7, "chambre", "chambre-dark");
rooms[8] = new Room (8, "merci", "merci"); // pas de dark!!!!!!
//!!ITEMS!!
//declaration a revoir en fonction de la dernière version (xPos surtout)
items[0][0] = new Item("paysage-foregr","paysage-foregr","blank",40,150,true,320,92);
items[1][0] = new Item("cuisine-foregr1","cuisine-foregr1-dark","cuisine-1",120,115,true,190,245);
items[1][1] = new Item("cuisine-foregr2","cuisine-foregr2-dark","cuisine-2",310,56,true,179,304);
items[1][2] = new Item("blank","blank","cuisine-3",512,0,false,188,330);
items[1][3] = new Item("blank","blank","cuisine-4",700,115,false,150,70);
items[1][4] = new Item("blank","blank","cuisine-5",700,210,false,150,110);
items[1][5] = new Item("blank","blank","cuisine-6",1000,0,false,160,320);
items[2][0] = new Item("buanderie-foregr","buanderie-foregr-dark","buanderie-1",-20,100,true,393,288);
items[2][1] = new Item("blank","blank","buanderie-2",310,90,false,120,70);
items[2][2] = new Item("blank","blank","buanderie-3",460,160,false, 165,180);
items[2][3] = new Item("blank","blank","buanderie-4",625,160,false,165,180);
items[2][4] = new Item("blank","blank","buanderie-5",880,30,false,80,120);
items[2][5] = new Item("blank","blank","buanderie-6",980,30,false,200,120);
items[3][0] = new Item("atelier-foregr","atelier-foregr-dark","atelier-1",10,159,true,469,201);
items[3][1] = new Item("blank","blank","atelier-2",700,80,false,150,80);
items[3][2] = new Item("blank","blank","atelier-3",700,80,false,150,80);
items[3][3] = new Item("blank","blank","atelier-4",700,80,false,150,80);
items[3][4] = new Item("atelier-foregr2","atelier-foregr2-dark","atelier-5",800,90,true,333,270);
items[4][0] = new Item("bureau-foregr","bureau-foregr-dark","bureau-1",40,90,true,335,270);
items[4][1] = new Item("blank","blank","bureau-2",540,90,false,60,100);
items[4][2] = new Item("blank","blank","bureau-3",620,60,false,150,110);
items[4][3] = new Item("blank","blank","bureau-4",825,80,false,115,90);
items[5][0] = new Item("salon-foregr","salon-foregr-dark","blank",50,137,true,335,270);
items[5][1] = new Item("blank","blank","salon-1",263,50,false,62,67);
items[5][2] = new Item("blank","blank","salon-2",510,5,false,330,185);
items[5][3] = new Item("blank","blank","salon-3",860,175,false,150,30);
items[6][0] = new Item("sdb-foregr","sdb-foregr-dark","sdb-1",750,79,true,335,270);
items[6][1] = new Item("blank","blank","sdb-2",85,200,false,240,110);
items[6][2] = new Item("blank","blank","sdb-3",405,160,false,60,20);
items[6][3] = new Item("blank","blank","sdb-4",515,0,false,155,160);
items[6][4] = new Item("blank","blank","sdb-5",730,125,false,70,55);
items[7][0] = new Item("blank","blank","chambre-1",235,185,false,400,70);
items[7][1] = new Item("blank","blank","chambre-2",340,190,false,60,35);
items[7][2] = new Item("blank","blank","chambre-3",910,0,false,60,40);
items[7][3] = new Item("blank","blank","chambre-4",1025,40,false,125,115);
//(ID, darkID, textID, x*2, y, isForeground, width, height) si isConnected = true, x = previousItemPos*2-previousItemWidth
//!!MAN!!
var rightMan = ["l1","l2","l3","l4","l5","l6"];
var leftMan = ["r1","r2","r3","r4","r5","r6"];
man = new Man ("standMan",leftMan,rightMan);
//End
function sleepFor( sleepDuration ){
var now = new Date().getTime();
while(new Date().getTime() < now + sleepDuration){ /* do nothing */ }
}
function show () { //DONE
for (var i = 0; i < ArrayToPaintBack.length; i++){
console.log(i);
console.log(ArrayToPaintBack[i].ID);
console.log(ArrayToPaintBack.length);
document.getElementById(ArrayToPaintBack[i].ID).style.left = ArrayToPaintBack[i].x+'px';
document.getElementById(ArrayToPaintBack[i].ID).style.top = ArrayToPaintBack[i].y+'px';
document.getElementById(ArrayToPaintBack[i].ID).style.display = "block";
}
document.getElementById(midgroundParallax.ID).style.left = midgroundParallax.x+'px';
document.getElementById(midgroundParallax.ID).style.top = midgroundParallax.y+'px';
document.getElementById(midgroundParallax.ID).style.display = "block";
for (var i = 0; i < ArrayToPaintFore.length; i++){
document.getElementById(ArrayToPaintFore[i].ID).style.left = ArrayToPaintFore[i].x+'px';
document.getElementById(ArrayToPaintFore[i].ID).style.top = ArrayToPaintFore[i].y+'px';
document.getElementById(ArrayToPaintFore[i].ID).style.display = "block";
}
}
function hide () { //DONE
for (var i = 0; i < oldArrayToPaintFore.length; i++){
document.getElementById(oldArrayToPaintFore[i].ID).style.display = "none";
}
for (var i = 0; i < oldArrayToPaintBack.length; i++){
document.getElementById(oldArrayToPaintBack[i].ID).style.display = "none";
}
for (var i = 0; i < oldArrayToPaintText.length; i++){
document.getElementById(oldArrayToPaintText[i].ID+' - Text').style.display = "none";
}
document.getElementById(oldmidgroundParallax.ID).style.display = "none";
// document.getElementById('Explanations').style.display = "none";
}
function applyKey (event){ //DONE
if (START && !KEYPRESS){
if (window.event) event = window.event;
var intKeyCode = event.keyCode;
KEYPRESS = true;
WAITINGFORSTARTING = true;
while (INPROGRESS);
if (intKeyCode == 39){
direction = 1;
KEEPRUNNING = true;
}
else if (intKeyCode == 37){
direction = -1;
KEEPRUNNING = false;
}
}
}
function unApplyKey (event){ //DONE
if (window.event) event = window.event;
var intKeyCode = event.keyCode;
if (intKeyCode == 39 || intKeyCode == 37){
direction = 0;
KEEPRUNNING = false;
KEYPRESS = false;
}
}
function animate (dir) { //DONE
if (dir == manActDir) {
if (dir == 1) {
actualImgNb++;
actualImgNb%=man.rightID.length;
return man.rightID[actualImgNb];
}
else if (dir == -1) {
actualImgNb++;
actualImgNb%=man.leftID.length;
return man.leftID[actualImgNb];
}
else {
actualImgNb = 0;
return man.standingID;
}
}
else {
manActDir = dir;
actualImgNb = 0;
if (dir == 1) return man.rightID[actualImgNb];
else if (dir == -1) return man.leftID[actualImgNb];
else return man.standingID;
}
}
function showText () { //DONE
var offside = 120;
var labelWidth;
var labelHeight;
var itemPosX;
var itemWidth;
for (var i = 0; i < ArrayToPaintText.length;i++) {
itemWidth = items[actualRoom][ArrayToPaintText[i].ID.charCodeAt(0)-48].width; //48 = '0'
itemPosX = ArrayToPaintText[i].x;
labelWidth = document.getElementById(items[actualRoom][ArrayToPaintText[i].ID.charCodeAt(0)-48].textID).style.width;
labelHeight = document.getElementById(items[actualRoom][ArrayToPaintText[i].ID.charCodeAt(0)-48].textID).style.height;
document.getElementById(items[actualRoom][ArrayToPaintText[i].ID.charCodeAt(0)-48].textID).style.left = ((itemPosX+itemWidth/2)-(labelWidth/2)) +'px';
document.getElementById(items[actualRoom][ArrayToPaintText[i].ID.charCodeAt(0)-48].textID).style.top = ((i==0)?120:(5+offside)) +'px';
document.getElementById(items[actualRoom][ArrayToPaintText[i].ID.charCodeAt(0)-48].textID).style.display = "block";
offside+=labelHeight+5;
}
}
function move () { //Passer INPROGRESS en true a chaque debut de boucle, et le redesencre en false a chaque debut de timer //DONE ? -> A REVOIR le setTimeout
var dir= direction;
var accelCounter = 0;
var time = 5;
var goMoveTo = true;
var GoalX = 0;
console.log("move");
console.log(calledByMoveTo);
if (calledByMoveTo) GoalX = Math.floor (actualX-((goTill-(panWidth/2))/((clickedOnBackground)?1:2)));
if (GoalX > 0 && actualRoom == 0) GoalX = -3;
console.log(direction);
console.log(firstMove);
console.log(goMoveTo);
console.log(KEEPRUNNING);
KEEPRUNNING = true;
while ((direction != 0 || firstMove) && goMoveTo && KEEPRUNNING) {
console.log("while");
if (WAITINGFORSTARTING) {WAITINGFORSTARTING = false; break;}
if (!WAITFORENDTIMEOUT) {
WAITFORENDTIMEOUT = true;
//setTimeout(function() { //DEBUT DU TIMEOUT
if (firstMove) {
goMoveTo = false;
// firstMove = false;
direction = 0;
}
else if (calledByMoveTo){
if (dir ==1){
if (actualX <= GoalX) goMoveTo = false;
}
else if (dir == -1) {
if (actualX >= GoalX) goMoveTo = false;
}
}
dir = direction;
counter++;
counter=counter%10;
accelCounter++;
accelCounter%=(100*(6-time));
actualX+=(-(2*direction));
if (actualX+((actualRoom ==0)?600:1200) <= panWidth/2) {
if (actualRoom < rooms.length-2) {
GoalX+=((actualRoom == 0)?600:1200);
actualRoom++;
actualX = panWidth/2;
}
else actualX-=(-(2*dir));
}
else if (actualX > panWidth/2) {
if (actualRoom > 0) {
actualRoom--;
actualX = (panWidth/2)-((actualRoom == 0)?600:1200);
GoalX-=((actualRoom==0)?600:1200);
}
else actualX-=(-(2*dir));
}
ArrayToPaintBack = [];
var a = new toShow(actualX,0,rooms[actualRoom].ID);
ArrayToPaintBack.push(a);
if (actualRoom > 0) ArrayToPaintBack.push(actualX-(actualRoom==1)?600:1200,0, rooms[actualRoom-1].darkID);
if (actualRoom < rooms.length-1) ArrayToPaintBack.push (actualX+((actualRoom==0)?600:1200),0, rooms[actualRoom+1].darkID);
console.log("length:" + ArrayToPaintBack.length);
ArrayToPaintFore = [];
if (actualRoom > 0) {
for(var i = 0; i < items[actualRoom-1].length; i++) {
if (items[actualRoom-1][i].isForeground) {
var b = new toShow (items[actualRoom-1][i].xPos+((actualX-((actualRoom==0)?600:1200))*((items[actualRoom-1][i].isForeground)?parallaxFactor:1)), items[actualRoom-1][i].yPos, items[actualRoom-1][i].darkID);
ArrayToPaintFore.push(b);
}
}
}
for (var i = 0; i < items[actualRoom].length;i++) {
console.log(actualRoom);
console.log(i);
if (items[actualRoom][i].isForeground) ArrayToPaintFore.push(items[actualRoom][i].xPos+(actualX*((items[actualRoom][i].isForeground)?parallaxFactor:1)), items[actualRoom][i].yPos, items[actualRoom][i].ID);
if((items[actualRoom][i].xPos+(actualX*((items[actualRoom][i].isForeground)?parallaxFactor:1)) <= panWidth/2) && (items[actualRoom][i].xPos+(actualX*((items[actualRoom][i].isForeground)?parallaxFactor:1))+items[actualRoom][i].width >= panWidth/2)){
var c = new toShow (items[actualRoom][i].xPos+(actualX*((items[actualRoom][i].isForeground)?parallaxFactor:1)), items[actualRoom][i].yPos, i);
ArrayToPaintText.push(c);
}
}
if (actualRoom < rooms.length-1) {
for (var i = 0; i < items[actualRoom+1].length; i++) {
if (items[actualRoom+1][i].isForeground){
ArrayToPaintFore.push(items[actualRoom+1][i].xPos+((actualX+((actualRoom == 0)?600:1200))*((items[actualRoom+1][i].isForeground)?parallaxFactor:1)), items[actualRoom+1][i].yPos,items[actualRoom+1][i].ID);
}
}
}
if (counter == 0||firstMove){
alert("coucou"); // ne passe jamais ici
midgroundParallax = new toShow (midgroundCoordx, midgroundCoordy, animate(dir));
firstMove=false;
}
if (accelCounter == 0) if (time >1 ) time--;
if (actualRoom == 0) displayExplanation (roomZLabelXDefault+(actualX*parallaxFactor), roomZLabelYDefault);
if (!tll) hide();
show();
showText();
oldArrayToPaintBack = ArrayToPaintBack;
oldArrayToPaintFore = ArrayToPaintFore;
oldArrayToPaintText = ArrayToPaintText;
oldmidgroundParallax = midgroundParallax;
INPROGRESS = false;
WAITFORENDTIMEOUT = false;
tll = false;
sleepFor (time);
//}, time); //FIN DU TIMEOUT
}
}
console.log("OutOfWhile");
//while (WAITFORENDTIMEOUT){};
console.log("20");
INPROGRESS = false;
document.getElementById(midgroundParallax.ID).style.display = 'none';
console.log("21");
midgroundParallax = new toShow (midgroundCoordx, midgroundCoordy, animate(0));
console.log("22");
document.getElementById(midgroundParallax.ID).style.left = midgroundParallax.x+'px';
console.log("23");
document.getElementById(midgroundParallax.ID).style.top = midgroundParallax.y+'px';
console.log("24");
document.getElementById(midgroundParallax.ID).style.display = 'block';
calledByMoveTo = false;
console.log("25");
}
code.js
var xhr = null;
var hasbeenreceived = 0;
console.log("0");
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
console.log("1");
}
else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
console.log("2");
}
else {
alert("Votre navigateur n'est pas compatible avec la technologie AJAX. Cette technologie est utilisée afin de faire fonctionner cette application. Veuillez mettre à jour votre navigateur ou en choisir un autre.");
}
var i = 0;
if (xhr) {
var target;
console.log("3");
xhr.open ("GET", "Man.txt", true);
xhr.onreadystatechange = function() {
//alert ("State changed for " + xhr.readyState);
if (xhr.readyState == 4 && xhr.status == 200){
console.log("4");
if (i == 0) {
target = document.getElementById("Man");
console.log("5");
} else if (i == 1) {
target = document.getElementById("background");
console.log("6");
} else if (i == 2) {
target = document.getElementById("foreground");
console.log("7");
}
console.log("8");
var toPut = xhr.responseText;
target.innerHTML = toPut;
hasbeenreceived = 1;
i++;
if (i <= 2) {
if (i == 1) {
xhr.open ("GET", "background.txt", true);
console.log("9");
}
if (i == 2) {
xhr.open ("GET", "foreground.txt", true);
console.log("10");
}
}
console.log("11");
} else {
document.getElementById("Afficheur").innerHTML ("readyState : " + xhr.readyState + " - status : " + status + "<br>");
alert ("Change in AFFICHEUR");
}
}
START = true;
console.log("12");
move();
firstMove = false;
} //Fin du programme
的main.css
#paysage {
position: absolute;
left: 0px;
top: 0px;
display: block;
}
答案 0 :(得分：0)
代码中还有许多其他问题，但错误发生的原因是ID为"cuisine"，"chambre"等的此类元素并不存在于您的HTML页面中，因此document.getElementById(...)会返回undefined。您忘记指定元素ID，包括＆＃34; - [数字]＆＃34;，例如，此处：
document.getElementById(ArrayToPaintBack[i].ID)
我认为这里解决了错误（我在for循环中找到了这个部分）：
document.getElementById(ArrayToPaintBack[i].ID + "-" + (i + 1))
// i.e, "cuisine-1"
您可以检查HTML页面以确认，有"id"的元素，如cuisine-1等，但在您的脚本中，您只需指定这些类的第一部分。你应该包含一个带有连字符的序号。