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
Object Oriented Programming Articles
Page 71 of 589
How to add and remove names on button click with JavaScript?
JavaScript allows you to dynamically add and remove names from a list using DOM manipulation methods. This functionality is commonly used in todo lists, user management interfaces, and interactive forms. HTML Structure First, we need a basic HTML structure with an input field, buttons, and a container for the names list: Add and Remove Names body { ...
Read MoreCreate increment decrement plus minus buttons programmatically for HTML input type number in JavaScript
In JavaScript, you can create increment and decrement buttons for HTML input type number using the stepUp() and stepDown() methods. This approach provides better user experience by allowing precise control over numeric inputs. On clicking Increment (+), the number in the input field increases by the step value On clicking Decrement (-), the number in the input field decreases by the step value The buttons respect the min/max constraints of the input field Basic Implementation Here's how to create increment/decrement buttons programmatically: ...
Read MoreJavaScript - Creating a Custom Image Slider
An image slider is a user interface component in JavaScript that allows users to view a series of images in a slideshow format. It is also known as a carousel or slideshow. An image slider consists of navigation buttons (such as next and previous buttons) that allow users to navigate from one image to the other. With the help of basic HTML for structuring and CSS for designing or making the image slider presentable, along with simple JavaScript logic, you can create an image slider efficiently. This article will guide you through creating a basic image slider with navigation ...
Read MoreJavaScript program to update DOM
JavaScript is a powerful tool for dynamically updating the Document Object Model (DOM) of a web page. The Document Object Model (DOM) is an important part of web development that allows changing the structure, content, and style of a webpage. This article explains how to update the DOM using different methods and provides examples. Understanding the DOM DOM stands for Document Object Model. The DOM represents a webpage as a tree structure, where each element is a node. JavaScript allows developers to select, modify, and manipulate these elements in real time, making web pages dynamic and interactive. ...
Read MoreJavaScript program to get a variable to count up/down on keyboard press.
When working with JavaScript, handling keyboard events and creating a program that gets a variable to count up/down on keyboard press can be an essential skill. Keyboard events such as keydown and keyup in JavaScript are actions that occur when a user interacts with the keyboard. This article explains how to create a JavaScript program that increments or decrements a variable based on specific keyboard key presses. This feature can be helpful in interactive websites, like games or tools that check user input. Table of Content You can create a JavaScript program to get a variable to count ...
Read MoreHow to set the shadow effect of a text with JavaScript?
The textShadow property in JavaScript allows you to add shadow effects to text elements. This property accepts values for horizontal offset, vertical offset, blur radius, and color. Syntax element.style.textShadow = "h-shadow v-shadow blur-radius color"; Parameters h-shadow: Horizontal offset of the shadow (required) v-shadow: Vertical offset of the shadow (required) blur-radius: Blur distance of the shadow (optional) color: Color of the shadow (optional) Example: Basic Text Shadow Add Text Shadow Remove Shadow ...
Read MoreWith JavaScript how to change the width of a table border?
To change the width of a table border in JavaScript, use the DOM border property or the more specific borderWidth property. This allows you to dynamically modify table borders after the page loads. Syntax element.style.border = "width style color"; element.style.borderWidth = "width"; Example: Changing Table Border Width function borderFunc(x) { document.getElementById(x).style.border = "5px dashed blue"; ...
Read MoreHow to define global variable in a JavaScript function?
In JavaScript, you can define global variables either at global scope or from within functions using the window object. Here are the main approaches. Method 1: Declaring at Global Scope The most straightforward way is to declare variables outside any function at global scope: var myGlobalVariable = "I'm global!"; function display() { console.log(myGlobalVariable); // Accessible here } display(); console.log(myGlobalVariable); // Also accessible here ...
Read MoreHow to set the right position of a positioned element with JavaScript?
In this tutorial, we shall learn to set the right position of a positioned element with JavaScript. What is a positioned element? The available position values in CSS are relative, absolute, fixed, or static. The static position is the default position value. Static elements are in the document order. A positioned element's position is based on its properties like the top, right, bottom, and left. We must set the position in every direction to align the elements as required. Here we are going to see the right position property. Using the right Property With this ...
Read MoreHow to set the painting area of the background with JavaScript?
In this tutorial, we will learn how to set the painting area of the background with JavaScript using the backgroundClip property. The background-clip CSS property defines how far a background (color or image) extends within an element. It specifies whether the background extends beneath the border-box, padding-box, or content-box of an element. Understanding background-clip Property The background-clip property accepts three main values: border-box - Background extends to the outer edge of the border (default) padding-box - Background extends to the outer edge of the padding content-box ...
Read More