script don’t work after fetching html file. Javascript only fires once

so I’m doing a project where I am fetching an HTML file and replacing the body content with the file I’m fetching.

So I have index.html and result.html. I have managed to get the content to switch based on the “matching search result in my input field”. But the problem I have is that the script from the .js file only fires once.

I don’t understand why that is. I want to be able to go back and forth between index.html and result.html

Here is my code for checking if the input field matches the file keyword:

const searchInput = document.getElementById("search");

document.getElementById("submit").addEventListener("click", function(e) {
    e.preventDefault();
    if(searchInput.value === "result") {
        handleRequest("result.html");
        searchInput.value = "";
    }
    e.preventDefault();
    if(searchInput.value === "index") {
        handleRequest("index.html");
        searchInput.value = "";
    }

JavaScript
​x
 
const searchInput = document.getElementById("search");
​
document.getElementById("submit").addEventListener("click", function(e) {
    e.preventDefault();
    if(searchInput.value === "result") {
        handleRequest("result.html");
        searchInput.value = "";
    }
    e.preventDefault();
    if(searchInput.value === "index") {
        handleRequest("index.html");
        searchInput.value = "";
    }

And this is my code for fetching the HTML:

function handleRequest(url) {
    fetch(url)
    .then(res => res.text())
    .then((text) => {
        const doc = new DOMParser().parseFromString(text, 'text/html');
        const body = document.querySelector('body');
        
        body.innerHTML = '';
        body.append(doc.querySelector('body'));

    });
}

JavaScript
 
function handleRequest(url) {
    fetch(url)
    .then(res => res.text())
    .then((text) => {
        const doc = new DOMParser().parseFromString(text, 'text/html');
        const body = document.querySelector('body');
        
        body.innerHTML = '';
        body.append(doc.querySelector('body'));
​
    });
}

Answer

You are replacing your entire document with the contents of index/result.html, thus replacing your input, button and also scripts within the page.

My recommendation is to use a div container and update the contents of the div, rather than the innerhtml of the entire body of the document.

Here’s a working example:

<html>
<body>
    <form>
        <input type="text" id="search" />
        <input type="submit" id="submit" value="Search" />
    </form>
    <div id="dynamic_content">
        Default text
    </div>
</body>
<script>

const searchInput = document.getElementById("search");

document.getElementById("submit").addEventListener("click", function(e) {
    e.preventDefault();
    if(searchInput.value === "result") {
        handleRequest("result.html");
        searchInput.value = "";
    }
    e.preventDefault();
    if(searchInput.value === "index") {
        handleRequest("index.html");
        searchInput.value = "";
    }
});

function handleRequest(url) {
    fetch(url)
    .then(res => res.text())
    .then((text) => {
        const doc = new DOMParser().parseFromString(text, 'text/html');
        document.getElementById("dynamic_content").innerHTML = doc.querySelector('body').innerHTML;
    });
}
</script>
</html>

JavaScript
 
<html>
<body>
    <form>
        <input type="text" id="search" />
        <input type="submit" id="submit" value="Search" />
    </form>
    <div id="dynamic_content">
        Default text
    </div>
</body>
<script>
​
const searchInput = document.getElementById("search");
​
document.getElementById("submit").addEventListener("click", function(e) {
    e.preventDefault();
    if(searchInput.value === "result") {
        handleRequest("result.html");
        searchInput.value = "";
    }
    e.preventDefault();
    if(searchInput.value === "index") {
        handleRequest("index.html");
        searchInput.value = "";
    }
});
​
function handleRequest(url) {
    fetch(url)
    .then(res => res.text())
    .then((text) => {
        const doc = new DOMParser().parseFromString(text, 'text/html');
        document.getElementById("dynamic_content").innerHTML = doc.querySelector('body').innerHTML;
    });
}
</script>
</html>
​

Advertisement

Answer