Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles by Dishebh Bhayana
40 articles
How to disable button element dynamically using JavaScript?
In this article, we will learn how to disable button HTML elements dynamically using JavaScript, with the help of the "disabled" attribute. The "disabled" attribute in HTML button elements accepts a boolean value (true or false), and depending on the value, it disables the button and makes it non-functional, i.e., not clickable. We can use this attribute to disable any button in HTML by setting the "disabled" attribute to "true". Syntax Disabled Button In JavaScript, you can disable a button dynamically by setting the disabled property: // Disable button button.disabled = true; ...
Read MoreHow to display errors without an alert box using JavaScript?
In this article, we will learn how to display errors inline on a page without using alert boxes in JavaScript. We'll explore different DOM methods including innerHTML, textContent, and CSS styling techniques. While alert boxes can be useful for displaying errors to users, they can be disruptive and interrupt the user experience. A more elegant solution is to display errors inline on the page, providing immediate feedback without blocking user interaction. Let's understand how to achieve this with several practical approaches. Using innerHTML Property The innerHTML property allows us to insert HTML content into an element, ...
Read MoreHow to display a warning before leaving the web page with unsaved changes using JavaScript?
In this article, we will learn how to display a warning message before leaving the web page with unsaved changes using JavaScript with the help of the "beforeunload" event listener. When working on web applications or forms of any kind, it becomes necessary to provide a warning message to users before they leave a page with unsaved changes. This can prevent accidental data loss and improve the overall user experience. Let's understand how we can implement this with the help of some examples − Using beforeunload Event In this example, we will have a form with multiple ...
Read MoreHow to Draw Smooth Curve Through Multiple Points using JavaScript?
Drawing smooth curves through multiple points is essential for creating visually appealing data visualizations and interactive graphics. JavaScript's Canvas API provides powerful methods to achieve this using mathematical curve algorithms. When connecting multiple points with straight lines, the result appears jagged and unnatural. Smooth curves create more elegant visualizations by using mathematical interpolation between points. Method 1: Using Quadratic Bézier Curves This approach uses quadraticCurveTo() to create smooth curves by calculating midpoints between consecutive points as curve endpoints. Smooth Curve with Quadratic Bézier ...
Read MoreHow to dynamically create new elements in JavaScript?
In this article, we will learn how to dynamically create new elements in JavaScript with the help of the createElement browser API. Dynamic element creation in JavaScript allows you to generate new HTML elements on the fly. Whether you need to add content to a web page based on user interactions or dynamically generate elements for a specific task, it can help enhance the flexibility and interactivity of web applications. Let's understand how to implement this with the help of some examples. Using createElement() and appendChild() In this example, we will have a button element and ...
Read MoreHow to dynamically insert id into a table element using JavaScript?
In this article, we will learn how to dynamically insert IDs into table elements using JavaScript with the help of various DOM manipulation techniques. In web development, dynamically inserting an ID into an HTML table element can be a useful technique when we need to uniquely identify and manipulate specific rows or cells. By assigning IDs to table elements programmatically, we gain more control and flexibility in accessing and modifying the table's content. Let's understand how to implement this with the help of some examples. Method 1: Using the id Property In this example, we generate ...
Read MoreHow to create the previous and next buttons and non-working on the end positions using JavaScript?
We can create previous and next buttons that are disabled at their end positions using vanilla JavaScript. JavaScript allows us to control and manipulate DOM elements easily. Here, we will create navigation buttons and change an HTML element's content depending on which button is clicked. Example 1: Counter with Disabled States In this example, we will create "Next" and "Previous" buttons that increment and decrement a counter. The buttons will be disabled when they reach their extreme positions (0 for Previous and 5 for Next). Previous and Next Buttons with ...
Read MoreHow to display a list in n columns format?
In this article, we will learn how to display a list in "n" column format in HTML and CSS with the help of CSS Multi-Column Layout, Flexbox, and CSS Grid properties. Displaying a list in columns can be a useful way to save space and make the information more visually appealing. We can achieve this by using different approaches that rely on column-count, flexbox, and grid properties respectively. Syntax /* Multi-Column Layout */ selector { column-count: number; } /* Flexbox Approach */ selector { display: flex; ...
Read MoreHow to disable arrows from Number input?
In this article, we will learn how to disable and hide arrows from number-type input fields using CSS. Number-type inputs display spinner arrows by default that allow users to increment or decrement values, but sometimes you may want to remove these for a cleaner interface. Number-type inputs are useful when we only want numeric input from users, like input for age, height, weight, etc. By default, browsers show spinner arrows in number inputs that help change the values. Syntax /* WebKit browsers (Chrome, Safari) */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; ...
Read MoreHow to disable browser print options (headers, footers, margins) from the page with CSS?
We can control the print preview page's header, footer, and margin with CSS using the @page directive. This allows us to customize the layout and remove browser-generated print options like headers, footers, and default margins. When previewing a print page in the browser, you typically see extra information like the page title, date and time, and page numbers in the header and footer. There are also default margins applied to the page. We can disable these using CSS print styles. Syntax @media print { @page { margin: ...
Read More