用于onclick函数的Javascript

我试图通过制作战舰游戏来练习我的脚本。如所见here。用于onclick函数的Javascript

我目前正在尝试制作电路板2D。然而，由于测试的目的，我能够制作一个for-loop来制作电路板，我只是试图制作电路板，点击一个正方形后，它变成红色......但是，底部正方形总是点亮。我试图通过使c值为空来调试它，但是它只是停止工作。我知道这不是正确保存c值，但我想知道如何解决这个问题。

我必须自己制造100个方格吗？或者我真的可以让剧本做到吗？

maincansize = 400; 
 
document.getElementById("Main-Canvas").style.height = maincansize; 
 
document.getElementById("Main-Canvas").style.width = maincansize; 
 
document.getElementById("Main-Canvas").style.position = "relative"; 
 
var ize = maincansize * .1; 
 
for (var a = 0; a < 10; a++) { 
 
    for (var b = 0; b < 10; b++) { 
 
    var c = document.createElement("div"); 
 
    var d = c; 
 
    c.onclick = function() { 
 
     myFunction() 
 
    }; 
 
    function myFunction() { 
 
     console.log("A square was clicked..." + c.style.top); d.style.backgroundColor = "red"; 
 
    } 
 
    c.style.height = ize; 
 
    c.style.width = ize; 
 
    c.style.left = b * ize; 
 
    c.style.top = a * ize; 
 
    c.style.borderColor = "green"; 
 
    c.style.borderStyle = "outset"; 
 
    c.style.position = "absolute"; 
 
    console.log(ize); 
 
    document.getElementById('Main-Canvas').appendChild(c); 
 

 
    } //document.getElementById('Main-Canvas').innerHTML+="<br>"; 
 
}

#Main-Canvas { 
 
    background-color: #DDDDDD; 
 
}

<div> 
 
    <div id="header"></div> 
 
    <script src="HeaderScript.js"></script> 
 
</div> 
 
<div id="Main-Canvas" style="height:400;width:400;"> 
 

 
</div>

来源

2017-01-26 William

当你插入代码，每行前加上了空格（或选择整个代码，然后按'{}'符号） –

谢谢，尝试这样做。 – William

你想要做的是获得实际触发点击的元素 - http://stackoverflow.com/questions/1553661/how-to-get-the-onclick-calling-object – Craicerjack

这里是你的代码的一些修正：

添加 '像素' 样式分配
通过点击的元素myFunction

var maincansize = 400; 
 
document.getElementById("Main-Canvas").style.height = maincansize; 
 
document.getElementById("Main-Canvas").style.width = maincansize; 
 
document.getElementById("Main-Canvas").style.position = "relative"; 
 
var ize = maincansize * .1; 
 

 
for (var a = 0; a < 10; a++) { 
 
    for (var b = 0; b < 10; b++) { 
 
    var c = document.createElement("div"); 
 
    c.onclick = function(ev) { 
 
     myFunction(ev.currentTarget); 
 
    }; 
 

 
    function myFunction(el) { 
 
     console.log("A square was clicked..."); 
 
     el.style.backgroundColor = "red"; 
 
    } 
 
    c.style.height = ize+'px'; 
 
    c.style.width = ize+'px'; 
 
    c.style.left = (b * ize)+'px'; 
 
    c.style.top = (a * ize)+'px'; 
 
    c.style.borderColor = "green"; 
 
    c.style.borderStyle = "outset"; 
 
    c.style.position = "absolute"; 
 
    document.getElementById('Main-Canvas').appendChild(c); 
 
    } 
 
}

#Main-Canvas { 
 
    background-color: #DDDDDD; 
 
}

<div id="Main-Canvas" style="height:400;width:400;"> 
 

 
</div>

来源

2017-01-26 15:46:08 Giladd

下面是一个包含主要改造的解决方案。既然你使用了一个设置宽度的单元格的容器元素，你可以浮动单元格，它们将换行到下一行。绝对定位往往是一个讨厌的人。如果你想每行10个项目它是那么容易，因为：

<container width>/<items per row> = <width>

使用文档片段是在同一时刻的实际DOM追加每个元素的速度更快。相反，您可以将这些元素追加到不属于DOM一部分的文档片段中，直到您追加它。通过这种方式，您可以为所有单元格插入一个而不是100个。

我将一些样式移至CSS，但如果您真的需要，可以轻松将其移回JS。

function onCellClick() { 
 
    
 
    this.style.backgroundColor = 'red'; 
 
    
 
    console.log('selected'); 
 
    
 
} 
 

 
var main = document.getElementById('board'), 
 
    frag = document.createDocumentFragment(), 
 
    i = 0, 
 
    len = 100; 
 

 
for (; i < len; i++) { 
 

 
    div = document.createElement('div'); 
 
    
 
    div.addEventListener('click', onCellClick, false); 
 
    frag.appendChild(div); 
 
    
 
} 
 

 
main.appendChild(frag);

#board { 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 
#board div { 
 
    float: left; 
 
    box-sizing: border-box; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid #ccc; 
 
}

<div id="board"></div>

来源

2017-01-26 16:01:46 hungerstar

用于onclick函数的Javascript

回答

相关问题