https://github.com/rojcode/keytype

A JavaScript project showcasing a dynamic content changer for HTML elements based on their selectors. The project includes a function (changeInnerHtmlById) and a keydown event listener, providing real-time updates on key presses. Ideal for understanding basic DOM manipulation and event handling.
https://github.com/rojcode/keytype

dom event javascript keyboard

Last synced: 16 days ago
JSON representation

A JavaScript project showcasing a dynamic content changer for HTML elements based on their selectors. The project includes a function (changeInnerHtmlById) and a keydown event listener, providing real-time updates on key presses. Ideal for understanding basic DOM manipulation and event handling.

• Host: GitHub
• URL: https://github.com/rojcode/keytype
• Owner: rojcode
• Created: 2024-01-18T18:19:51.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2024-01-19T07:19:28.000Z (about 1 year ago)
• Last Synced: 2024-11-20T13:46:07.176Z (3 months ago)
• Topics: dom, event, javascript, keyboard
• Language: HTML
• Homepage: https://rojcode.github.io/keytype/
• Size: 5.86 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Dynamic Element Content Changer with Keyboard Event

![Project Screenshot](https://s6.uupload.ir/files/screen_shot_1402-10-28_at_22.05.25_hgns_whaz.png)

This project includes a JavaScript function (`changeInnerHtmlById`) that allows you to dynamically change the content of an HTML element using its selector. Additionally, there is an event listener attached to the `keydown` event that demonstrates the usage of this function by updating the content of several elements with information about the key pressed.

## Project Overview

The primary goal of this project is to showcase a simple JavaScript function for dynamically updating HTML elements based on their selectors. The project also includes an event listener that captures the `keydown` event, providing real-time updates about the key pressed by the user.

## Function Usage

### `changeInnerHtmlById(selector, content, callback)`

Changes the content of an HTML element identified by the provided selector.

- **Parameters:**

  - `selector` (string): The selector of the element (e.g., an id).

  - `content` (string): The new text content to set for the element.

  - `callback` (function, optional): A function to be executed on the selected element after updating its content.

**Example:**

```javascript

changeInnerHtmlById('title', 'New Title', (element) => {

  element.style.color = 'blue';

});