JavaScript color viewer

This article example shares the specific code of JavaScript to implement the color viewer for your reference. The specific content is as follows

Achieve results

The box is initially white
Enter the color code in the input box, click to view the color, and the corresponding color will appear above
Click Restore to restore to the initial white color and clear the content of the input box.

Implementation Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Color Viewer</title>
        <style>
            #color {
                width: 150px;
                height: 150px;
                background-color: #fff;
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
        <div id="color"></div>
        <input id="inp" type="text" placeholder="Please enter the color code..." />
        <button id="trans">View Color</button>
        <button id="rst">Restore</button>
    </body>
    <script>
        let trans = document.getElementById('trans');
        let color = document.getElementById('color');
        let inp = document.getElementById('inp');
        let rst = document.getElementById('rst');
        trans.addEventListener('click', () => {
            color.style.backgroundColor = inp.value;
        });
        rst.addEventListener('click', () => {
            color.style.backgroundColor = '#fff';
            inp.value = '';
        });
    </script>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS implements a simple object-oriented color picker example
Simple radio background color selector code implemented by js
How to create a color picker based on 3 primary colors using javascript
js implements a color selector instance that can get different color values
JS code to dynamically change the background color of the web page when the mouse is selected
JS small function (button selection color) simple example
JavaScript gets the system's built-in color picker function (picture)
5 Javascript Color Pickers
js color picker (compatible with firefox)
js color picker code [firefox not supported]

<<: Detailed installation and use of SSH in Ubuntu environment

>>: Summary of common functions of PostgreSQL regular expressions