Me sorprende que se produzca este error, pero en realidad no sé cómo solucionarlo. Para resumir, estoy recibiendo este error:
ReferenceError: Can't find variable: ePero el objeto de evento debe encontrarse, ya que se pasa a la función... Entonces, ¿por qué no se encuentra? Supongo que estoy haciendo algo bastante tonto aquí.
a { font-size: 2em; } a:after { content: 'a'; } div.show a:after { content: 'b'; color: blue; } <div class='test'> <a onclick='testToggle(e)'></a> </div> <script> const el = document.querySelector('.test'); const testToggle = (e) => { e.preventDefault(); el.classList.toggle('show'); } </script> Por supuesto, puedo simplemente eliminar la variable preventDefault y e , pero necesito el comportamiento preventDefault para evitar que el dom se desplace después de hacer clic en el enlace.
¿Alguien puede aconsejarme dónde me estoy equivocando aquí?
Evitaría los oyentes JS en línea y usaría addEventListener en su lugar.
const el = document.querySelector('.test'); el.addEventListener('click', testToggle, false); function testToggle(e) { e.preventDefault(); el.classList.toggle('show'); } a { font-size: 2em; } a:hover { cursor: pointer; } a:after { content: 'a'; } div.show a:after { content: 'b'; color: blue; } <div class="test"> <a href="http://google.com"></a> </div>Hazlo asi :
HTML
<div class='test'> <a id="toggle">test</a> </div>JS
const el = document.querySelector('.test'); const toggle = document.getElementById("toggle") toggle.addEventListener("click", (e) => { e.preventDefault(); el.classList.toggle('show'); })//html <div class='test'> <a></a> </div> //js you can use event listener to have the click event <script> const el = document.querySelector('.test'); const link= document.querySelector('.test a'); link.addEventListener('click', (event) => { event.preventDefault() el.classList.toggle('show') }); </script>