script don't work after fetching html file. Javascript only fires once-CodePudding

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 = "";
    }

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'));

    });
}

CodePudding user response：

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>

CodePudding user response：

Your code should be working, have a look at the following one:

    <form>
    <input type="text" id="search">
    <button type="submit" id="submit">Go</button>
</form>
<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 = "";
        }
    })
</script>

<script>
    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'));

});

}