Modify the Div background color by accessing the HEX value saved in a JSON file

Question

Modify the Div background color by accessing the HEX value saved in a JSON file

(I made a change to my code and removed the br tag from info2)

Currently, I have successfully implemented a feature using jQuery that reads color names and hex values from a JSON file, populates them in a drop-down select menu (which is working fine). Now, I am looking to enhance this functionality where I want the background color of a div next to the drop-down to dynamically change based on the color selected by the user. How can I achieve this?

Here's a snippet of my page:

<script language="javascript" type="text/javascript">
    
        var JSON_Response;
    
        $(document).ready(function () {
    
            $.getJSON('Colors.json', function (data) {
                JSON_Response = data;  
    
                var mySelect = document.getElementById("selColor");
    
                for (i = 0; i < JSON_Response.Colors.length; i++) {
                    var myOption = document.createElement("option");
                    myOption.text = JSON_Response.Colors[i].colorName;
                    myOption.value = i;
                    try {
    
                        mySelect.add(myOption, mySelect.options[null]);
                    }
                    catch (e) {
                        mySelect.add(myOption, null);
                    }
                } 
    
            }); 
    
            $("#selColor").change(function () {
                var myIndex = $("#selColor").val();
                $("#showColor").attr("src", JSON_Response.Colors[myIndex].hex);
    
                var info = JSON_Response.Colors[myIndex].colorName + "<br />";
                info += JSON_Response.Colors[myIndex].hex+ "<br />";
                var info2 = JSON_Response.Colors[myIndex].hex;
                $("#divDisplay").html(info).css({'background-color' : '#' + info2});
    
    
            }); 
        });     
    
        </script>

javascript jquery html css json

Answer 1

Answer №1

Avoid adding <br /> to the end of the info2 variable, as it should only store a hexadecimal color code.

var info2 = JSON_Response.Colors[myIndex].hex;

Answer 2

Avoid adding <br /> to the end of the info2 variable, as it should only store a hexadecimal color code.

var info2 = JSON_Response.Colors[myIndex].hex;

Answer 3

Answer №2

Essentially, you've got it. The mistake lies in the background-color value that you're assigning to the div.

$("#divDisplay").html(info).css({'background-color' : '#' + info2});

The correct version should be:

$("#divDisplay").html(info).css({'background-color' : '#' + JSON_Response.Colors[myIndex].hex});

Here is a basic working fiddle example

<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
    <button>Click me</button><br/>
    <div id="myDiv" style="height:400px;width:400px;">
    </div>

    <script>
    var hexChars = "ABCDEF0123456789";

    function getColor() {
        var colorStr = "";

        for(var idx=0; idx < 6; idx++ ) {
                colorStr += hexChars.charAt(Math.floor(Math.random() * hexChars.length));
        }

        return colorStr;
    }

    $('document').ready(function() {
        $('button').click(function() {
            var rand = getColor();

            $('#myDiv').html('#' + rand).css({ 'background-color' : '#' + rand });
        });
    });
    </script>
</body>
</html>

Answer 4

Essentially, you've got it. The mistake lies in the background-color value that you're assigning to the div.

$("#divDisplay").html(info).css({'background-color' : '#' + info2});

The correct version should be:

$("#divDisplay").html(info).css({'background-color' : '#' + JSON_Response.Colors[myIndex].hex});

Here is a basic working fiddle example

<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
    <button>Click me</button><br/>
    <div id="myDiv" style="height:400px;width:400px;">
    </div>

    <script>
    var hexChars = "ABCDEF0123456789";

    function getColor() {
        var colorStr = "";

        for(var idx=0; idx < 6; idx++ ) {
                colorStr += hexChars.charAt(Math.floor(Math.random() * hexChars.length));
        }

        return colorStr;
    }

    $('document').ready(function() {
        $('button').click(function() {
            var rand = getColor();

            $('#myDiv').html('#' + rand).css({ 'background-color' : '#' + rand });
        });
    });
    </script>
</body>
</html>

Modify the Div background color by accessing the HEX value saved in a JSON file

Answer №1

Answer №2

Similar questions

jQuery load fails to fill select dropdown

What sets apart the HTML tags for embed, object, and video elements?

Show data from an API in an HTML table

The style of MUI Cards is not displaying properly

Utilize axios-cache-interceptor to enforce caching of responses from axios

Using AJAX to Post Data with Relative Path in ASP.NET MVC 5

The text entered in the textbox vanishes after I press the submit button

Unexpected outcomes from executing the Bash and echo commands

Is there a way to transfer innerHTML to an onClick function in Typescript?

Navigational Menu in PHP

Utilizing SwiftyJSON for converting JSON strings to Swift objects

What is the best way to utilize the GET Method with a hashtag incorporated into the URL?

Encountering a parse error when making an AJAX call using structural functions

Encountering a Node.js issue when attempting to properly sanitize data before inserting it into MySQL

Include the timestamp of the present moment and update the JSON data structure using Python

Iterating over numerous data points within a JSON file and leveraging a single value for each instance in Gatling

Harnessing the Power of JSON in Rails to Enhance Your jQuery UI Autocomplete Form

The way an event can be outrun or vanish due to another event

Utilizing Material UI's TextField components for validating React forms

Loading JSON data into HTML elements using jQuery