JavaScript Radio Button Summary: in this tutorial, you will learn how to use JavaScript to check which radio button in a radio group is checked. Introduction to the JavaScript Radio Button Radio buttons allow you to select only one of a predefined set of mutually exclusive options. To create a radio button, you use the…
Read more
JavaScript Form Summary: in this tutorial, you will learn about JavaScript form API: accessing the form, getting values of the elements, validating form data, and submitting the form. Form basics To create a form in HTML, you use the <form> element: <form action=”/signup” method=”post” id=”signup”> </form> Code language: HTML, XML (xml) The <form> element has…
Read more
JavaScript MutationObserver Summary: in this tutorial, you will learn how to use the JavaScript MutationObserver API to watch for changes being made to the DOM tree. Introduction to the JavaScript MutationObserver API The MutationObserver API allows you to monitor for changes being made to the DOM tree. When the DOM nodes change, you can invoke…
Read more
JavaScript Custom Events Summary: in this tutorial, you will learn about the JavaScript custom events such as creating a custom event and dispatching it. Introduction to JavaScript custom events The following function highlights an element by changing its background color to yellow: function highlight(elem) { const bgColor = ‘yellow’; elem.style.backgroundColor = bgColor; } Code language:…
Read more
JavaScript dispatchEvent Summary: in this tutorial, you’ll learn how to programmatically create and dispatch events using Event constructor and dispatchEvent() method. Typically, events are generated by user actions such as mouse clicks and key presses. In addition, events can be generated from code. To generate an event programmatically, you follow these steps: First, create a…
Read more
JavaScript Event Delegation Summary: in this tutorial, you will learn how to use the JavaScript event delegation that adds a single event handler to the parent element instead of having to register multiple event handlers to the child elements. Introduction to JavaScript Event Delegation Suppose that you have the following menu: <ul id=”menu”> <li><a id=”home”>home</a></li>…
Read more
JavaScript hashchange Event Summary: in this tutorial, you will learn about the JavaScript hashchange event and how to handle it effectively. Introduction to the JavaScript hashchange event The URL hash is everything that follows the pound sign (#) in the URL. For example, suppose that you have the following URL: https://python-tutorials.in/javascript-hashchange-event/#header Code language: JavaScript (javascript)…
Read more
JavaScript Focus Events Summary: in this tutorial, you will learn about the JavaScript focus events that keep track of the elements that users focus on. Introduction to JavaScript focus events The focus events fire when an element receives or loses focus. These are the two main focus events: focus fires when an element has received…
Read more
JavaScript scrollIntoView Summary: in this tutorial, you’ll learn how to scroll an element into the view using its scrollIntoView() method. Suppose you have a list of elements and you want a specific element to be highlighted and scrolled into view. To achieve this, you can use the element.scrollIntoView() method. The element.scrollIntoView() accepts a boolean value…
Read more
JavaScript Scroll Events Summary: in this tutorial, you will learn about JavaScript scroll events and how to handle scroll events properly. Introduction to the JavaScript scroll events When you scroll a document or an element, the scroll events fire. You can trigger the scroll events in the following ways, for example: Using the scrollbar manually…
Read more