Tengo un pequeño proyecto en el que el usuario escribe algo en un campo de entrada. Luego, con javascript, capitaliza cada segunda letra de una entrada, luego muestra la nueva cadena en el sitio. He intentado asignar tekstEndrer.innerHTML a la nueva cadena, pero no funciona.
const tekst = document.getElementById("tekstInput").value; document.querySelector('input[type=button]').addEventListener("click", function(){tekstEndrer();}); const tekstEndrer = () => { var res = ""; for (let i = 0; i < tekst.length; i++) { res += i % 2 == 0 ? tekst.charAt(i).toUpperCase() : tekst.charAt(i); } document.getElementById("nyTekst").innerHTML = res; } <!doctype html> <html> <head> <title>Tekstformatering</title> </head> <body> <h1>tekst endrer</h1> <input type="text" id="tekstInput"> <input type="button" value="Endre tekst!" id="knapp"> <div id="nyTekst"> yoyo</div> <script type="text/javascript" src="tekstlek.js"></script> </body> </html>Deberá acceder al valor dentro de la función de devolución de llamada para addEventListener y luego pasarlo a la función como un argumento, ya que no estará dentro del alcance si lo hace fuera de la devolución de llamada:
document.addEventListener('DOMContentLoaded', () => { document.querySelector('input[type=button]').addEventListener("click", function(){ const tekst = document.getElementById("tekstInput").value; tekstEndrer(tekst); }); const tekstEndrer = (tekst) => { var res = ""; for (let i = 0; i < tekst.length; i++) { res += i % 2 == 0 ? tekst.charAt(i).toUpperCase() : tekst.charAt(i); } document.getElementById("nyTekst").innerHTML = res; } }) <input id="tekstInput"> <input type="button"> <div id="nyTekst"></div>