javascript - 功能没有做简单的控制台日志作为测试，不知道为什么

问题描述

昨天我也有同样的问题。然而它被否决了，因为我没有提供足够的信息，无法及时编辑。今天我再次尝试并挑出我想要做的事情，现在我可以给出完整的代码示例，因为它仍然有同样的问题。

所以这一次，这是我的 HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Tic Tac Toe</title>
    <meta charset="UTF-8">

    <link href="styles/styleAllOverAgain.css" rel="stylesheet" type="text/css">
</head>
<body>
    <h1>Tic Tac Toe!</h1>
    <button id="start/restart">Start/Restart</button>
    <br>
    <br>
    <button id="opponentToggle">Against Computer</button>
    <br>
    <br>
    <form id="nameSubmit1">
        <input id="input1" type="text" placeholder="Player 1 name:">
        <button id="submit1" type="submit">submit</button>
    </form>
    <br>
    <input id="input2" type="text" placeholder="Player 2 name:">
    <button id="submit2" type="submit">submit</button>
    <br>
    <br>
    <button id="play">Play!</button>
    <br>
    <br>
    <div id="gameplayButtons">
        <button id="1">1</button>
        <button id="2">2</button>
        <button id="3">3</button>
        <button id="4">4</button>
        <button id="5">5</button>
        <button id="6">6</button>
        <button id="7">7</button>
        <button id="8">8</button>
        <button id="9">9</button>
    </div>
    <script src="javascript/myscriptAllOverAgain.js"></script>
</body>
</html>

CSS 在这一点上真的很小：

#gameplayButtons {
    display: grid;

    grid-template-columns: 75px 75px 75px;
    grid-template-rows: 75px 75px 75px;
}

还有我的 javascript：

function myImmediateFunctionSetUp () {
    // 'use strict';

    let gameBoard = ["", "", "", "", "", "", "", "", ""];
    let playerName1 = "";
    let playerName2 = "";
    let entered1 = false;
    let entered2 = false;

    const getPlayerName1 = document.querySelector("#submit1");
    getPlayerName1.addEventListener('click', (e) => {
        entered1 = true;
        // const inputText = document.querySelector("input1");
        // playerName1 = inputText.nodeValue;
        console.log("hello");
        console.log(entered1);
        // inputText.setAttribute("placeholder", playerName1);
    })
}

myImmediateFunctionSetUp();

我试图通过在提交后将其存储在占位符中来“记住”该名称。没有那样做。然后我删除了所有内容以查看它是否会执行 console.logs。它也没有这样做。我真的不知道是什么原因造成的。

如果有人昨天看到我的帖子，那是一个模块模式。今天我尝试删除该部分并尝试正常的“命名”功能，但它也不起作用。所以我尽可能地缩小了范围，删除了所有其他事件监听器，只挑出了这个。而且我真的不知道该怎么办。

标签： javascript

document.querySelector("submit1")不会返回任何元素。submit1不是的有效选择器.querySelector(...)。

使用document.querySelector("#submit1")or document.getElementById("submit1")，您的代码将正常工作

javascript - 功能没有做简单的控制台日志作为测试，不知道为什么

问题描述

解决方案

推荐阅读