I just sent you a PM, have a look and let me know if i should proceed as suggested.
Absolutely as you won't have to repeat yourself all over the markup or hardcode the functions to do ID lookups on each and every blasted one.
I use the onClick and the like because i dont know how to do the click event functions in js
Well let's fix that.
with all the brackets and the nasty message (? is not a function grrrrr)
The what now?!?
Adding handlers from the JS is pretty simple. If you have the element in question in a variable, let's call it "button" because it's a ... button.
button.addEventListener('click', buttonClickHandler, false);
Anything out can on
event you can addEventlistener(
event.
You can also from the javaScript use Element.on
event, but beware that 1) it erases any existing callbacks, and 2) it passes an event object to the callback, as opposed to being an independent function as per doing it in the markup.
Because you can chain multiple events on an object, you should use addEventListener. The only time I'd suggest using element.on
event is if you literally just made the DOM element with document.createElement.
The big difference in doing it from the JavaScript is that the handler function gets the Event object.
https://developer.mozilla.org/en-US/docs/Web/API/EventThe event object has two properties that make it really nice to work with.
Event.target : the element that initiated the event
Event.currentTarget : the element the event is attached to.
That might seem confusing, but lemme put it this way:
<button type="button" id="test">Some Text <i class="fas fa-whatever"></i></button>
Remember, the default type of button is submit. If we set button, it doesn't trigger any events so we don't need to preventDefault. This is why for scripting hooks you should use <button>, not <a>nchor!document.getElementById("test").addEventListener('click', testClick, false);
function testClick(event) {
console.log('target', event.target);
console.log('currentTarget', event.currentTarget);
} // testClick
If you click on the "some text" both event.target and event.currentTarget will be the button element, however if you click on the favicon event.target will be the i.fas, whilst event.currentTarget will still be the button.
Being that you can get the initiator or the base element means you can DOM-walk your way to parent nodes to do things.
Oh, and I had a typo in the code, I'll fix that. It says button.onclick = park; when it should be =parkIt;
In production, I'd have the click handler function simply detect if #parking is a parent. If so, move it back to #gridContainer.
