Adjust the text color of ASP.Net Label based on the presence of a hyphen

I need help changing the text and font color of my ASP.net label based on its content.

The label displays a percentage change, and I want negative numbers to be shown in green and positive numbers in red.

However, when I try to implement this, I keep encountering an error message saying "TypeError: document.getElementById(....) is null".

I understand that using window.onload is not the best practice, but I just wanted to test it quickly.

Could someone please point out what I'm doing wrong? I feel like I'm just going around in circles with this issue.

window.onload = fillDays;

function fillDays() {
    var change = document.getElementById("<%=lblPercentageDifferenceToFillReqCurrentVsPreviousMonth %>").value;

    if (change.indexOf(char) = '-') {
        document.getElementById("<%=lblPercentageDifferenceToFillReqCurrentVsPreviousMonth %>").style.color = "green";
    }
    else {
        document.getElementById("<%=lblPercentageDifferenceToFillReqCurrentVsPreviousMonth %>").style.color = "red";
    }
    console.log("fillDays")
};

Answer №1

You must include the ClientID in your code

var change = document.getElementById("<%= lblPercentageDifferenceToFillReqCurrentVsPreviousMonth.ClientID %>").value;

Provided it is a valid Control like

<asp:TextBox ID="lblPercentageDifferenceToFillReqCurrentVsPreviousMonth" runat="server"></asp:TextBox>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Add a fading transition feature to images that are loaded at a later time

I used a clever technique to create a blur effect by loading a small, lightweight image first. Once the main background image is loaded, it swaps out the 'data-src' with the actual image. However, I am facing an issue with the abrupt transition, ...

The animation of a disappearing div with CSS is not stopping when hovering over it

Hello, I've been working on a snackbar feature that appears and disappears on a set timer but also needs to pause when hovered over. Unfortunately, the current setup with setTimeout and useState is causing issues with this functionality. I have looke ...

Pug conditional elements not styling with CSS

Currently immersed in the world of Pug, node.js, and express as I build a web application. Facing hurdles when trying to style elements within Pug conditionals using CSS. For instance, consider this Pug snippet: div(id='outside') if authoris ...

Implementing form validations using JavaScript for a form that is created dynamically

I have dynamically created a form using javascript and now I need to add mandatory validations on the form. The validations should trigger when the dynamically created button is clicked. However, I am facing an issue where I receive an error whenever I t ...

Is there a way to display User Control children in a designated position?

I currently have a basic user control that has the following structure: <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="wfWindow.ascx.cs" Inherits="webfanatix.co.za.wfWindow" %> <div>Just a test...[x]</div> along with this ...

Retrieving & Refreshing Data with ajax and Jquery

I have been working on developing a forum system using jQuery, PHP, Bootstrap, and other technologies. The forum allows users to post, delete, and edit their posts. I have implemented an edit button for the author of the post, which triggers a modal wind ...

JavaScript quiz featuring randomized questions with selectable radio buttons

I need assistance in creating a feature on my webpage where users can select the number of questions they want to answer (ranging from 1 to 10). The selected number of questions should then be displayed randomly, without any duplicates. I am not very famil ...

Utilizing the Current URL from the address bar as a variable to link within the same page

My goal is to: Extract the current URL address from the browser bar, which will have a format like this: http://example.com/test/index.html?&dv1=1023faf2ee37cbbfa441eca0e1a36c Retrieve the lengthy ID number located at the end of the URL 1023faf2ee37c ...

Discovering the amount of attributes possessed by an element with jQuery

If I have an xml element like this: <fruit color="blue" taste="sweet" shape="round"></fruit> Without using jQuery, I could use the following code: fruit.attributes.length How can I achieve the same result with jQuery? ...

Every time I invoke a module, non-global variables are utilized

Within a module.exports file, I am facing an issue where the variables are shared among different instances of the module. Instead, I want each call to the module to have its own set of values for cycle number, original data, new product, etc., similar to ...

Verify image loading using jQuery

<img src="newimage.jpg" alt="thumbnail" /> I am dynamically updating the src attribute of this image. Is there a way to verify if the image has been successfully loaded and take action once it is? Appreciate any guidance on this matter. ...

How to pass props dynamically to components in VueJS with ease

My view is always changing: <div id="myview"> <div :is="currentComponent"></div> </div> I have linked it to a Vue instance: new Vue ({ data: function () { return { currentComponent: 'myComponent', } ...

Struggling to make the fancybox feature function with html/php

I've been trying to find a solution to this problem repeatedly, but I just can't seem to crack it. All I want to do is use fancybox to display an image. Since this is my first time using fancybox, I'm sure someone with more experience will ...

Can a function be activated in JavaScript when location permission is declined?

Background: Following up on a previous question regarding the use of getCurrentPosition and async functions. I am currently working on The Odin Project and attempting to create a basic weather application. My goal is to include a feature that automatically ...

Tips for handling Google Spanner Date type in JavaScript

I am facing a challenge with Google Cloud Spanner as I work with multiple tables containing columns of type Date. While inserting entries with specified dates works fine, the issue arises when trying to retrieve these entries in the JavaScript frontend. Th ...

Retrieving external response data within a nested $http request

Excuse me as I am new to working with AngularJS. I am trying to figure out how to properly handle a nested $http call in my code, $http({ method: 'GET', url: host1, params: { 'format': 'json', } }).then(function ...

Implement seamless content loading using jQuery, eliminating the need

Is there a reason why this piece of code isn't working for me? I'm trying to load HTML content using jQuery and followed the instructions from this tutorial: Here's how my HTML looks: <div id="icon"> <a href="http://localhost/ ...

Can OpenLayers library be integrated into Vue CLI 3?

I am currently trying to integrate Openlayers with vue-cli-3, but it seems like I am missing something in the process. Initially, I installed Vue CLI using the following command: npm install @vue/cli -g Next, I added additional dependencies, specifically ...

What are some ways to make session variables available for sub applications?

I am currently working on setting up an API to interact with a MongoDB database, which I have integrated as a subapplication. In my server controller, I have created a session variable. However, I am facing an issue where the session variables are not be ...

Tips for alternating the color of <li> or <tr> elements consecutively

Looking to alternate the background color of li or tr elements consecutively. Please note: A static class will not work as I need to call this in a while loop. The desired output should look like: <li>line1</li> //white background <li> ...