0

I'm surprised this error is occurring but I do not actually know how to fix it. To summarise, I'm getting this error:

ReferenceError: Can't find variable: e

But the event object should be found, as it is being passed into the function... So why is it not being found? I assume I'm doing something pretty daft here.

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>

I can of course just remove the preventDefault and e variable, but I need the preventDefault behaviour to stop the dom from scrolling after clicking the link.

Can someone advise where I'm going wrong here?

user8758206
  • 2,106
  • 4
  • 22
  • 45
  • What browser are you using – Daniel A. White Feb 26 '22 at 22:23
  • Don’t pass anything to the onclick – Daniel A. White Feb 26 '22 at 22:24
  • ☝️What he said. In the `onclick` call, use the function name as a reference rather than calling it with a parameter. I. E. `onclick=“testToggle”` without the parentheses. – Bumhan Yu Feb 26 '22 at 22:26
  • 1
    Also, consider using a `button` element instead of `a` in this context. – Bumhan Yu Feb 26 '22 at 22:27
  • Maybe yout element .test is not available when your script is running. Try without caching it into a variable but just querySelector it in function only when needed. If it works, i was true – MathKimRobin Feb 26 '22 at 22:31
  • It's not because it's in your source code it's available in DOM – MathKimRobin Feb 26 '22 at 22:31
  • Almost all the comments are wrong. `onclick='testToggle()'` will cause `e` to be undefined. `onclick='testToggle'` doesn’t do anything. `“` and `”` are generally not used in programming; `onclick=“testToggle”` will be parsed as `onclick="“testToggle”"`, causing a syntax error. The error message has nothing to do with the DOM not being loaded. – Sebastian Simon Feb 27 '22 at 00:14
  • 2
    Inline event handlers like `onclick` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. Please _never_ suggest or encourage these attributes. The last browser that still needs them reached end of life nearly two decades ago. – Sebastian Simon Feb 27 '22 at 00:16

4 Answers4

3

I would avoid inline JS listeners and use addEventListener instead.

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>
Andy
  • 61,948
  • 13
  • 68
  • 95
2

do it like this :

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');
})
Mohammad Al Refaai
  • 41
  • 4
-2
//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>
freezer71
  • 1
  • 1
-3

Instead of using e in the onclick property, use event.

<div class='test'>
  <a onclick='testToggle(event)'></a>
</div>

<script>
  const el = document.querySelector('.test');

  const testToggle = (e) => {
    e.preventDefault();
    el.classList.toggle('show');
  }
</script>
Vid
  • 440
  • 4
  • 10