Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how to change the paragraph with class name special with input text on button click?

<body>
<input type="text" id="txtElement">
<button id="btnKnop1">Vervang tekst</button>
<div id="divResult">
    <p class="special">Alinea 1</p>
    <p class="special">Alinea 2</p>
    <p class="special">Alinea 3</p>
    <p>ALinea 4</p>
    <p>Alinea 5</p>
</div>
<script type="text/javascript">
    window.addEventListener('load', () => {
        document.getElementById('btnKnop1').addEventListener('click', () => {
            let OldElement = document.getElementsByClassName('special')
            let newElement = document.createElement('p');
            let node = document.getElementById('txtElement').value;
            let newNode = document.createTextNode(node)
            newElement.appendChild(newNode)
            console.log(newElement)
            document.getElementById('divResult').replaceChild(newElement, OldElement)
        })
    })
</script>
</body>

I want to change the paragraph with the text from the input field on a button click.
Same goes for all the paragraphs.

I tried above but it didn’t work.

Tags:

2

Answers


  1. 0

    There are multiple paragraphs with the same class, so you’ll have to do this

    document.getElementById("btnKnop1").addEventListener("click", function() {
        var newText = document.getElementById("txtElement").value;
        var paragraphs = document.querySelectorAll("#divResult p");

        for (var i = 0; i < paragraphs.length; i++) {
            paragraphs[i].innerText = newText;
        }
    });
    Login or Signup to reply.
  2. 0

    The document.getElementsByClassName('special') method returns an array of HTML elements but the replaceChild(newElement, OldElement) method expects a single element see https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild

    If you want to replace all of the class="special" elements you need to iterate over the OldElement array like this:

        window.addEventListener('load', () => {
        document.getElementById('btnKnop1').addEventListener('click', () => {
            let OldElement = document.getElementsByClassName('special')
            let newElement = document.createElement('p');
            let node = document.getElementById('txtElement').value;
            let newNode = document.createTextNode(node);
            newElement.appendChild(newNode);
            let parentNode = document.getElementById('divResult');
            Array.from(OldElement).forEach((elem) => {
                parentNode.replaceChild(newElement.cloneNode(true), elem);
            });
        });
    })
    <input type="text" id="txtElement">
<button id="btnKnop1">Vervang tekst</button>
<div id="divResult">
    <p class="special">Alinea 1</p>
    <p class="special">Alinea 2</p>
    <p class="special">Alinea 3</p>
    <p>ALinea 4</p>
    <p>Alinea 5</p>
</div>

    Note: I am using the newElement.cloneNode(true) method because if the new node is already present somewhere else in the DOM, it is first removed from that position.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search