Fatal编程技术网

Javascript平铺贴图生成器

javascript jquery html

Javascript平铺贴图生成器,javascript,jquery,html,Javascript,Jquery,Html,我想编程一个瓷砖地图只有一张图片。它应该是一个5x5的小图片区域。我已经编写了一些带有两个嵌套循环的Javascript代码。使用此解决方案，仅打印1张图片。当我在第二个循环中删除br标记时，将打印5张图片，但只打印一行，而不是在它们之间。有什么问题吗？我怎么能意识到这一点 window.onload=function() { document.getElementById('button_generateField').addEventListener('click', functio

我想编程一个瓷砖地图只有一张图片。它应该是一个5x5的小图片区域。我已经编写了一些带有两个嵌套循环的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);

};


};

});}

window.onload=function（）{
document.getElementById（'button_generateField'）。addEventListener（'click'，function generateField（spacefields））{

for（var i=0；i
/Grafiken/spacefieldsd.jpg
看起来像一个打字错误。
使用
document.createElement（“img”）
而不是
new Image（）
。
您的

将无法工作，您需要
document.createElement（“br”）



var btn=document.getElementById（“按钮生成字段”）；
var div=document.getElementById（“主”）；
var行=4；
var-cols=4；
var x=0；
var y=0；
btn.addEventListener（“单击”，函数（）{

对于（y=0；yy您在内部和外部循环上使用相同的变量名
i
。当内部循环结束时，外部循环不再满足继续的条件（因为
i
现在大于4）-为内部循环使用不同的变量名（我建议
j
）看看你是怎么对的，不明白。我已经改变了，但问题仍然是一样的。它只需点击按钮一次就可以打印出一张图片。你能把你正在使用的HTML添加到你的问题中吗？这只是一个非常简单的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>