He creado un programa para cambiar un elemento en un HTML mientras se hace clic en un botón, pero genera un error
<button id='change'>hi</button> <p id="pp">text</p> <script> var myfunction=function(e){ e.preventDefault(); document.getElementById('pp').innerHTML=<p id="pp">change</p> } document.getElementById('change').addEventListener('click',myfunction(e)) </script>enlace de caja de códigos
tienes 2 problemas uno es que está pasando el valor de retorno de myFunction a .addEventListener con el valor de e que no está definido. el otro es que no configuraste .innerHTML correctamente. No estoy seguro de si puede crear elementos HTML en JavaScript usando sintaxis HTML, pero si puede, está creando otro elemento <p> con la misma id . Además, .innerHTML debe ser una String y todos los atributos HTML deben tener comillas dobles. prueba esto:
document.getElementById('change').addEventListener('click', function (e) { e.preventDefault(); document.getElementById('pp').innerHTML = "change"; }) <button id="change">hi</button> <p id="pp">text</p> Probablemente tampoco debería crear funciones con var functionName = function() {...} porque puede causar problemas de elevación. var también está en desuso y puede causar errores, por lo que recomendaría usar const y let .
arreglar esta cadena:
document.getElementById('change').addEventListener('click', myfunction)Le faltaban comillas alrededor del valor de innerHTML .
Al llamar a addEventListener , su EventListener es la function "myfunction". No tienes que llamarlo.
<button id='change'>hi</button> <p id="pp">text</p> <script> var myfunction=function(e){ e.preventDefault(); document.getElementById('pp').innerHTML='<p id="pp">change</p>' } document.getElementById('change').addEventListener('click',myfunction) </script>