In the process of learning, I made a button, an associated function, and tried to use the preventDefault() method. It is not working as planned.
HTML:
<a href="https://google.com" id="google"><button>Google</button></a>
JS:
let google = document.getElementById('google');
google.addEventListener('click', e => e.preventDefault);
The link still works
Not sure what I’m missing?
Thanks,
Mike
Did you really leave out the parens after preventDefault? To invoke a function you have to include the opening and closing parens.
Sorry, no. I had separate chunks of code as a result of trying to figure out what was going on, one with parentheses, one without. I linked the wrong code chunk
You need to paste your code in here using the triple back tick method so we can see your actual code. Please update your HTML and JS using this method.
To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.
Hi @AgileMyk e.preventDefault is a function you need to execute the function to prevent e.preventDefault() add opening and closing bracket near preventDefault
It should work if you are calling the function () as you say you are.
Make sure the script is loaded and runs after the DOM content. You can place it after the body content. Or use defer on the script tag, use it as a module, or wrap the code in a DOMContentLoaded event.
Thanks all for the replies –
Turns out something higher up was causing the issue. There was conflict regarding a declaration statement. I was testing different methods, methods which propagate at various stages within the event cycle ( capture, target ,bubble, preventDefault) to better understand that process. As such, I created an object hierarchy, the top of which, was a div with class ‘top.’ Well at some point, even though I had declared it only once in the JS to make it a a variable in the JS, somehow between the one occurrence (as a div classed to ‘top’) and the single declaration in the JS, the console was saying that ‘top’ had already been declared and was messing up everything from there down.
I actually had to change ‘top’ in JS to ‘top1’ to fix the issue, although I still do not fully understand how a conflict would arise with the top variable, given it only appeared in the two places(the cs class and the single declaration and instantiation in the JS).
On that note, one of the books I’m currently reading spoke of capitalizing one occurrence of a the top usage and lowercasing the other usage in situation like this. From other things I’ve read, this is not the best practice. What is the standard approach to this? Up to this point, I’ve always lowercased (all lowercase, assuming single syllable non-camel-case) both unless one was a constant.
Thanks again.
It’s really hard to answer your question without seeing all of your code.
As said, nobody can really help you with code they can’t see, and trying to explain code instead of just posting it is just futile. If you need help with code, post it…all of it.
Pascal case identifiers are usually “reserved” for classes and constructor functions as a convention in JS. I wouldn’t suggest using casing for identifiers just to avoid identifier conflicts as that is an issue with your code, not the naming. The casing of an identifier does not signal anything about the scope.
Most (or all) code highlighters will also color-code the identifiers differently making it even more confusing why something that is just a normal variable is showing up looking like something it isn’t.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.