Working Around JS Events: Click & Submit
Since beginning my journey learning JavaScript, I’ve quickly discovered that I would have a lot of work ahead of learning yet another programming language. I’ve spent most of 2020 working with Ruby, but 2021 is quickly becoming all about JS. One aspect of this language I continue to have difficulty learning is working with events. During Phase 3 at FlatIron, I failed the code challenge twice, thus having me retake this phase, but to be honest, I was excited to be granted time to study. I spent that time narrowing my focus on two common events that I struggled with: ‘click’ and ‘submit.’
click
The click event occurs when a pointing device button (such as a mouse) is pressed and released while the pointer is located inside the element. It fires after the mouse down and mouses up events fired, and it has to happen in that order.
So the example I’m providing below has a button. When clicked, it will simply render a random pic of a dog. First up is the HTML code:
<html><body><button id="btn" type="button">Click Me!</button></body></html>
Next up is the js file that includes an addEventListener and two functions. An example syntax for writing a click event is as follows:
document.getElementById('btn').addEventListener('click', firstThangsFirst)
const BASE_URL = 'https://api.thedogapi.com/v1/images/search'
function firstThangsFirst() {fetch(BASE_URL).then(r => r.json()).then(dogThang => dogThang.forEach(renderDog))}
function renderDog(dog) {let home = document.querySelector('body')const dogImg = document.createElement('img')dogImg.src = dog.urlhome.appendChild(dogImg)}
Once the user clicks the button, they should see a cute dog picture similar to the one below ❤️.
submit
A submit event occurs when a <form> is submitted. It is important to note that it’s fired on the <form> element itself, not the <button> or <input type="submit"> inside it. Now the <button> (which is associated with the submit button) and the <input type="text" (which is associated when the user presses enter while in a field) is required when firing the submit event.
This example below includes a form with a button that will render a congrats message when clicked. First up is the HTML code:
<html><head></head><body><form id="form"><label>Random form: <input type="text"></label><br><br><button type="submit">Submit form</button></form><p id="response"></p></body></html>
Next up is the js file that includes an .addEventListener and a single function:
const form = document.getElementById('form');const response = document.getElementById('response');form.addEventListener('submit', handleSubmit);let today = new Date();function handleSubmit(event) {
response.textContent = `Congrats! Your Form Has Been Submitted on ${today}!`;
event.preventDefault();
}
After the user clicks the button, they should see a result similar to the example below.
Feel free and comment, share and check out some of the resources posted below. Thanks for reading!
