CODEWITHSUNDEEP
javascriptdom-events
Mohammad Maaz
Mohammad Maaz

Reputation: 58

The onclick EventListener not working more than once

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>`);
    });
}

Upvotes: 0

Views: 137

Answers (2)

Mazan Labeeb
Mazan Labeeb

Reputation: 199

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.

enter image description here

Upvotes: 2

Danil Apsadikov
Danil Apsadikov

Reputation: 283

Delete this line in makeFindWord.onclick

makeFindWord = document.getElementById("makeFindWord");

Upvotes: 0

Related Questions