Intenté el fragmento de código a continuación ingresando i en la primera y x en la segunda entrada, pero Change this writing no cambió a Change thxs wrxtxng
¡Cualquier ayuda sería muy apreciada!
var d = document.getElementById("d").innerHTML var Btn = document.getElementById("btn"); var inp1 = document.getElementById("i1").value; var inp2 = document.getElementById("i2").value; Btn.addEventListener("click",change); function change() { var yeni = d.replaceAll(inp1,inp2); document.getElementById("d").innerHTML = yeni; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <div id="d">Change this writing</div><br> <input id="i1" type="text">   <input id="i2" type="text"><br><br> <button id="btn" class="btn btn-danger">Change</button>Si coloca console.log(inp1, inp2); dentro de la función de change , verá que no tiene el valor esperado.
Los está definiendo antes de que el usuario tenga tiempo de insertar el valor.
La solución más fácil sería llamar a getElementById dentro de la función cuando se presiona el botón:
var Btn = document.getElementById("btn"); Btn.addEventListener("click",change); function change() { var inp1 = document.getElementById("i1").value; var inp2 = document.getElementById("i2").value; var d = document.getElementById("d"); var yeni = d.innerHTML.replaceAll(inp1, inp2); d.innerHTML = yeni; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <div id="d">Change this writing</div><br> <input id="i1" type="text" >   <input id="i2" type="text"><br><br> <button id="btn" class="btn btn-danger">Change</button>