CODEWITHSUNDEEP
javascript
Niels
Niels

Reputation: 61

Function is not doing simple console logs as a test, don't know why

Yesterday I had a same question. However it got downvoted because I didn't provide enough information, couldn't edit in time. Today I tried again and singled out what I was trying to do and now I can give the complete code example, cause it still has the same issues.

So this time, this is my 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 is really small at this point:

#gameplayButtons {
    display: grid;

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

And my 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();

I was trying to "remember" the name by storing it in the placeholder after submitting it. Didn't do that. Then I deleted everything to see if it would do console.logs. And it's not doing that either. I really don't know what's causing that.

If anyone saw my post yesterday, it was a Module Pattern. Today I tried removing that part and try a normal "named" function and it's not working either. So I've narrowed it down as much as I could, removing all the other event listeners and only singled out this one. And I really don't know what to do.

Upvotes: 1

Views: 103

Answers (4)

Niels
Niels

Reputation: 61

I tried another button. And that one worked. So I narrowed it down to the form element which wasn't doing anything. I had already tried that, but not after removing some silly mistakes pointed out to me here. Me trying again after correcting those worked though. And everything seems responsive again.

So it is fixed by removing the form element.

Thanks for the suggestions! And I will leave this for anyone else having console log problems or something similar.

The end code looked like this:

<!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>
    <input id="input1" type="text" placeholder="Player 1 name:">
    <button id="submit1" type="submit">submit</button>
    <br>
    <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>

And 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) => {
        const inputText = document.querySelector("#input1");
        playerName1 = inputText.value;
        // console.log("hello");
        // console.log(entered1);
        inputText.setAttribute("placeholder", playerName1);
        inputText.value = "";

        entered1 = true;
    })

    const opponentTogg = document.querySelector("#opponentToggle");
    opponentTogg.addEventListener('click', (e) => {
        console.log("test2");
    })
}

myImmediateFunctionSetUp();

CSS stayed the same.

Upvotes: 0

Pramod Kharade
Pramod Kharade

Reputation: 2085

I have tried to solved your issue. Might be not best solution

window.onload =  function myImmediateFunctionSetUp () {
    // 'use strict';

    gameBoard = ["", "", "", "", "", "", "", "", ""];
    playerName1 = "";
    playerName2 = "";
    entered1 = false;
    entered2 = false;
console.log("Out");
    const getPlayerName1 = document.querySelector("#submit1");
    getPlayerName1.addEventListener('click', (e) => {
    // Prevent page refresh.
    e.preventDefault();
        entered1 = true;
        // const inputText = document.querySelector("input1");
        // playerName1 = inputText.nodeValue;
        console.log("hello");
        console.log(entered1);
        // inputText.setAttribute("placeholder", playerName1);
    });
}
#gameplayButtons {
    display: grid;

    grid-template-columns: 75px 75px 75px;
    grid-template-rows: 75px 75px 75px;
}
<!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" onClick="myImmediateFunctionSetUp" 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>
    
    </script>
</body>
</html>

Hope, your problem is resolved

Upvotes: 0

Arthur Yakovlev
Arthur Yakovlev

Reputation: 9309

You can check jsfiddle here https://jsfiddle.net/0qkygsz4/ I added some improves and I have console.log working

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

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

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

myImmediateFunctionSetUp ();

Upvotes: 0

Rohan B
Rohan B

Reputation: 116

document.querySelector("submit1") is not going to return any elements. submit1 is not a valid selector for .querySelector(...).

Use either document.querySelector("#submit1") or document.getElementById("submit1") and your code will work fine

Upvotes: 1

Related Questions