Question

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

2020-04-01

60

javascript html css

我正在尝试制作一个简单的游戏，其中背景每 20 次跳跃就会改变一次。有一个问题。当跳跃计数器达到 20 时，背景不会改变。我不知道我做错了什么。我尝试使用“document.getElementById('sample').innerhtml”将 CSS 代码更改为更改背景的更新 CSS。它似乎不起作用。我检查了 JavaScript 控制台，它只显示“Uncaught TypeError：无法在 index.html:15 设置 null 的属性“innerHTML”。目前使用一个按钮来测试跳跃。

这是整个文档：（我知道它很乱）

<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){
            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
        }
        //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>
    <style type="text/css">
        .container{
            overflow:hidden;
        }
        .counter{
            position:absolute;
            z-index:4;
            right:50px;
            top:15px;
        }
    </style>
    <style type="text/css" id="background">
        html{
            background-color:black;
            animation:day_cycle 180s linear infinite;
        }
        .background_class{
            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;}
        }
    </style>
    <style type="text/css" id="jump_animation">
        .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);}
        }
    </style>
</head>
<body>
    <div class="container">
        <audio autostart loop hidden>
            <source src="track 1.wav" type="audio/wav">
        </audio>
        <img src="character_sprite.gif" alt="sprite" style="position:absolute;top:290px;left:75px;z-index:3;" class="jump">
        <div id="counter">
            <!--The Jump counter within the top-right corner-->
            <h1 class="counter">Jump Count: 0</h1>
        </div>
        <div class="background_class" id='background'></div>
        <button onclick="incline()">Increment Test</button>
    </div>
</body>

Answer 1

未捕获 TypeError：无法在 index.html:15 处设置 null 的属性“innerHTML”。这意味着它没有找到您尝试获取的元素。使用 console.log( document.getElementById('sample')); 检查输出...如果确实找不到该元素，请仔细检查您的 html id。我看到的一个可能的错误是您有 2 个相同的 id。“background”不应该发生

Answer 2

这是因为这部分：

    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 标记移动到正文末尾。

演示：

您的代码原样（带有 TypeError）： https://jsfiddle.net/g1vLbf8a/
脚本移动到正文末尾（无 TypeError）： https://jsfiddle.net/bemt2z0u/