DeveloperBreeze

Password Toggle

javascript
Event Listener DOM Manipulation 
// Get references to the password input and toggle button
const passwordInput = document.getElementById('passwordInput');
const toggleButton = document.getElementById('toggleButton');

// Add event listener to the toggle button
toggleButton.addEventListener('click', () => {
    // Toggle the password input type between 'password' and 'text'
    passwordInput.type = passwordInput.type === 'password' ? 'text' : 'password';
});

Related Posts

More content you might like

Tutorial
php

Exporting Table Row Data to CSV in JavaScript

  • querySelectorAll('.export-btn'): Selects all elements with the class export-btn, i.e., the export buttons.
  • closest('tr'): This retrieves the closest table row (<tr>) that contains the clicked button.
  • querySelectorAll('td'): Retrieves all the <td> cells in the row.
  • Array.from(): Converts the list of cells into an array, which allows us to manipulate it easily.
  • cells.pop(): Removes the last cell (the one containing the export button), as we don’t want it in the CSV.
  • textContent: Extracts the text content from each cell.
  • encodeURIComponent(): Encodes the CSV string, making it safe for use in a URL.
  • anchor.download: Specifies the filename for the CSV file (in this case, row_data.csv).
  • anchor.click(): Programmatically triggers a click on the anchor element, which starts the download.

Here’s a complete example of the HTML and JavaScript code together:

Oct 24, 2024
Read More
Tutorial
javascript

Easy JavaScript Tutorial for Beginners

  • Essential for Web Development: JavaScript is used to make web pages interactive.
  • Versatile: It works both on the client-side (in the browser) and the server-side (with Node.js).
  • High Demand: It's widely used, and knowing JavaScript opens many opportunities in web development.

You can add JavaScript to a web page in several ways:

Sep 18, 2024
Read More
Tutorial
javascript

MDN's In-Depth JavaScript Guide: A Comprehensive Resource for Developers

In addition to tutorials and guides, MDN provides an extensive reference section that documents every aspect of the JavaScript language, including:

  • Global Objects: Detailed information on built-in objects like Array, String, Math, and Date.
  • Operators: Explanation of all JavaScript operators, such as arithmetic, comparison, logical, and bitwise operators.
  • Statements and Declarations: Documentation of all control structures, including loops, conditionals, and function declarations.

Aug 30, 2024
Read More
Tutorial
javascript

Understanding the DOM in JavaScript: A Comprehensive Guide

You can also remove an event listener if it’s no longer needed.

function handleClick() {
    alert('Button was clicked!');
}

button.addEventListener('click', handleClick);

// Later in the code...
button.removeEventListener('click', handleClick);

Aug 30, 2024
Read More

Discussion 0

Please sign in to join the discussion.

No comments yet. Be the first to share your thoughts!