Skip to main content
SimilarExport ZIP
100%

onclick changing background color

✓ Published0🌍 Public
NNita
Last edited May 31, 2022
Created on May 31, 2022
Forked from HTML Starter

This example demonstrates how clicking anywhere on an HTML page changes the background color to yellow, while a specific button turns blue upon page load. The page contains a simple message, a styled button, and uses vanilla JavaScript with inline `onclick` event handling and `document.getElementById` to manipulate the DOM. It relies on the Window object's `onclick` property and element style properties (`style.backgroundColor`) rather than any external libraries or frameworks, though it references a React starter as an alternative approach.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ButtonClick

This example demonstrates a simple interactive button that triggers a JavaScript function when clicked. The page displays a large “Click me” button centered on a white background, and clicking it logs “Hello JavaScript!” to the browser’s console. The implementation uses plain HTML and CSS for layout and styling, with the click handler defined in `index.js` and loaded via a bundled script. React is listed as the framework, though the visible code relies directly on native DOM event handling rather than React components.

XXin Li
71% match
Loading thumbnail…

begin

This example shows a simple interactive page built with raw HTML, CSS, and JavaScript. A yellow circle with concentric black-and-white inner circles is rendered inside an SVG canvas, with a bold "Click me" button above it. The button calls the JavaScript function `myfunction()`, though the function body is empty and no behavior is triggered on click. The page uses a 960-pixel-wide SVG with thick black strokes, styled using a CSS class for the large message text. The React Starter framework is referenced but not actually implemented in this file.

GGinnWG
69% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple interactive HTML page where clicking on text triggers a change in its content. The page displays the phrase “my text” at a large font size, and when clicked, the text updates to “I have changed” using JavaScript. The implementation uses plain HTML, inline CSS for styling, and a JavaScript arrow function assigned to the `onclick` event handler, which accesses the element via `document.getElementById`. No external libraries are used, making it a minimal starter template for web visualization projects.

NNita
68% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a static HTML page with two clickable buttons, each styled differently. The first button uses inline CSS with a red text color and blue background, while the second remains unstyled. The code relies on native HTML elements and inline style attributes, with no JavaScript or external libraries involved. It serves as a minimal starting point for testing basic web page structure and button interactivity.

JjanoPig
67% match
Loading thumbnail…

Color Flipper || Simple

This example presents a color flipper that changes the background color of a page. It includes two modes: a simple mode using a predefined array of CSS color names and values, and a hex mode generating random hexadecimal color codes. The page is built with vanilla HTML, CSS, and JavaScript, featuring a navigation bar in the simple mode and a button that triggers the color change.

Ttest-zwerr
66% match
Loading thumbnail…

basic HTML webpage with Javascript.

This example demonstrates a minimal HTML page that uses JavaScript to dynamically alter its displayed text. Initially, the page presents a static heading and a welcoming message. Upon loading, a script embedded within the page accesses the heading element by its ID and changes its inner text to a new, user-defined string. The implementation relies on the core Document Object Model (DOM) API, specifically `getElementById` and the `innerHTML` property, to perform the update. No external libraries or data sources are involved; the behavior is entirely contained within the single `index.html` file.

NNita
66% match
Loading thumbnail…

SHOW HIDE BLOCK JS

This example demonstrates a simple toggle interaction that switches between showing a red and a blue square using a button labeled “Show Red Box” or “Show Blue Box.” The code uses vanilla JavaScript event handling via an `onclick` attribute and manipulates the CSS `display` property to control visibility. It relies on the DOM API methods `getElementById` and `style.display`, with D3.js loaded for potential visualization extensions, though the core behavior is purely HTML and JavaScript.

Llupica.matthew@gmail.com
66% match
Loading thumbnail…

0415

This example demonstrates a minimal HTML page that uses JavaScript to display text on the page and in the browser console. The page writes a red-colored HTML string and a personalized age message directly into the document using `document.write`. It also logs “Hello JavaScript!” to the developer console with `console.log`. The code uses the React framework for the surrounding project, but the core interaction relies on basic JavaScript DOM methods and inline CSS styling.

CChomin21
66% match