1

生の HTML/javascript を使用して小さな Web ページを作成しようとしています。私のHTMLファイルの現在のコンテンツ全体は次のとおりです。

<!DOCTYPE html>
<html>
    <head>
        <title>My website</title>
        <style>
        * {
           margin: 0px;
           padding: 0px;
        }

        div.banner-light {
            background-color:#9090d0;
            position: absolute;
            left:0px;
        }

        div.banner-dark {
            background-color:#8080e0;
            position: absolute;
            left:0px;
        }
        </style>
    </head>

    <body onload="javascript:onLoadBody()">

    <script>
        function onLoadBody() {
            var curHeight = 0;
            for (var i = 1; i < 25; i++) {
                document.getElementById("stat" + i.toString()).style.top = curHeight.toString() + "px";
                document.getElementById("stat" + i.toString()).style.width = (screen.availWidth * 0.15).toString() + "px";
                document.getElementById("stat" + i.toString()).style.height = ((window.innerHeight - curHeight) / (25 - i)).toString() + "px";

                curHeight += ((window.innerHeight - curHeight) / (25 - i));
            }
        }

        function clickDiv(id) {
            document.getElementById("stat" + id).innerHTML = "Clicked";
        }
    </script>

    <div id='stat1' class="banner-light" onclick="javascript:clickDiv(1)"><center>1</center></div>
    <div id='stat2' class="banner-dark" onclick="javascript:clickDiv(2)"><center>2</center></div>
    <div id='stat3' class="banner-light" onclick="javascript:clickDiv(3)"><center>3</center></div>
    <div id='stat4' class="banner-dark" onclick="javascript:clickDiv(4)"><center>4</center></div>
    <div id='stat5' class="banner-light" onclick="javascript:clickDiv(5)"><center>5</center></div>
    <div id='stat6' class="banner-dark" onclick="javascript:clickDiv(6)"><center>6</center></div>
    <div id='stat7' class="banner-light" onclick="javascript:clickDiv(7)"><center>7</center></div>
    <div id='stat8' class="banner-dark" onclick="javascript:clickDiv(8)"><center>8</center></div>
    <div id='stat9' class="banner-light" onclick="javascript:clickDiv(9)"><center>9</center></div>
    <div id='stat10' class="banner-dark" onclick="javascript:clickDiv(10)"><center>10</center></div>
    <div id='stat11' class="banner-light" onclick="javascript:clickDiv(11)"><center>11</center></div>
    <div id='stat12' class="banner-dark" onclick="javascript:clickDiv(12)"><center>12</center></div>
    <div id='stat13' class="banner-light" onclick="javascript:clickDiv(13)"><center>13</center></div>
    <div id='stat14' class="banner-dark" onclick="javascript:clickDiv(14)"><center>14</center></div>
    <div id='stat15' class="banner-light" onclick="javascript:clickDiv(15)"><center>15</center></div>
    <div id='stat16' class="banner-dark" onclick="javascript:clickDiv(16)"><center>16</center></div>
    <div id='stat17' class="banner-light" onclick="javascript:clickDiv(17)"><center>17</center></div>
    <div id='stat18' class="banner-dark" onclick="javascript:clickDiv(18)"><center>18</center></div>
    <div id='stat19' class="banner-light" onclick="javascript:clickDiv(19)"><center>19</center></div>
    <div id='stat20' class="banner-dark" onclick="javascript:clickDiv(20)"><center>20</center></div>
    <div id='stat21' class="banner-light" onclick="javascript:clickDiv(21)"><center>21</center></div>
    <div id='stat22' class="banner-dark" onclick="javascript:clickDiv(22)"><center>22</center></div>
    <div id='stat23' class="banner-light" onclick="javascript:clickDiv(23)"><center>23</center></div>
    <div id='stat24' class="banner-dark" onclick="javascript:clickDiv(24)"><center>24</center></div>

    </body>
</html>

不思議なことに、このファイルをブラウザーで表示しようとすると、ページの左側に 1 から 24 までの数字が交互の背景で表示されることがあります。しかし、約 5 回中 4 回は、エラーを示す方法ですべての数値が左上に集まります (自分で試してみてください)。

奇妙なことに、まったく編集せずにこの正確なファイルを 10 回開くことができ、数回しか正しく動作しません。これが可能だとは思いもしませんでしたが、プログラマーとして知っていることすべてに反することは確かです。これを引き起こす可能性のある何かを知っている場合は、お知らせください。ちなみに、私はかなり新しく、これを自分自身に教えているので、私がうまくいかなかったかもしれないことを許してください.

編集: HTML、JS、および CSS の順序に関するいくつかの提案された解決策をいじった後、上記のコードがいかに複雑であるかに気付きました: onload を使用する代わりに、div のスタイルの幅と高さをパーセンテージに設定しました。とにかくみんなありがとう！

4

2 に答える 2