JavaScript Input Field Not Being Recognized

Question

I have a basic word scramble game (not styled yet), that works fine on an HTML page.

When I bring that exact code over to a blogger post it stops working.

I can enter text into the text field but on pressing the "Check Word" button it throws back a "Please enter the word to check" even though I have entered a word to check.

Everything else seems to work correctly on blogger (Refresh button, counter, hint, etc.)

The code is as follows...

      let words = [
        {
            word: "addition",
            hint: "The process of adding numbers"
        },
        {
            word: "meeting",
            hint: "Event in which people come together"
        },
        {
            word: "number",
            hint: "Math symbol used for counting"
        },
        {
            word: "exchange",
            hint: "The act of trading"
        },
    ]
 
    const wordText = document.querySelector(".word"),
    hintText = document.querySelector(".hint span"),
    timeText = document.querySelector(".time b"),
    inputField = document.querySelector("input"),
    refreshBtn = document.querySelector(".refresh-word"),
    checkBtn = document.querySelector(".check-word");
    
    let correctWord, timer;
    
    const initTimer = maxTime => {
        clearInterval(timer);
        timer = setInterval(() => {
            if(maxTime > 0) {
                maxTime--;
                return timeText.innerText = maxTime;
            }
            alert(`Time off! ${correctWord.toUpperCase()} was the correct word`);
            initGame();
        }, 1000);
    }
    
    const initGame = () => {
        initTimer(20);
        let randomObj = words[Math.floor(Math.random() * words.length)];
        let wordArray = randomObj.word.split("");
        for (let i = wordArray.length - 1; i > 0; i--) {
            let j = Math.floor(Math.random() * (i + 1));
            [wordArray[i], wordArray[j]] = [wordArray[j], wordArray[i]];
        }
        wordText.innerText = wordArray.join("");
        hintText.innerText = randomObj.hint;
        correctWord = randomObj.word.toLowerCase();;
        inputField.value = "";
        inputField.setAttribute("maxlength", correctWord.length);
    }
    initGame();
    
    const checkWord = () => {
        let userWord = inputField.value.toLowerCase();
        if(!userWord) return alert("Please enter the word to check!");
        if(userWord !== correctWord) return alert(`Oops! ${userWord} is not a correct word`);
        alert(`Congrats! ${correctWord.toUpperCase()} is the correct word`);
        initGame();
    }
    
    refreshBtn.addEventListener("click", initGame);
    checkBtn.addEventListener("click", checkWord);

<div class="Gamecontainer">
            <h2>Word Scramble</h2>
            <div class="content">
                <p class="word"></p>
                <div class="details">
                    <p class="hint">Hint: <span></span></p>
                    <p class="time">Time Left: <span><b>20</b>s</span></p>
                </div>
                <input spellcheck="false" type="text" />
                <div class="buttons">
                    <button class="refresh-word">Refresh Word</button>
                    <button class="check-word">Check Word</button>
                </div>
            </div>
        </div>

Any suggestions?

Why should we separate the first <script> and the second one with close tag </script>? — Taufik Romadhon
– Taufik Romadhon, Commented Sep 25, 2022 at 14:17
I had the JS code on separate pages (words.js and script.js), so just brought them in that way. But yeah no need I guess. — Andy R
– Andy R, Commented Sep 25, 2022 at 19:47

vanowm · Accepted Answer · 2022-09-25 14:31:29Z

1

This is because you use querySelector("input") which selects first found input element on the page. Blogger post has multiple input elements therefore your code selects a wrong element. Use IDs or classes to better identify your html elements. For example you can narrow the query to your html part by using:

inputField = document.querySelector(".Gamecontainer input")

answered Sep 25, 2022 at 14:31

vanowm

10.3k2 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript Input Field Not Being Recognized

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related