Question

我对html和javascript仍然很新，所以我对如何做一些事情有一些疑问。如何跟踪我的脚本标签中是否选择了一组匹配的卡片？我尝试在我的脚本标记中创建一个全局变量来跟踪它，但是，它会导致没有任何函数触发。如果有人能为我解释这一点，我将不胜感激。正如我之前所说，我只是学习javascript和html（实际上是两天前），而且我对某些逻辑仍然模糊不清。

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>



    <h1>This is a test of the game</h1>
    <img id="topLeft" onclick="changeImageTL()" src="word-ace-card-back.jpg" width="104" height="142">
    <img src="word-ace-card-back.jpg" onclick="changeImageTM()" id="topMiddle" onclick="changeImageTM()" width="104" height="142">
    <img src="word-ace-card-back.jpg" onclick="changeImageTR()" id="topRight" width="104" height="142">
    <br>
    <img src="word-ace-card-back.jpg" onclick="changeImageML()" id="middleLeft" width="104" height="142">
    <img src="word-ace-card-back.jpg" onclick="changeImageM()" id="middle"width="104" height="142">
    <img src="word-ace-card-back.jpg" onclick="changeImageMR()" id="middleRight" width="104" height="142">
    <br>
    <img src="word-ace-card-back.jpg" onclick="changeImageBL()" id="bottomLeft" width="104" height="142">
    <img src="word-ace-card-back.jpg" onclick="changeImageBM()" id="bottomMiddle" width="104" height="142">
    <img src="word-ace-card-back.jpg" onclick="changeImageBR()" id="bottomRight" width="104" height="142">
    <br>
    <br>
    <p> Hints: </p>
    <label for="carrot" hidden = true>Carrot</label><br>
    <label for="potato" hidden = true>Potato</label><br>
    <label for="cabbage" hidden = true>Cabbage</label><br>
    <br>
    <br>
      1. <input type="text" name="question1"> are grown from the dirt and are orange<br><br><br>
      2. <input type="text" name="question2"> is a potato<br><br><br>
      3. <input type="text" name="question3"> cabbage or something<br><br><br>
      4. <input type="text" name="question3"> radish<br><br><br>
      <input type="submit" value="Submit">

    <script>
    function changeImageTL() {

        var image = document.getElementById('topLeft');
        if ("word-ace-card-back.jpg") {
            image.src = "carrot-fb.jpg";
        } else if("carrot-fb.jpg") {
            image.src = "word-ace-card-back.jpg";
        }

    }

    function changeImageTM() {

        var image = document.getElementById('topMiddle');
        if ("word-ace-card-back.jpg") {
            image.src = "carrot-fb.jpg";
        } else if("carrot-fb.jpg") {
            image.src = "word-ace-card-back.jpg";
        }

    }

    function changeImageTR() {

        var image = document.getElementById('topRight');
        if ("word-ace-card-back.jpg") {
            image.src = "Potato_wiki.jpg";
        } else if("Potato_wiki.jpg") {
            image.src = "word-ace-card-back.jpg";
        }

    }

    function changeImageML() {

        var image = document.getElementById('middleLeft');
        if ("word-ace-card-back.jpg") {
            image.src = "corn.jpg";
        } else if("corn.jpg") {
            image.src = "word-ace-card-back.jpg";
        }

    }

    function changeImageM() {

        var image = document.getElementById('middle');
        if ("word-ace-card-back.jpg") {
            image.src = "Broccoli_wiki.jpg";
        } else if("Broccoli_wiki.jpg") {
            image.src = "word-ace-card-back.jpg";
        }

    }

    function changeImageMR() {

        var image = document.getElementById('middleRight');
        if ("word-ace-card-back.jpg") {
            image.src = "TryAgain.png";
        } else if("TryAgain.png") {
            image.src = "word-ace-card-back.jpg";
        }

    }

    function changeImageBL() {

        var image = document.getElementById('bottomLeft');
        if ("word-ace-card-back.jpg") {
            image.src = "Broccoli_wiki.jpg";
        } else if("Broccoli_wiki.jpg") {
            image.src = "word-ace-card-back.jpg";
        }

    }

    function changeImageBM() {

        var image = document.getElementById('bottomMiddle');
        if ("word-ace-card-back.jpg") {
            image.src = "Potato_wiki.jpg";
        } else if("Potato_wiki.jpg") {
            image.src = "word-ace-card-back.jpg";
        }

    }

    function changeImageBR() {

        var image = document.getElementById('bottomRight');
        if ("word-ace-card-back.jpg") {
            image.src = "corn.jpg";
        } else if("corn.jpg") {
            image.src = "word-ace-card-back.jpg";
        }

    }

    </script>

    </body>
    </html>

Answer 1

您的功能确实执行，但需要进行一些更正：

首先，以下条件没有按照您的想法执行：

    if ("word-ace-card-back.jpg") {

...你需要将该字符串与某些东西进行比较。你打算这样做：

    if (image.src == "word-ace-card-back.jpg") {

但是，仍然无法执行此操作，因为src会提供完整的url，例如http://localhost/myapp/word-ace-card-back.jpg。

您可以通过仅检查图像源网址是否包含特定图像名称来解决此问题，如下所示：

function changeImageTL() {
    var image = document.getElementById('topLeft');
    if (image.src.indexOf("word-ace-card-back.jpg") !== -1) {
        image.src = "carrot-fb.jpg";
    } else if(image.src.indexOf("carrot-fb.jpg") !== -1) {
        image.src = "word-ace-card-back.jpg";
    }
}

当indexOf返回-1时，表示您搜索的字符串中不会出现该参数（在本例中为image.src）。

现在还注意到else条件确实没有必要。你想要翻转图像，所以如果它不在一个方向上，应始终在另一个方向。因此else部分中的条件可以省略：

function changeImageTL() {
    var image = document.getElementById('topLeft');
    if (image.src.indexOf("word-ace-card-back.jpg") !== -1) {
        image.src = "carrot-fb.jpg";
    } else {
        image.src = "word-ace-card-back.jpg";
    }
}

在所有功能中进行此更正，它应该更好。

Answer 2

假设这是我收集的3x3网格，您可以创建一个大小为9的数组，其中第一个3代表顶部，依此类推。

var grid = [0, 0, 0, 0, 0, 0, 0, 0, 0];

零表示未被选中的内容。

然后将这行代码放在changeImageTL上方。

var grid = [0, 0, 0, 0, 0, 0, 0, 0, 0];
function changeImageTL() { 
...

现在，在每个函数中，每次单击都会翻转位，如：

// For TL...
grid[0] = !grid[0];

现在，我建议您将所有方法更改为单个方法：

function changeImage(pos, I1,I2) {
    var image = // Discussed later...
    // Flip the bit...
    grid[pos] = !grid[pos];
    if (image.src == I1) {
        image.src = I2;
    } else if(image.src == I2) {
        image.src = I1;
    }
}

然后在 HTML 中调用函数如下：

changeImage(0, 'word-ace-card-back.jpg', 'carrot-fb.jpg');

然后你可以在所有新功能结束时调用另一个函数来检查：

function doCheck() {
    // Example...
    if(grid[0] && grid[1]) { /* Do something */ }
    // Etc....
}

此外，如果您已经知道点击了哪个元素，则不必使用document.getElementById。由于您为图像提供了onclick，因此当单击该元素时，将以范围作为元素运行所调用的代码。这意味着image为this。所以，你的代码看起来像：

function changeImage(pos, I1,I2) {
    // Setting it to image to add some readability.
    var image = this;
    // Flip the bit...
    grid[pos] = !grid[pos];
    if (image.src == I1) {
        image.src = I2;
    } else if(image.src == I2) {
        image.src = I1;
    }
    // Checks the grid.
    doCheck();
}

Answer 3

Juste在“body”的开头移动你的“脚本”标签及其内容（在调用函数之前），它应该按预期工作。

在Javascript中聆听功能结果

3 个答案: