クリックしたときにドキュメントにdivを追加すると、それはなぜですか？

私はこのボタンをクリックすると、その高さと幅を持つdivをドキュメント上に作成するボタンを作成しようとしています。 divはdiv.style.leftとdiv.style.topに乱数を与えることでランダムな位置になります。それは働いていない、なぜ私に知らせることができますか？本当に感謝しています。ありがとうございました。クリックしたときにドキュメントにdivを追加すると、それはなぜですか？

<html> 
    <head> 
    <title></title> 

    </head> 


    <body> 

    <button id = "button" onclick = "addMonster()">add monster</button> 
    <div id = "square"> 
    </div> 

    <style> 
    #square { 
     width: 100px; 
     height: 100px; 
     background-color: white; 
     border: 2px solid black; 
     font-size:20px; 
     color: black; 
     position:absolute; 
     left: 50px; 
     top: 80px; 
    } 


    * { 
    box-sizing: border-box; 
    } 

    body, html { 
    margin: 0; 
    padding: 0; 
    } 



    </style> 
    <script> 

    var monster = { 
    height: 0, 
    width: 0, 
    top: 0, 
    left: 0 
    }; 

    function addMonster() { 
    monster.height = 100; 
    monster.width = 100; 
    monster.left = Math.floor((Math.random() * 100) + 1); 
    monster.top = Math.floor((Math.random() * 100) + 1); 

    var div = document.createElement('div'); 
    document.body.appendChild(div); 

    div.style.width = monster.width + "px"; 
    div.style.height = monster.height + "px"; 
    div.style.left = monster.left + "px"; 
    div.style.top = monster.top + "px"; 
    div.style.backgroundColor = "red"; 
    div.style.border = 2px solid red; 
    div.innerHTML = "hello"; 
    }; 





    </script> 
    </body> 

    </html>

出典

2017-01-22 Abdirizak Obsiye

デバッグのためのブラウザコンソールを使用してください。 – Smiranin

sytaxエラーがあります。「機能しません」とはどういう意味ですか？ –

この行によってコードが壊れています。

div.style.border = 2px solid red;

それは

div.style.border = "2px solid red";

P.Sする必要があります：常に、エラーのために未定義の変数のような問題をデベロッパーコンソールをチェックし、予想外の識別子が簡単にそれを使用してデバッグすることができます。

var monster = { 
 
    height: 0, 
 
    width: 0, 
 
    top: 0, 
 
    left: 0 
 
}; 
 

 
function addMonster() { 
 
    monster.height = 100; 
 
    monster.width = 100; 
 
    monster.left = Math.floor((Math.random() * 100) + 1); 
 
    monster.top = Math.floor((Math.random() * 100) + 1); 
 
    
 
    
 
    
 
    var div = document.createElement('div'); 
 
    document.body.appendChild(div); 
 

 
    div.style.width = monster.width + "px"; 
 
    div.style.height = monster.height + "px"; 
 
    div.style.left = monster.left + "px"; 
 
    div.style.top = monster.top + "px"; 
 
    div.style.backgroundColor = "red"; 
 
    div.style.border = "2px solid red"; 
 
    div.innerHTML = "hello"; 
 

 

 
};

#square { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: white; 
 
    border: 2px solid black; 
 
    font-size: 20px; 
 
    color: black; 
 
    position: absolute; 
 
    left: 50px; 
 
    top: 80px; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<html> 
 

 
<head> 
 
    <title></title> 
 

 
</head> 
 

 

 
<body> 
 

 
    <button id="button" onclick="addMonster()">add monster</button> 
 
    <div id="square"> 
 
    </div> 
 

 

 
</body> 
 

 
</html>

出典

2017-01-22 14:00:59 Deep

素晴らしい！完璧に働いた。ありがとうございました。：D –

addMonster()メソッドの定義を妨げているコードにエラーがあります。

サラウンド2px solid redは引用符で囲まれています。

ブラウザで開発者コンソールを使用することをお勧めします。これは、このようなバグを簡単に特定するのに役立ちます。がんばろう！

出典

2017-01-22 14:00:49

ありがとうございます。それは今働きます！ –

それを聞いてうれしい！ –

クリックしたときにドキュメントにdivを追加すると、それはなぜですか？

答えて

関連する問題