Question

我的代码有点问题。我试图将Connect4编程为一个HTML网站，所以我有了这个想法，我可以用Javascript来做这个，所以我这样做了：

<!doctype html>
<html>
<head>
<title>CONNECT4 Nils Version</title>
<meta charset="UTF-8">
<style>
body {
background-color: red;
}
</style>
</head>
<body>
<center>
<h1>CONNECT4 N-Version</h1>
<input type="image" src="normal.png" id="1" width="100" onclick="einsrr()"> 
<input type="image" src="normal.png" id="2" width="100" onclick="zweirr()">
 <input type="image" src="normal.png" id="3" width="100" onclick="dreirr()">
 <input type="image" src="normal.png" id="4" width="100" onclick="vierrr()">
 <input type="image" src="normal.png" id="5" width="100" onclick="fuenfrr()">
 <input type="image" src="normal.png" id="6" width="100" onclick="sechsrr()">
 <input type="image" src="normal.png" id="7" width="100" onclick="siebenrr()"><br>

 <img src="normal.png" id="11" width="100"> 
 <img src="normal.png" id="12" width="100">
 <img src="normal.png" id="13" width="100">
 <img src="normal.png" id="14" width="100">
 <img src="normal.png" id="15" width="100"> 
 <img src="normal.png" id="16" width="100">
 <img src="normal.png" id="17" width="100"><br>

 <img src="normal.png" id="21" width="100">
 <img src="normal.png" id="22" width="100">
 <img src="normal.png" id="23" width="100">
 <img src="normal.png" id="24" width="100">
 <img src="normal.png" id="25" width="100">
 <img src="normal.png" id="26" width="100">
 <img src="normal.png" id="27" width="100"><br>

 <img src="normal.png" id="31" width="100">
 <img src="normal.png" id="32" width="100">
 <img src="normal.png" id="33" width="100">
 <img src="normal.png" id="34" width="100">
 <img src="normal.png" id="35" width="100">
 <img src="normal.png" id="36" width="100">
 <img src="normal.png" id="37" width="100"><br>

 <img src="normal.png" id="41" width="100">
 <img src="normal.png" id="42" width="100">
 <img src="normal.png" id="43" width="100">
 <img src="normal.png" id="44" width="100">
 <img src="normal.png" id="45" width="100">
 <img src="normal.png" id="46" width="100">
 <img src="normal.png" id="47" width="100"><br>

 <img src="normal.png" id="51" width="100">
 <img src="normal.png" id="52" width="100">
 <img src="normal.png" id="53" width="100">
 <img src="normal.png" id="54" width="100">
 <img src="normal.png" id="55" width="100">
 <img src="normal.png" id="56" width="100">
 <img src="normal.png" id="57" width="100"><br>

 <img src="normal.png" id="61" width="100">
 <img src="normal.png" id="62" width="100">
 <img src="normal.png" id="63" width="100">
 <img src="normal.png" id="64" width="100">
 <img src="normal.png" id="65" width="100">
 <img src="normal.png" id="66" width="100">
 <img src="normal.png" id="67" width="100"><br><br><br>
</center>
<script>
function einsrr() {
    if (document.getElementById("61").src = "normal.png") {
        document.getElementById("61").src = "redstone.png";
        }else if(document.getElementById("51").src = "normal.png") {
            document.getElementById("51").src ="redstone.png";  
        }else   if(document.getElementById("41").src = "normal.png") {
            document.getElementById("41").src = "redstone.png";
        }else if(document.getElementById("31").src = "normal.png") {
            document.getElementById("31").src = "redstone.png";
        }else if(document.getElementById("21").src = "normal.png") {
            document.getElementById("21").src = "redstone.png";
        }else if(document.getElementById("11").src = "normal.png") {
            document.getElementById("11").src = "redstone.png";
        }
    }
</script>
</body>
</html>

我想要做的是，当你点击第一行时，如果有图像normal.png则检查是否为真如果它是图像redstone.png将其替换为图像redstone.png，如果它为false则测试上面的图像它，但我只能点击一次图像，当我点击另一次它不会做任何我会apreciate如果有人帮助我谢谢你：D

Answer 1

不完全确定你想要完成什么，但对于初学者来说，在函数einsrr（）中而不是使用赋值运算符＆＃34; =＆＃34;在test子句中，它应该是比较运算符＆＃34; ==＆＃34;或＆＃34; ===＆＃34;像这样：

if (document.getElementById("61").src == "http://yourSite.com/path2image/normal.png") { //etc.

请注意，使用.src时，必须比较整个网址，而不仅仅是＆＃34; normal.png＆＃34;

所以，在我的服务器上测试得很好：

<script>
    function einsrr() {
        if (document.getElementById("t").src == 'http://yourServer.com/path2images/normal.png') {
            document.getElementById("t").src = 'redstone.png';
            }
        }
    </script>
    </head>
    <body>

    <center>
    <h1>CONNECT4 N-Version3</h1>
    <img src="normal.png" id="t" onclick="einsrr();"> 
    <br><br>
    </center>

...有效，图像被交换。但这是一次性交换 - 如果你想来回交换等等，你需要添加if else if逻辑。

HTML Connect4堆叠图像

1 个答案: