This tutorial will teach how to add an event handler to an element in JavaScript. There are two ways to add an event handler to any element, the first is using the addEventListener method and another is using the event attributes. Using the addEventListener() Method The addEventListener() method is used to attach an event handler to any DOM element. The syntax of this method is following. Syntax element.addEventListener( event, function, capture ) Parameter Event − The name of the event you want to apply on the element e.g. click, mouseover, submit, etc. Function − The callback function which ... Read More

It is very common to use the events while we are programming in JavaScript. Suppose you are creating a modal that opens up on clicking a button or hovering over using the cursor, here we using two events on a single element but JavaScript does not have any official way to use many event listeners on a single element. In this article, we will learn How to add many Event Handlers to the same element with JavaScript HTML DOM. To achieve this, we have the following approaches given below. Using Multiple addEventListener Methods Using the ES6 Way Using ... Read More

Use the addEventListener() method to attach an event handler.ExampleYou can try to run the following code to learn how to work with addEventListener() method in JavaScript −           Double click the below button.       Double Click                      document.getElementById("btnid").addEventListener("dblclick", displayEvent);          function displayEvent() {             document.getElementById("pid").innerHTML = Date();          }          

In this tutorial, we will learn how to set the gap between the columns with JavaScript. The readability of lengthy paragraphs or articles is improved by dividing them into multiple columns. The text is divided into multiple columns using the ‘column-count’ CSS property. There needs to be a space or gap between the columns to make each column separate from the other. To set the gap between the columns with JavaScript, we have multiple ways, and in this tutorial, we will discuss two of them − Using the style.columnGap property Using the style.setProperty() method Using the style.columnGap Property ... Read More

In this tutorial, we will learn how we can fill columns with JavaScript. Use the columnFill property to fill columns. Fill it as auto to fill sequentially, or balance to equally divide content between columns. The columnFill property is the property that specifies how the columns should be filled, auto, balanced, or in any other manner. Syntax Following is the syntax to set the columnFill property in JavaScript − selectedElement.style.columnFill="value"; Here the selectedElement is the element to which you want to add the columnFill property, while using style is the way of adding any CSS property to an element ... Read More

In this tutorial, we are going to learn how can we detect a mobile device over which we are working using JavaScript. Approach 1: Using the navigator.userAgent Property To detect a mobile device with JavaScript we are going to use the window navigator object which contains all the information regarding a browser. The property which we will use to detect a mobile device will be the userAgent property which is used to return the user-agent header sent to the server by the browser. The value we receive from this property is the browser name, version, and platform i.e., all the ... Read More

The fastest and pure JavaScripr Graph visualization toolkit isJavaScript InfoVis Toolkit. With it, you can, Perform Graph manipulation, Create bar graphs, Custom nodes, Implementing NodeTypes Adding subtrees, Drag and drop nodes, etc.

No, it is not recommended to use HTML comments to comment blocks of code. When JavaScript has first released some browsers didn’t have any support to understand the script. So a technique was then needed to hide the script code for older browsers. So that time the HTML comment within the JavaScript block was used to prevent the older browsers from showing the script code as text on the page. This technique was followed in the 1990s. Such browsers do not exist now, which wanted you to use HTML comments in JavaScript. Now all browsers understand the JavaScript blocks, so ... Read More

In this tutorial, we will learn how to set the font family for text with JavaScript. The font-family is a CSS property that specifies a prioritized list containing one or more font family names and generic family names for the text of an HTML element. To set the font-family for text with JavaScript, we have multiple ways, and in this tutorial, we will discuss two of them − Using the style.fontFamily Property Using the style.setProperty Method Using the style.fontFamily Property The style.fontFamily property sets a list of font family names and/or generic family names for the text. The ... Read More

In this tutorial, we will learn how to set the color of the rule between columns with JavaScript. Multiple columns are used to increase the readability of long paragraphs or articles. The column-count CSS property is used to divide the text into some columns. To set the color of the rule between columns with JavaScript, we used the columnRuleColor property of the style object, which is in the element object of an HTML element. Using the style.columnRuleColor Property In JavaScript, the style.columnRuleColor property of an element is used to set the color of the rule between columns of an element. ... Read More