locked
Changing label color for each label control RRS feed

  • Question

  • User-1994446809 posted

    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>
    

    Saturday, October 3, 2020 6:00 PM

Answers

  • User409696431 posted

    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, October 3, 2020 7:14 PM
  • User475983607 posted

    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.  

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, October 3, 2020 7:48 PM

All replies

  • User475983607 posted

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

    Saturday, October 3, 2020 6:18 PM
  • User-1994446809 posted

    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

    Saturday, October 3, 2020 6:37 PM
  • User409696431 posted

    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, October 3, 2020 7:14 PM
  • User475983607 posted

    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.  

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, October 3, 2020 7:48 PM
  • User-1994446809 posted

    Thank you KathyW. I am new to java, so I really don't know much. I am learning

    Saturday, October 3, 2020 8:28 PM
  • User-1994446809 posted

    Hi mgebhard,

    Thanks. I understand. I will check out MVC 

    Saturday, October 3, 2020 8:30 PM
  • User409696431 posted

    Actually, there is quite a difference between Java and JavaScript.  We are talking about JavaScript here, not Java.  Different language entirely.

    Sunday, October 4, 2020 2:09 PM