// 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';
});Password Toggle
javascript
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 classexport-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, andDate. - 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 MoreDiscussion 0
Please sign in to join the discussion.
No comments yet. Be the first to share your thoughts!