为了账号安全,请及时绑定邮箱和手机立即绑定

HTML中的背景不会根据可变数字而改变

HTML中的背景不会根据可变数字而改变

料青山看我应如是 2022-06-09 19:32:52
我正在尝试制作一个简单的游戏,其中背景每 20 次跳跃就会改变一次。有这个问题。当跳跃计数器达到 20 时,背景不会改变。我不知道我做错了什么。我尝试使用“document.getElementById('sample').innerhtml”将 CSS 代码更改为更改背景的更新 CSS。它似乎不起作用。我检查了 JavaScript 控制台,它说的是“未捕获的 TypeError:无法在 index.html:15 处设置属性 'innerHTML' of null”。目前使用一个按钮来测试跳跃。这是整个文件:(我知道它很乱)<html><head>    <title>Background Slide Test</title>    <script type="text/javascript">        var jump_count = 0;        //Mechanics for the character to jump (Jump counter and character movement)        function incline(){            jump_count++;            document.getElementById('counter').innerHTML = "<h1 class='counter'>Jump Count: " + jump_count + "</h1>";            document.getElementById('jump_animation').innerHTML = ".jump{animation:jump 0.4s linear;}@keyframes jump{0%{transform:translate3d(0, 0, 0);}50%{transform:translate3d(0, -300px, 0);}100%{transform:translate3d(0, 0, 0);}}";        }        //If, else if, else: Changes the scene according to amount of jumps        if (jump_count < 20){            //This willchange the background to be 'field.png'            document.getElementById('background').innerHTML = "html{background-color:black;animation:day_cycle 180s linear infinite;}.background{background:url('test.png') repeat-x;height:100%;width:3050px;animation:slide 3s linear infinite;}@keyframes slide{0%{transform:translate3d(0, 0, 0);}100%{transform:translate3d(-1600px, 0, 0);}}@keyframes day_cycle{0% {background-color:#0063fd;}15% {background-color:orange;}30% {background-color:red;}45% {background-color:#4B0082;}60% {background-color:red;}75% {background-color:orange;}100% {background-color:#0062fd;}}";        } else if (jump_count > 20 && jump_count < 40){        } else {            //Nothing happens        }        //This is where when the space button is pressed, the sprite will jump //This does nothing yet        function space(){            if (e.key === 37){                jump_count++;            } else {                //Nothing will happen            }        }    </script>
查看完整描述

2 回答

?
万千封印

TA贡献1891条经验 获得超3个赞

Uncaught TypeError: Cannot set property 'innerHTML' of null at index.html:15"。这意味着它没有找到您要获取的元素。console.log( document.getElementById('sample'));用于检查输出...如果确实找不到该元素,然后仔细检查你的 html id。我看到的一个可能的错误是你有 2 个相同的 id。“背景”不应该发生



查看完整回答
反对 回复 2022-06-09
?
开心每一天1111

TA贡献1836条经验 获得超13个赞

这是因为这部分:


    if (jump_count < 20){

        //This willchange the background to be 'field.png'

        document.getElementById('background').innerHTML = "html{background-color:black;animation:day_cycle 180s linear infinite;}.background{background:url('test.png') repeat-x;height:100%;width:3050px;animation:slide 3s linear infinite;}@keyframes slide{0%{transform:translate3d(0, 0, 0);}100%{transform:translate3d(-1600px, 0, 0);}}@keyframes day_cycle{0% {background-color:#0063fd;}15% {background-color:orange;}30% {background-color:red;}45% {background-color:#4B0082;}60% {background-color:red;}75% {background-color:orange;}100% {background-color:#0062fd;}}";

    } else if (jump_count > 20 && jump_count < 40){

        document.getElementById('background').innerHTML = "html{background-color:black;animation:day_cycle 180s linear infinite;}.background{background:url('field.png') repeat-x;height:100%;width:3050px;animation:slide 3s linear infinite;}@keyframes slide{0%{transform:translate3d(0, 0, 0);}100%{transform:translate3d(-1600px, 0, 0);}}@keyframes day_cycle{0% {background-color:#0063fd;}15% {background-color:orange;}30% {background-color:red;}45% {background-color:#4B0082;}60% {background-color:red;}75% {background-color:orange;}100% {background-color:#0062fd;}}";

    } else {

        //Nothing happens

    }

脚本的那部分没有包含在函数中,因此它会立即执行。由于脚本标签位于头部内部,因此它无需等待页面准备好即可执行。所以该background元素还不存在。


您可以将该部分放在页面ready事件的处理程序中,但最简单的做法是将整个script标签移动到正文的末尾。


查看完整回答
反对 回复 2022-06-09
  • 2 回答
  • 0 关注
  • 106 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信