I am trying to swap a word from the text to a word of my choice-CodePudding

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function replacment() {
            let text = document.getElementById('text')
            let button1 = document.getElementById('text')
            let button2 = document.getElementById('text')
            let text3 = text.replace(new RegExp(text1, 'g'), text2);
            document.getElementById("text").innerHTML = text3
           }
    </script>
</head>
<body>
    <h1 id="text">Steve Jobs was genuis, and many Apple inventions today are result for his great effort, thanks Steve, waw Steve was great.</h1>
    <label>search for:</label>
    <br />
    <input type="text" id="button1" />

    <br />

    <label>Replace with:</label>
    <br />
    <input type="text" id="button2" />
  <br />
    <br />
    <input type="button" value="Replace"/>
</body>
</html>

I want to be able to swap a word from the text to a new word that I type in the second box. In the first box I want to type in a word from the text above that will be changed I am using HTML and JavaScript

CodePudding user response：

First, HTML is parsed from top to bottom. So when you use

document.getElementById("text")

It would return null so you can't set properties on null. Because at the time of this statement the element doesn't exist.
So to solve the problem

put script tag just before the closing </body> not in the <head> tag.
other option is to listen to the DOM has been loaded with DOMContentLoaded & addEventListener or simply with window.onload.

BUT With the arrival of the defer attribute we can place the script in the head and still, get that benefit while also having the JS be downloaded by the browser in parallel with the HTML for better performance.

document.querySelector("#replaceBtn").addEventListener("click", replacment);
function replacment() {
    let text = document.getElementById("text");
    let searchWord = document.getElementById("searchTxt").value;
    let replaceWith = document.getElementById("replaceTxt").value;
    console.log(text, searchWord, replaceWith);
    text.innerText = text.innerText.replace(
    new RegExp(searchWord, "g"),
    replaceWith
    );
}

<h1 id="text">
    Steve Jobs was genuis, and many Apple inventions today are result for his
    great effort, thanks Steve, waw Steve was great.
</h1>
<div>
    <label>search for:</label>
    <input type="text" id="searchTxt" />
</div>
<div>
    <label>Replace with:</label>
    <input type="text" id="replaceTxt" />
</div>
<input type="button" value="Replace" id="replaceBtn" />

CodePudding user response：

let text = document.getElementById('text').textContent
let input = document.getElementById('input')


input.addEventListener('input', () => {
    let newtext = text.replace('steven', input.value);
    document.getElementById('text').textContent = newtext
})

<h1 id='text'>hello world my name is steven i love programming</h1>

    <input id='input'>