[JavaScript] - Understanding JavaScript Events and Form | SheCodes

SheCodes Athena powered by AI

Your AI coding assistant, what do you need help with?

Ask a coding question

[JavaScript] - Understanding JavaScript Events and Form Input

Learn how to use event.preventDefault() and querySelector() to access and manipulate elements of the DOM in JavaScript.

πŸ‘©β€πŸ’» Code to be explained

function search(event) {
  event.preventDefault();
  let input = document.querySelector("#city-input");
  console.log(search.value);

  let h5 = document.querySelector("h5");
  if (input.value) {
    h5.innerHTML = `${input.value}...`;
  } else {
    h5.innerHTML = null;
    alert(`${input.value}...`);
  }
}
let form = document.querySelector("#search-form");
form.addEventListener("submit", search);

More coding questions about JavaScript

πŸ‘©β€πŸ’» Technical question

how do i console.log a js object

πŸ‘©β€πŸ’» HTML, CSS and JavaScript Code instructions

how to track bugs in the app

πŸ‘©β€πŸ’» Technical question

How to call a function within another function

πŸ‘©β€πŸ’» Technical question

what is API?

πŸ‘©β€πŸ’» Technical question

What is a function

πŸ‘©β€πŸ’» Technical question

What is .length

πŸ‘©β€πŸ’» Technical question

Give me an example of a for in loop

πŸ‘©β€πŸ’» Technical question

Is the for loop the same as for of loop

πŸ‘©β€πŸ’» Technical question

foreach loop example

πŸ‘©β€πŸ’» Technical question

Explain for loops

πŸ‘©β€πŸ’» Technical question

Explain .splice

πŸ‘©β€πŸ’» Technical question

Explain typeof

πŸ‘©β€πŸ’» Technical question

Explain data types

πŸ‘©β€πŸ’» Technical question

what is a .push

πŸ‘©β€πŸ’» Technical question

Explain JSDocs

πŸ‘©β€πŸ’» Technical question

different types of for loops

πŸ‘©β€πŸ’» Technical question

What data type is an function in Javascript

πŸ‘©β€πŸ’» Technical question

what is a float in javascript

πŸ‘©β€πŸ’» Technical question

what is an integer in javascript

πŸ‘©β€πŸ’» Technical question

javascript variables

πŸ‘©β€πŸ’» Technical question

Can you explain JSDocs

πŸ‘©β€πŸ’» Technical question

how to add - between words in javascript

πŸ‘©β€πŸ’» Technical question

How to add an event listener to a button element?

πŸ‘©β€πŸ’» Technical question

explain string to lowercase and give an example of how to code

πŸ‘©β€πŸ’» Technical question

how to extract milliseconds from the Date object

πŸ‘©β€πŸ’» Technical question

what is the javascript code for new date?

πŸ‘©β€πŸ’» Technical question

teach me The call, apply and bind Methods in js with examples

πŸ‘©β€πŸ’» Technical question

how to convert celsius to fahrenheit

πŸ‘©β€πŸ’» Technical question

how to increase all elements of array using "for"

πŸ‘©β€πŸ’» Technical question

how to get the date in javascript

πŸ‘©β€πŸ’» Technical question

how works "for" in javaScript

πŸ‘©β€πŸ’» Technical question

Change color of current class to #0097fd if found

πŸ‘©β€πŸ’» JavaScript Code instructions

round a number

πŸ‘©β€πŸ’» Technical question

javascript code example

πŸ‘©β€πŸ’» Technical question

Activate tab based on day of the week add class w--current to activate tab where monday is first

πŸ‘©β€πŸ’» Technical question

How do I display milliseconds of the current Date

πŸ‘©β€πŸ’» Technical question

can i use yes in a "if" statement?

πŸ‘©β€πŸ’» Technical question

what is console.log for

πŸ‘©β€πŸ’» Technical question

what does this mean !==

πŸ‘©β€πŸ’» Technical question

add a class to a <li> using JS

πŸ‘©β€πŸ’» Technical question

I have a prompt and I want to answer me something if user not writing anything what code should I use?

πŸ‘©β€πŸ’» Technical question

Teach me arrays in JS with examples

πŸ‘©β€πŸ’» Technical question

what does the program mean when it returns an error for ',' expected. javascript? I'm having that trouble with the code below

πŸ‘©β€πŸ’» Technical question

how can I make the javascipt say if above 18 or else if below 18

πŸ‘©β€πŸ’» JavaScript Code instructions

display the current date and time using JavaScript

πŸ‘©β€πŸ’» Technical question

using Javascript with Document selectors, How can I return a value of the number of list items in a class?

πŸ‘©β€πŸ’» HTML, CSS and JavaScript Code instructions

display the current date and time using JavaScript

πŸ‘©β€πŸ’» Technical question

What array method can be used to return a new array that has filtered out an item based on a condition?

πŸ‘©β€πŸ’» Technical question

whats the difference between a " for in " loop and a " for of " loop in javascript

πŸ‘©β€πŸ’» Technical question

could you use more than one document.querySelector on a page?