Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Find and Replace with String Methods</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <header>
        <h1>Find and Replace with String Methods</h1>
    </header>
    <main>
        <form action="#" method="post">
            <div>
                <label for="find">Find: </label>
                <input type="text" id="find" />
            </div>
            <div>
                <label for="replace">Replace: </label>
                <input type="text" id="replace" />
            </div>
            <div>
                <button id="btnSearch">Go</button>
            </div>
        </form>
        <p class="target">Lorem apple ipsum dolor Apple sit amet, consectetur apple adipisicing elit. Nihil apple laborum maxime ipsam apple exercitationem apple a blanditiis. Officiis apple necessitatibus esse apple debitis harum apple amet apple molestias sunt adipisci apple iste, voluptates apple vitae, ipsam apple iure, apple odio.</p>
    </main>
    <script>
        document.addEventListener('DOMContentLoaded', function(){
            let btn = document.getElementById('btnSearch');
            btn.addEventListener('click', doFindAndReplace);
        });

        function doFindAndReplace(ev){
            ev.preventDefault();

            let find = document.getElementById('find').value;
            let replace = document.getElementById('replace').value;

            let p = document.querySelector('.target');

            while( p.textContent.indexOf(find) != -1 ){
                p.textContent = p.textContent.replace(find, replace);
            }

        }
    </script>
</body>
</html>