Javascript Tile Map Generator

Question

我想用一張圖片來編程一張瓷磚地圖。 它應該是5x5的小圖片字段。 我寫了一些帶有2個嵌套循環的Javascript代碼。 使用此解決方案，僅打印1張圖片。 當我在第二個循環中刪除br Tag時，將打印5張圖片，但僅連續打印5張，而不會在彼此之間打印。 有什么問題？ 我怎么能意識到呢？

window.onload=function() {
    document.getElementById('button_generateField').addEventListener('click', function generateField (spacefields) {

for (var i = 0; i <= 4; i++) {

    var horizontal_field = new Image();
    horizontal_field.src = 'Grafiken/spacefields.jpg';
    document.body.appendChild(horizontal_field);


    for (var j = 0; j <= 4; j++){

        var vertical_field = new Image();
        vertical_field.src = '/Grafiken/spacefieldsd.jpg';
        document.body.appendChild( '<br>' + vertical_field);

};


};

});}

的HTML

<!DOCTYPE HTML>
<html lang="de">

<head>
<meta charset="utf-8">
<title>Test</title>

<style type="text/css">

</head>
<body>
<div id="header">
<img src="testbanner1.jpg" alt="banner" width="1500" height="150px" >
</div>

<div id="main">

<button id="button_generateField">Generate Field!</button>

</div>

</body>
</html>

Answer 1

/Grafiken/spacefieldsd.jpg看起來像是一個錯字。 使用document.createElement("img")代替new Image() 。 您的<br>無法正常工作，您需要document.createElement("br")

 var btn = document.getElementById("button_generateField"); var div = document.getElementById("main"); var rows = 4; var cols = 4; var x = 0; var y = 0; btn.addEventListener("click", function(){ for(y=0;y<rows;y++){ for(x=0;x<cols;x++){ var img = document.createElement("img"); img.src = "https://via.placeholder.com/100x100"; img.onload = function(){ } div.appendChild(img); } div.appendChild(document.createElement("br")); } });

 <button id="button_generateField">Generate Field!</button> <div id="main"> </div>

Javascript Tile Map Generator

問題描述

1 個解決方案

解決方案1
2 已采納 2018-03-09 21:22:36

Javascript Tile Map Generator

問題描述

1 個解決方案

解決方案1 2 已采納 2018-03-09 21:22:36

解決方案1
2 已采納 2018-03-09 21:22:36