The onclick EventListener not working more than once

Question

i've made a word finder that would find a word whenever i click button and send input in the prompt.

Now the problem is that my event listener's not working more than once.

Here's my javascript code:

const words = []; // /lorem/gi, /ipsum/gi

let makeFindWord = document.getElementById("makeFindWord");
makeFindWord.onclick = () => {
    let input = prompt("Search a word");
    console.log("works");

    let value = new RegExp(input, "gi");
    words.push(value);

    console.log(words);

    findTheWord(words);

    console.log(makeFindWord.onclick);
};

function findTheWord(words) {
    const body = document.body;

    let log = [];

    for (const w of words) {

        loo: do {
            let theWord = w.exec(body.innerHTML);
            if (theWord == null) {
                break loo;
            } else {
                let index = theWord.index;
                let length = theWord[0].length;

                let word = body.innerHTML.substring(index, index + length);
                log.push([theWord, word, index, length]);
            }
        } while (true);

    }


    log.forEach(w => {
        let word = w[1];
        body.innerHTML = String(body.innerHTML).replaceAll(word, `<span style="color: #fe0">${word}</span>`);
    });
}

why are you re-assigning the value here? makeFindWord = document.getElementById("makeFindWord"); — GrafiCode
– GrafiCode, Commented Sep 11, 2022 at 10:58
Bro/Sis, i added that line in my code as a remedy i found when i was searching my question's answer on google and it did'nt work. I faced the same problem before and after adding this line=> makeFindWord = document.getElementById("makeFindWord"); — Mohammad Maaz
– Mohammad Maaz, Commented Sep 12, 2022 at 9:55
I've found the problem. => words.push(value); is the problem — Mohammad Maaz
– Mohammad Maaz, Commented Sep 12, 2022 at 9:56

Mazan Labeeb · Accepted Answer · 2022-09-12 10:55:18Z

2

Problem: The problem is that you are manipulating the whole body tag using the DOM innerHTML property. It replaces the button with the id "makeFindWord" also and the Event Listener on that button no longer works because you have replaced the button with id "makeFindWord" with new one using innerHTML.. Its pretty normal thing in JavaScript DOM.

Solution: Wrap the whole body inside an other container (say a div with id "search-container"). Don't forget to place your Button (having id "makeFindWord") outside this container. Here is the complete working code:

 <!DOCTYPE html>
<head>
  <title>Title</title>
</head>
<body>
  <button id="makeFindWord">Button</button>
  <div id="search-container">
    <p>Lorem ipsum dolor sit amet </p>    
  </div>
</body>
</html>
<script>
  const words = []; // /lorem/gi, /ipsum/gi

let makeFindWord = document.getElementById("makeFindWord");
makeFindWord.onclick = () => {
    let input = prompt("Search a word");
    console.log("works");

    let value = new RegExp(input, "gi");
    words.push(value);

    console.log(words);

    findTheWord(words);

    console.log(makeFindWord.onclick);
};

function findTheWord(words) {
    const body = document.getElementById("search-container");

    let log = [];

    for (const w of words) {

        loo: do {
            let theWord = w.exec(body.innerHTML);
            if (theWord == null) {
                break loo;
            } else {
                let index = theWord.index;
                let length = theWord[0].length;

                let word = body.innerHTML.substring(index, index + length);
                log.push([theWord, word, index, length]);
            }
        } while (true);

    }


    log.forEach(w => {
        let word = w[1];
        body.innerHTML = String(body.innerHTML).replaceAll(word, `<span style="color: #fe0">${word}</span>`);
    });
}
</script>

I have attached a screenshot showing the working output. Now, EventListener will work forever.

answered Sep 12, 2022 at 10:55

Mazan Labeeb

1991 silver badge10 bronze badges

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

3 Comments

Mohammad Maaz Over a year ago

Thanks my friend! You've solved my problem forever. Now i understand why there's everything capsulated in a div in the body instead of simply writing it inside the body whenever i inspect a website

Mazan Labeeb Over a year ago

It is a common practice to make break the website into smaller components like nav bar, sidebar, footer, header, etc. and all these components are wrapped inside div. Div is just a container and by wrapping the different components inside Div make it easy for developer to style page and make interactive with javascript.

Mohammad Maaz Over a year ago

OK friend! 👍👍👍

Danil Apsadikov · Accepted Answer · 2022-09-11 10:59:01Z

0

Delete this line in makeFindWord.onclick

makeFindWord = document.getElementById("makeFindWord");

answered Sep 11, 2022 at 10:59

Danil Apsadikov

2831 gold badge4 silver badges15 bronze badges

1 Comment

Mohammad Maaz Over a year ago

Bro/Sis, i added that line in my code as a remedy i found when i was searching my question's answer on google and it did'nt work. I faced the same problem before and after adding this line=> makeFindWord = document.getElementById("makeFindWord");

Collectives™ on Stack Overflow

The onclick EventListener not working more than once

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related