シンプルなHTML/Javascriptが動作しない

-6

ローカルのフォルダからランダムなイメージを選択する単純なHTMLページがあります。たとえばsrcを "images/gif10.gif"に変更すると、ページは正常に動作します。私はJavascriptをとても使い慣れていて、何が間違っているのか分からない。シンプルなHTML/Javascriptが動作しない

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>New Tab</title> 
    <div id="bg"> 
     <img id="gb" src="" alt=""> 
    </div> 
    <style> 
    #bg { 
     position: fixed; 
     top: -50%; 
     left: -50%; 
     width: 200%; 
     height: 200%; 
    } 
    #bg img { 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     margin: auto; 
     min-width: 50%; 
     min-height: 50%; 
    } 
    </style> 
    <script> 
    window.onload = function() { 
     var randomNumber = Math.floor(Math.random() * 10) + 1; 
     var imgName = "gif" + randomNumber + ".gif"; 
     document.getElementById("gb").src= "images/" + imgName ; 
    } 
    </script> 
</head> 
<body> 
</body> 
</html>

出典

2017-09-06 zach

あなたのHTMLは無効です。本体の外にdivやimgのような要素を置くことはできません – j08691

そのままコピーして貼り付けたコードは正常に動作します。以前のコメントで述べたように、構造的に無効なHTMLです。しかし、JavaScriptの部分は動作します。 – David

headからdivをbodyタグに入れる必要があります。 –

window.onload = function() { 
 
    var randomNumber = Math.floor(Math.random() * 10) + 1; 
 
    var imgName = "technics-q-c-640-480-" + randomNumber + ".jpg"; 
 
    document.getElementById("gb").src= "http://lorempixel.com/output/" + imgName ; 
 
}

#bg { 
 
    position: fixed; 
 
    top: -50%; 
 
    left: -50%; 
 
    width: 200%; 
 
    height: 200%; 
 
} 
 
#bg img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    min-width: 50%; 
 
    min-height: 50%; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>New Tab</title> 
 
</head> 
 
<body> 
 
    <div id="bg"> 
 
     <img id="gb" src="" alt=""> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-09-06 19:44:55 Benfarhat

シンプルなHTML/Javascriptが動作しない

答えて

関連する問題