画面上のランダムな場所に要素を作成しようとしていますが、いくつかの問題に直面しています。要素を作成することはできますが、ランダムな場所を作成しようとしても、何も起こりません。事前に助けてくれてありがとう。
ここに私のコードがあります:
var newObject = document.createElement("DIV");
newObject.setAttribute("class", "object");
newObject.setAttribute("id", "powerup");
document.body.appendChild(newObject);
var powerup = document.getElementById("powerup");
var object = document.getElementsByClassName("object");
for (i = 0; i < object.length; i++) {
object[i].style.top = Math.floor(Math.random() * window.innerHeight) + 50 + "px";
object[i].style.left = Math.floor(Math.random() * window.innerWidth) + 50 + "px";
}
function createObject() {
var newObject = document.createElement("DIV");
newObject.setAttribute("class", "object");
newObject.setAttribute("id", "powerup");
document.body.appendChild(newObject);
for (i = 0; i < object.length; i++) {
object[i].style.top = Math.floor(Math.random() * window.innerHeight) + 50 + "px";
object[i].style.left = Math.floor(Math.random() * window.innerWidth) + 50 + "px";
}
}
html, body {
height: 100%;
width: 100%;
margin: 0;
}
#powerup {
background: red;
height: 10px;
width: 10px;
}
<body>
<button onclick="createObject()">Create a Block</button>
</body>
回答 2 件
コードは正常に機能しています。各
#powerup
の上部と左側を設定できます 素子。唯一の問題は、position
#powerup
の はstatic
です デフォルトで。だからあなたはちょうど#powerup
のCSSを変更する必要があります への要素#powerup { background: red; height: 10px; width: 10px; position: relative; }
position: absolute
使用することもできます。要件に合ったものを選択してください。
関連した質問
- 1つにカーソルを合わせると、別のCSSに影響します
- CSS:ぼやけたdiv内のぼやけたdivの問題
- 純粋なCSSオーバーレイスクロール
- 水平ナビゲーションバーのドロップダウンメニューの配置関連の問題
- ブートストラップドロップダウン-メニューが開かない
- HTML/CSS + JS(Datatables)で2つの列を1つにマージしてテーブルを表示する
- ページの下部にいるときにドロップダウンボタンに触れると、フッターを持ち上げるスティッキーナビゲーションバー
- ボックスシャドウインセットと通常のdivを持つ方法はありますか
- HTMLとJavaScriptを使用してコピーボタンを作成するにはどうすればよいですか?
- JavaScript onclick画像を変更し、カウンターを増やします
あなたのコードでCodePenを作成しました。
それらの要素に
top
を持たせるため およびleft
プロパティには効果があるため、position: absolute;
を追加する必要があります#powerup
へ 要素。また、これが意図したものかどうかはわかりませんが、JavaScriptコードは既存の
#powerup
ごとに新しいランダムな場所を選択しています ボタンをクリックするたびに要素。