我想用一张图片来编写一个平铺 map 。它应该是一个 5x5 的小图片区域。我写了一些带有 2 个嵌套循环的 Javascript 代码。使用此解决方案，仅打印 1 张图片。当我在第二个循环中删除 br 标签时，会打印 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>
最佳答案
/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 平铺 map 生成器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49201824/