In JavaScript, you can use the addEventListener() method to detect a click event and then use the innerHTML property to update the button label.

The code below shows how this can be done:

javascript
 
 
Copy code
document.getElementById("myBtn").addEventListener("click", function(){ 
   document.getElementById("myBtn").innerHTML = "18 degrees";
});

More information about JavaScript addEventListener() and innerHTML can be found in the Mozilla Developer Network docs.

document.querySelectorAll is a method in JavaScript used to select a group of elements in the Document Object Model (DOM) based on a CSS selector. It returns a static NodeList containing all elements that match the specified selector. It is useful for manipulating multiple elements at a time.

For example, if you wanted to change the background colour of every element with a particular class in your HTML, you could do something like this:

javascript
 
 
Copy code
let elementList = document.querySelectorAll('.my-class');

for (let element of elementList) {
  element.style.backgroundColor = '#F00';
}

The code is written in JavaScript and makes use of DOM-related functions, such as document.querySelector to access and manipulate elements of the DOM.

The search() function is being triggered when the user submits the form, indicated by the event listener form.addEventListener set to submit. The purpose of the function is to take the value from the input with the id="city-input" and store it. The event.preventDefault() is then used to actually prevent the form from submitting, since we want to manage the input with JavaScript logic first.

When the value is stored, a conditional is used to check whether the input is empty or not. If it is empty, an alert of the value will be triggered. Otherwise, the innerHTML of h5 is changed to the value of the input.

This is how the code works overall.

For more information on how events work in JavaScript, you can refer to this link.

innerHTML is a JavaScript DOM property that can be used to get or set the HTML contents of an HTML element.

For example, if you wanted to change the content of a <div> or <p> element, you could do so using the innerHTML property, as in this example:

javascript
 
 
Copy code
document.getElementById("example-div").innerHTML = "This is the new content of the div";

This is the same concept as setting the innerText property. The difference is the innerHTML property allows the user to set values that include HTML tags, while the innerText value will not recognize HTML tags.

For more information, checkout this link: MDN Web Docs - innerHTML.

Using query selector in JavaScript, you can select an element from the DOM (Document Object Model) by its ID, class, tag name, attributes, or a combination of these.

For example, to select an element with an ID of 'demo':

javascript
 
 
Copy code
const element = document.querySelector('#demo');

To select all elements with class 'test':

javascript
 
 
Copy code
const elements = document.querySelectorAll('.test');

More information can be found in the MDN documentation.

Bubbling in the DOM is an event propagation method. It starts with an event triggering on the innermost element and then proceeds to trigger the same event on its parent element and then its parent’s parent element and so on. This behavior is known as bubbling and propagates the same event through different elements on the DOM.