Fatal编程技术网
  • javascript/
  • Javascript 为什么会出现错误：“quot；无法读取属性'；风格'；“无效”的定义；因为第190行、200行、213行的事而在216行？

Javascript 为什么会出现错误：“quot；无法读取属性'；风格'；“无效”的定义；因为第190行、200行、213行的事而在216行？

javascript html

Javascript 为什么会出现错误：“quot；无法读取属性'；风格'；“无效”的定义；因为第190行、200行、213行的事而在216行？,javascript,html,online-game,Javascript,Html,Online Game,*我不明白为什么我的控制台上会出现以下错误：“无法读取第216行的null属性‘style’”（在底部附近，我添加了一条注释），因为第190、200、213行也有错误？我想问题是关于激光变量。。。请帮忙。如果有人能尽快帮助我，我将不胜感激。* ''' 测试 像素发生器 游戏说明 YouTube 使用WASD键控制玩家1（蓝色），Q到 向左射击，向右射击。使用箭头键控制播放器2（）， 1个在数字牌上向左射击，2个在右射击。 接近 钮扣{ 背景色：#4169E1； 颜色：白色； 填充：14px 2

*我不明白为什么我的控制台上会出现以下错误：“无法读取第216行的null属性‘style’”（在底部附近，我添加了一条注释），因为第190、200、213行也有错误？我想问题是关于激光变量。。。请帮忙。如果有人能尽快帮助我，我将不胜感激。* '''


测试
像素发生器
游戏说明
YouTube
使用WASD键控制玩家1（蓝色），Q到
向左射击，向右射击。使用箭头键控制播放器2（），
1个在数字牌上向左射击，2个在右射击。
接近
钮扣{
背景色：#4169E1；
颜色：白色；
填充：14px 20px；
利润率：8px0；
边界：无；
光标：指针；
宽度：30%；
高度：45px；
}
#英雄{
背景：#ff0000；
宽度：20px；
高度：50px；
位置：绝对位置；
}
#玩家{
背景：#ff0000；
宽度：20px；
高度：50px；
位置：绝对位置；
}
#图片{
宽度：150px；
}
#雷射{
宽度：30；
身高：3；
背景：#ff0000
位置：绝对位置；
}
函数YouTube（）{
窗口打开（“https://www.youtube.com/channel/UCe9MhUIA6wwwchVBzypCBnA");
}
document.getElementById（“指令1”）.style.display=“无”；
document.getElementById（“Close”）.style.display=“无”；
功能指令（）{
document.getElementById（“指令1”）.style.display=“块”；
document.getElementById（“Close”）.style.display=“block”；
}
函数close1（）{
document.getElementById（“指令1”）.style.display=“无”；
document.getElementById（“Close”）.style.display=“无”；
}
var左键=65；
var UP_KEY=87；
var右键=68；
var DOWN_KEY=83；
var左箭头=37；
var右箭头=39；
变量空间_键=32；
var向下箭头=40；
var向上箭头=38；
var Q_KEY=81；
var E_KEY=69；
var HERO_运动=10；
var lastLoopRun=0；
var controller=新对象（）；
var player=新对象（）；
player.element='player'
player.x=650；
player.y=460；
var hero=新对象（）；
hero.element='hero'；
hero.x=250；
hero.y=460；
var激光=新对象（）；
激光x=0；
激光y=-120；
功能性反弹（精灵、ignoreY）{
如果（sprite.x<20）{
sprite.x=20；
}
如果（！ignoreY&&sprite.y<20）{
雪碧y=20；
}
如果（sprite.x+sprite.w>1910）{
sprite.x=1910-sprite.w；
}
如果（！ignoreY&&sprite.y+sprite.h>940）{
sprite.y=940-sprite.h；
}
}
函数createSprite（元素，x，y，w，h）{
var result=新对象（）；
结果：元素=元素；
结果：x=x；
结果y=y；
结果：w=w；
结果：h=h；
返回结果；
}
功能切换键（按键代码，已按下）{
if（keyCode==向下键）{
controller.down=isPressed；
}
if（keyCode==左键）{
controller.left=已按下；
}
if（keyCode==右键）{
controller.right=isPressed；
}
如果（键代码==向上键）{
controller.up=isPressed；
}
if（keyCode==空格\u键）{
controller.space=isPressed；
}
如果（键代码==左箭头）{
controller.leftarrow=isPressed；
}
if（键代码==右箭头）{
controller.rightarrow=isPressed；
}
如果（键代码==向上箭头）{
controller.rightarrow=isPressed
}
if（键码==向下箭头）{
controller.downarrow=isPressed
}
if（keyCode==Q_键）{
controller.qkey=isPressed
}
if（keyCode==E_键）{
controller.ekey=isPressed
}
}
函数handleControls（）{
如果（控制器关闭）{
英雄.y+=英雄运动
}
if（controller.up）{
hero.y-=英雄运动
}
if（控制器左）{
英雄.x-=英雄运动；
}
如果（控制器右侧）{
英雄.x+=英雄_运动；
}

如果（controller.qkey&&laser.x您的laser对象没有设置laser.element属性，如果您在laster.x和laser.y初始化（第104行）之后添加laser.element='laser'，这个错误应该被修复
这个错误意味着调用
getElementById（）
返回
null
。谢谢。我会尝试的

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>test</title>
        <div>
          <h1 style="text-align:center; color:purple;" id="pixelator">
           <big>
             <i>
               <b>
                 Pixelator
               </b>
             </i>
           </big>
          </h1>
         <button type="button" id="button1" onclick="Instructions()">Instructions for game</button>
         <button type="button" id="button2" onclick="YouTube()">YouTube</button>
         <h3 id="Instructions1">
           Use the keys WASD to controll player one(blue), Q to
           shoot left and E to shoot right. Use the arrow keys to controll player two(),
           1 on the numberpad to shoot left and two to shoot right.
         </h3>
         <button type="button" id="Close" onclick="close1()">Close</button>
        </div>
          <img src="C:/Users/Tania/Documents/Website/Screenshots/Nice.jpg" alt="Image not found" id="Pic">
      </head>
      <body style="background-color:green">
        <style>
        button {
           background-color: #4169E1;
           color: white;
           padding: 14px 20px;
           margin: 8px 0;
           border: none;
           cursor: pointer;
           width: 30%;
           height: 45px;
         }
          #hero {
            background:#ff0000;
            width:20px;
            height:50px;
            position:absolute;
          }
          #player {
            background:#ff0000;
            width:20px;
            height:50px;
            position:absolute;
          }
          #Pic {
            width: 150px;
          }
          #laser {
            width: 30;
            height: 3;
            background:#ff0000
            position:absolute;
          }
        </style>
        <div id="player"></div>
        <div id="hero"></div>
        <div id="laser"></div>
        <script type="text/javascript">
        function YouTube(){
          window.open("https://www.youtube.com/channel/UCe9MhUIA6wwwchVBzypCBnA");
        }
        document.getElementById("Instructions1").style.display = "none";
        document.getElementById("Close").style.display = "none";
       function Instructions() {
        document.getElementById("Instructions1").style.display = "block";
        document.getElementById("Close").style.display = "block";
       }
       function close1() {
         document.getElementById("Instructions1").style.display = "none";
         document.getElementById("Close").style.display = "none";
       }

      var LEFT_KEY = 65;
      var UP_KEY = 87;
      var RIGHT_KEY = 68;
      var DOWN_KEY = 83;
      var LEFT_ARROW = 37;
      var RIGHT_ARROW = 39;
      var SPACE_KEY = 32;
      var DOWN_ARROW = 40;
      var UP_ARROW = 38;
      var Q_KEY = 81;
      var E_KEY = 69;
      var HERO_MOVEMENT = 10;

      var lastLoopRun = 0;

      var controller = new Object();
         var player = new Object();
         player.element = 'player'
         player.x = 650;
         player.y =460;
         var hero = new Object();
         hero.element = 'hero';
         hero.x = 250;
         hero.y = 460;
         var laser = new Object();
         laser.x = 0;
         laser.y = -120;
         function ensureBounds(sprite, ignoreY) {
           if (sprite.x < 20) {
             sprite.x = 20;
           }
           if (!ignoreY && sprite.y < 20) {
             sprite.y = 20;
           }
           if (sprite.x + sprite.w > 1910) {
             sprite.x = 1910 - sprite.w;
           }
           if (!ignoreY && sprite.y + sprite.h > 940) {
             sprite.y = 940 - sprite.h;
           }
         }
         function createSprite(element, x, y, w, h) {
           var result=new Object();
           result.element=element;
           result.x=x;
           result.y=y;
           result.w=w;
           result.h=h;
           return result;
         }
         function toggleKey(keyCode, isPressed) {
           if (keyCode == DOWN_KEY) {
             controller.down = isPressed;
           }
           if (keyCode == LEFT_KEY) {
             controller.left = isPressed;
           }
           if (keyCode == RIGHT_KEY) {
             controller.right = isPressed;
           }
           if (keyCode == UP_KEY) {
             controller.up = isPressed;
           }
           if (keyCode == SPACE_KEY) {
             controller.space = isPressed;
           }
           if (keyCode == LEFT_ARROW) {
             controller.leftarrow = isPressed;
           }
           if (keyCode == RIGHT_ARROW) {
             controller.rightarrow = isPressed;
           }
           if (keyCode == UP_ARROW) {
             controller.rightarrow = isPressed
           }
           if (keyCode == DOWN_ARROW) {
             controller.downarrow = isPressed
           }
           if (keyCode == Q_KEY) {
             controller.qkey = isPressed
           }
           if (keyCode == E_KEY) {
             controller.ekey = isPressed
           }
         }
         function handleControls() {
           if (controller.down) {
             hero.y += HERO_MOVEMENT
           }
           if (controller.up) {
             hero.y -= HERO_MOVEMENT
           }
           if (controller.left) {
             hero.x -= HERO_MOVEMENT;
           }
           if (controller.right) {
             hero.x += HERO_MOVEMENT;
           }
           if (controller.qkey && laser.x <= -120) {
             laser.x=hero.x-20;
             laser.y=hero.y+15;
           }
           if (controller.ekey && laser.x <= -120) {
             laser.x=hero.x+20;
             laser.y=hero.y+10;
           }

           ensureBounds(hero);
         }
         function showSprites() {
           setPosition(hero);
           setPosition(laser);
           setPosition(player)
         }
         function updatePositions() {
           laser.x-= 90
         }
         function loop() {
           if (new Date().getTime() - lastLoopRun > 40) {
             updatePositions();
             handleControls();
             showSprites();
             lastLoopRun = new Date().getTime();
           }
           setTimeout('loop();', 2);
         }

         document.onkeydown = function(evt) {
           toggleKey(evt.keyCode, true);
         };

         document.onkeyup = function(evt) {
           toggleKey(evt.keyCode, false);
         };
         loop();
         function setPosition(sprite) {
           var e = document.getElementById(sprite.element)
   //***LINE 216-***        e.style.left = sprite.x + 'px';
           e.style.top = sprite.y + 'px';
         }
         createSprite('laser', 0, -120, 2, 50)

        </script>
      </body>
    </html>