assign a JavaScript value to an ASPX label element

I am currently utilizing javascript to call a Web API. Within my HTML, I have a label element with the id of "blbtest" on an aspx page.

    <asp:Label ID="blbtest" Text="" runat="server ClientIDMode="Static">

My goal is to store the value of the name variable in this label, but unfortunately, I encountered an error.

Here is the JavaScript code used:

       var request = new XMLHttpRequest;
       request.open('GET', "https://hplussport.com/api/products?qty=2");

       request.onload = function () {
       var response = request.response;
       var parsedData = JSON.parse(response);
       console.log(parsedData);
       var name = parsedData[0].name;
       var products = document.createElement('li');
    //products.innerHTML = name;
    //document.body.appendChild(products);
   var lbl = document.getElementById('<%=blbtest.ClientID%>');

  lbl.innerText = name;
  };
  request.send();

The encountered error states: Uncaught TypeError: Cannot set properties of null (setting 'innerText') at XMLHttpRequest.request.onload (script.js:14:19)

Even though the commented lines are functioning correctly, I aim to showcase the product's name within the label element upon page load.

Answer №1

Success! I gave it a shot and it actually did the trick :)

document.getElementById('blbtest').innerHTML = name;

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

The issue arises when attempting to format the date in React before passing it as a parameter in the API

Issue with passing date time value as URL parameter to backend Java API via GET method. The API is only receiving part of the date time string, with the rest being cut off. My React code: const handleStartDate = date => { setStartDate(date); ...

How to use TypeScript to filter arrays with multiple dimensions

I've been attempting to filter an array with multiple filters, but I can't seem to achieve the desired outcome so far. This is my Angular component: list = [ {type: type1, code: code1}, {type: type2, code: code2}] searchElement(code?: string, ...

How can one maintain the same color for a child in a sunburst sequence as its parent?

Seeking advice on how to create a lighter color for a child element based on the parent's color. The code I currently use generates random colors as shown below: var color = d3.scale.category20b(); .style("fill", function(d) { return color((d.ch ...

The issue of process.server being undefined in Nuxt.js modules is causing compatibility problems

I've been troubleshooting an issue with a Nuxt.js module that should add a plugin only if process.server is true, but for some reason it's not working as expected. I attempted to debug the problem by logging process.server using a typescript modu ...

Are JavaScript comments posing a security threat?

During a recent PCI audit, the auditor identified what they believed to be major security risks in our system: The ability to download static resources such as images, CSS, and JavaScript from our website without authentication The presence of comments i ...

Angular 2.4.8's need for Node.js dependency

I recently started working with angular 2.4.8 and have been exploring tutorials on the angular website. However, I've noticed that all angular libraries are typically imported using node modules (via package.json for installing Node.js). Is it mandato ...

Searching for items within an array whose inner array contains certain objects can be achieved using lodash

I have arrays containing tasks and tags: const tasks = [ {id: 0, name: 'a', tags: [{id: 0, name: 'q'}, {id: 7, name: 'i'}]}, {id: 1, name: 'b', tags: [{id: 2, name: 'e'}, {id: 4, name: 't'}, ...

What's the reason behind express-rate-limit not performing as anticipated?

There seems to be an issue with the enforcement of the rate limit I specify in my code. Instead of lasting for 35 minutes as intended, it only lasts for about 20 seconds. Additionally, continuously making requests seems to reset the time limit, which is un ...

combining a pair of numbers during a session

Currently, I am working on a web application in ASP.net / C# which involves generating random numbers. On the Page_Load event, the initial random number (num1) is created. The webpage contains a button that, when clicked by the user, generates another rand ...

Exploring the state management in reactjs

Looking to incorporate functions from an object as well const PhotoShootTypes = [ { id: 1, name: "Studio Photoshoot", link: "/Photoshoot", icon:"fa fa-calendar", onClickAction: "setToggle1" }, { id: 2, name: "Outdoor Photoshoot", link: "/Photoshoot", i ...

Add the HTML code to the div when clicked without overwriting the current code

I am interested in including HTML code to create a "list". I have come across instances of innerHTML, but that simply replaces the current code. Is there a way to append additional code without replacing the existing one? var addTo = document.querySel ...

Using Jquery in asp.net to dynamically add and delete rows within a table

Having an organized table on the Master Page table border="1" border-style="dashed" width="80%" id="tblAddBirthdays" tr id="tr" td asp:TextBox ID="txFirstName" runat="server" asp:TextBox asp:TextBox I ...

How can JavaScript generate arrays filled with randomly generated numbers?

As part of a classroom assignment, I am working on creating a table using only Javascript. The table is set up perfectly, except that every other row displays a random number before moving on to the next row. How can I eliminate this random row? var ta ...

What makes Reactive Extensions stand out as a game-changer?

What makes Reactive Extensions stand out as a game-changer for developers in both .NET and JavaScript? What are the key reasons for developers to dive into learning and implementing them? ...

I'm having trouble resolving the issue in my React App after attempting to export a functional component. How can I troubleshoot and

Since the first week of this online course on Coursera.org, I've been struggling to get my React app to display. Even after watching videos and revising the code multiple times based on Google search results, I couldn't make it work. Despite seek ...

Issue with Flat-UI: Navigation bar is not collapsing correctly. Need help to resolve this problem

I am currently utilizing the most recent Twitter Bootstrap along with Flat UI. I have been trying to create a basic navbar that collapses when the screen size is reduced. How can I resolve this issue? This is how it currently appears: My navigation items ...

Encountered a 404 error while attempting to build and serve a Vue.js project using 'npm build' in Apache Tomcat

After setting up a Vue.js project, the configuration in the package.json file looks like this: "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": ...

Using Node.js to execute JavaScript with imported modules via the command line

Having limited experience with running JavaScript from the command line, I am facing a situation where I need to utilize an NPM package for controlling a Panasonic AC unit, which includes a wrapper for their unofficial API. My objective is to create a sim ...

Is there a way for my discord bot to notify me when a certain user is playing a particular game?

How can I set up my bot to automatically send a message when a specific user starts playing a specific game, like Left 4 Dead 2? I'm looking for a way to do this without using any commands. // Game Art Sender // if (message.channel.id === '57367 ...

Getting command line argument parameters in React can be achieved by utilizing the `process.argv`

Is there a way to retrieve command line argument parameters in React? I currently have a React codebase that is utilizing Webpack. When running the following commands - npm run build -- --configuration=dev or npm run build -- --configuration=qa I need t ...