Changing label color for each label control

Reply

georgeakpan2...

Member

66 Points

175 Posts

Changing label color for each label control

Oct 03, 2020 06:00 PM|georgeakpan233|LINK

Hello,

When trying to change color of label controls, the color changes for one label (the last label) when selecting color from color <input>; other labels do not work. All the color <input> work for ONLY one label. It is like all the <input> are attached to one label control, but I made sure that the label id and <input> id belong to each control. Please can anyone help out with solution to this?

Here is my HTML and Javascript

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            <center>
        <br /><br />
        <asp:Label ID="Label1" runat="server" Text=" Name"></asp:Label><br /><br />
        <asp:Label ID="Label2" runat="server" Text="Your Role"></asp:Label><br /><br />
        <asp:Label ID="Label3" runat="server" Text="Age"></asp:Label><br /><br />
        <asp:Label ID="Label4" runat="server" Text="ID Number"></asp:Label><br /><br />
        <asp:Button ID="Button1" runat="server" Text="Change Color" />
         <br />
         <br />
        <div>
        <label style="font-size: 8pt; font-family: Comfortaa;">Name Color:</label>
        <input type="color" value="#ff0000" id="namecolor" style="width: 25px;" />
        <label style="font-size: 8pt; font-family: Comfortaa;">Your Role Color</label>
        <input type="color" value="#00003D" id="role" style="width: 25px;" />
        <label style="font-size: 8pt;font-family: Comfortaa;">Age Color:</label>
        <input type="color" value="#ff0000" id="colorage" style="width: 25px;" />
        <label style="font-size: 8pt; font-family: Comfortaa;">ID Number Color:</label>
        <input type="color" value="#ff0000" id="colorid" style="width: 25px;" />
        </div>
        </center>
        </div>
    </form>
     <script>
         var namecolor;
        var defaultColor = "#0000ff";

        window.addEventListener("load", startup, false);

        function startup() {
            namecolor = document.querySelector("#namecolor");
            namecolor.value = defaultColor;
            namecolor.addEventListener("input", updateFirst, false);
            namecolor.select();
        }

        function updateFirst(event) {
            var p = document.querySelector("Label1");

            if (Label1) {
                Label1.style.color = event.target.value;
            }
        }
    </script>

    <script>
        var role;
        var defaultColor = "#0000ff";

        window.addEventListener("load", startup, false);

        function startup() {
            role = document.querySelector("#role");
            role.value = defaultColor;
            role.addEventListener("input", updateFirst, false);
            role.select();
        }

        function updateFirst(event) {
            var label = document.querySelector("Label2");

            if (Label2) {
                Label2.style.color = event.target.value;
            }
        }
    </script>
</body>
</html>

Reply

mgebhard

All-Star

53091 Points

23659 Posts

Re: Changing label color for each label control

Oct 03, 2020 06:18 PM|mgebhard|LINK

I'm having a hard time understanding the intent by reading the code. Can you explain the programming problem you are trying to solve?

Reply

georgeakpan2...

Member

66 Points

175 Posts

Re: Changing label color for each label control

Oct 03, 2020 06:37 PM|georgeakpan233|LINK

Mgebhard,

I want to set <input> color to each label so that when I select color from the <input> for each label, the label color changes. Now the problem I have is that when I select color, it only applies to one label control...The other label color does not change, even though I assigned an <input> color to it

Reply

KathyW

Contributor

5961 Points

2468 Posts

Re: Changing label color for each label control

Oct 03, 2020 07:14 PM|KathyW|LINK

You have a lot of things wrong. I'll ask you to look at them, and my sample correction for two labels at the end, and try again.

First, this function is wrong:

function updateFirst(event) {
            var label = document.querySelector("Label2");

            if (Label2) {
                Label2.style.color = event.target.value;
            }
        }

You are trying to select an id #Label2, but missing the #.

You have defined a variable "label", and not used it. Instead you are using the string "Label2" in your if statement.

You have the same problem in your next "updateFirst" function.

function updateFirst(event) {
             var p = document.querySelector("Label1");

             if (Label1) {
                 Label1.style.color = event.target.value;
             }
         }

Again you have a string where you need an id (#Label1), you've defined a variable you aren't using (p), and you are using a string rather than the variable in your if statement.

This brings up another major problem. You are writing functions for multiple labels and color pickers, but using the same function names.

In JavaScript if you define multiple functions with the same name, then the last one defined will be the one that actually runs.

Change the names, and the references to those names. You don't need to put the Javascript in separate <script> tags, but if you want to for your own clarity, that's up to you. Just don't think it keeps the names of functions and variables separate - it doesn't.

Here is a redo of your script for the first two labels. Follow it to add the additional code for the other two labels.

 <script>
         var namecolor;
         var defaultColor = "#0000ff";

         window.addEventListener("load", startupname, false);

         function startupname() {
             namecolor = document.querySelector("#namecolor");
             namecolor.value = defaultColor;
             namecolor.addEventListener("input", updateFirstname, false);
             namecolor.select();
         }

         function updateFirstname(event) {
             var labelname = document.querySelector("#Label1");

             if (labelname) {
                 labelname.style.color = event.target.value;
             }
         }
     </script>

    <script>
        var role;
        var defaultColor = "#0000ff";

        window.addEventListener("load", startuprole, false);

        function startuprole() {
            role = document.querySelector("#role");
            role.value = defaultColor;
            role.addEventListener("input", updateFirstrole, false);
            role.select();
        }

        function updateFirstrole(event) {
            var labelrole = document.querySelector("#Label2");

            if (labelrole) {
                labelrole.style.color = event.target.value;
            }
        }
    </script>

You need to step back and think about how this works, and provide the correct code for all the labels.

Reply

mgebhard

All-Star

53091 Points

23659 Posts

Re: Changing label color for each label control

Oct 03, 2020 07:48 PM|mgebhard|LINK

georgeakpan233
I want to set <input> color to each label so that when I select color from the <input> for each label, the label color changes. Now the problem I have is that when I select color, it only applies to one label control...The other label color does not change, even though I assigned an <input> color to it

I think you are trying to do something like the following. The idea is crafting HTML to make the design a bit easier to handler. The data attribute is used to map the color input to the label. A CSS class, color-picker, is used to select multiple color inputs.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebFormsDemo.Basic._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .content {
            width: 50%;
            margin: auto;
        }
        .color-picker {
            width: 25px;
        }
        .color-label {
            font-size: 8pt; 
            font-family: Comfortaa;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div class="content">
            <div>
                <asp:Label ID="Name" runat="server" Text="Name"></asp:Label>
            </div>
            <div>
                <asp:Label ID="Role" runat="server" Text="Your Role"></asp:Label>
            </div>
            <div>
                <asp:Label ID="Age" runat="server" Text="Age"></asp:Label>
            </div>
            <div>
                <asp:Label ID="Number" runat="server" Text="ID Number"></asp:Label>
            </div>

            <label class="color-label">Name Color:</label>
            <input type="color" value="#ff0000" id="namecolor" class="color-picker" data-name="Name" />

            <label class="color-label">Your Role Color</label>
            <input type="color" value="#00ff00" id="role" class="color-picker" data-name="Role" />

            <label class="color-label">Age Color:</label>
            <input type="color" value="#0000ff" id="colorage" class="color-picker" data-name="Age" />

            <label class="color-label">ID Number Color:</label>
            <input type="color" value="#ffff00" id="colorid" class="color-picker" data-name="Number" />
        </div>
    </form>
    <script>
        document.querySelectorAll('.color-picker').forEach(item => {
            //Init label colors
            document.getElementById(item.dataset.name).style.color = item.value;

            //Add color input handler.  Can also use 'change'.
            item.addEventListener('input', event => {
                var colorPicker = event.target;
                var labelId = colorPicker.dataset.name;
                document.getElementById(labelId).style.color = colorPicker.value;
            })
        });
    </script>
</body>
</html>

Keep in mind Web Form IDs are not static. The ID selector(s) will break if the labels are placed inside another web forms control. I recommend moving to MVC if you are interested in learning JavaScript. Web forms are not JavaScript friendly.