572
Views
13
Comments
document.getElementById() returns null
Question

Hi,

document.getElementById().innerHTML keeps returning an "Cannot set property 'innerHTML' of null"

I have absolutely no idea what I am doing wrong

This is the literally all the code

document.getElementById("Container").innerHTML = "<div>example</div>"

I have a container with name "Container"

Any help is really greatly appreciated

Thanks in advance

Louie

2024-02-16 07-43-18
Amit Verma

Hi Louie,

Please try below code:
document.getElementById('#"+Contanier.Id+"').innerHTML="<div>example<\div>

Hope this will help you :)

-AV

Thanks

UserImage.jpg
Louie Ng

Amit Verma wrote:

Hi Louie,

Please try below code:
document.getElementById('#"+Contanier.Id+"').innerHTML="<div>example<\div>

Hope this will help you :)

-AV

Thanks

 Hi,

Thanks for the response.

I have tried both the following codes and both still return the same error:

document.getElementById('#"+Container.Id+"').innerHTML= "<img src = 'Images.Logo.URL'>";

document.getElementById('"+Container.Id+"').innerHTML= "<img src = 'Images.Logo.URL'>"; 

2020-08-30 01-15-23
Nghia Hoang

If you named the Container as "Container", you must access it by Id via Expression, something like this: 

The reason because the Id of Container "Container" is generated by Outsystems and you have to access it via Widget Variable "Container.Id"

UserImage.jpg
Louie Ng

Nghia Hoang wrote:

If you named the Container as "Container", you must access it by Id via Expression, something like this: 

The reason because the Id of Container "Container" is generated by Outsystems and you have to access it via Widget Variable "Container.Id"

 

 Hi,

Thanks for the response.

I have tried both the following codes and both still return the same error:

document.getElementById('#"+Container.Id+"').innerHTML= "<img src = 'Images.Logo.URL'>";

document.getElementById('"+Container.Id+"').innerHTML= "<img src = 'Images.Logo.URL'>"; 

 

2019-09-24 18-41-25
Jorge Martins
 
MVP

Hi Louie,

Like others have mentioned, you are getting that error because there's no HTML element with an Id equal to "Container".

If would definitely help to know if you are working on a Reactive/Mobile application or a Traditional Web application, as the way you deal with JavaScript is different. The examples above are all for Traditional Web apps.

My suggestion is to use the browser's Developer Tools first to analyze your screen's DOM to find your element (and its identifier) and the browser's JavaScript Console to call the getElementById() with the right identifier and make sure it actually exists, then fix your code.

Hope this helps!


2025-12-15 12-14-19
Ajay Sharma

Louie Ng wrote:

Hi,

document.getElementById().innerHTML keeps returning an "Cannot set property 'innerHTML' of null"

I have absolutely no idea what I am doing wrong

This is the literally all the code

document.getElementById("Container").innerHTML = "<div>example</div>"

I have a container with name "Container"

Any help is really greatly appreciated

Thanks in advance

Louie

 

 Please make sure Container exists while you are running this code.

Make sure Container is not hidden or you are calling code on OnReady event.



Thanks!!

UserImage.jpg
Louie Ng

Ajay Sharma wrote:

Louie Ng wrote:

Hi,

document.getElementById().innerHTML keeps returning an "Cannot set property 'innerHTML' of null"

I have absolutely no idea what I am doing wrong

This is the literally all the code

document.getElementById("Container").innerHTML = "<div>example</div>"

I have a container with name "Container"

Any help is really greatly appreciated

Thanks in advance

Louie

 

 Please make sure Container exists while you are running this code.

Make sure Container is not hidden or you are calling code on OnReady event.



Thanks!!

 

 Thank you for your response. My container is definitely not hidden and I dp already know that I am not supposed to run the code on the OnReady event. It is being run on the onclick event. If you could provide me with a working example, that would be great

UserImage.jpg
Louie Ng

Sorry, I forgot to mention that I was developing a mobile app. If anyone could provide a working example, that would be great. I have not used Outsystems in around a year. The code which I used used to work in the past

2020-08-31 05-04-40
Rahul Jain

Hello ,


I am using JavaScript code with input parameter. i hope it will be helpful for you.

https://rahuljain877.outsystemscloud.com/Example/Image?_ts=637390460937850657


Thanks

Rahul Jain


Image.oml
UserImage.jpg
Louie Ng

Rahul Jain wrote:

Hello ,


I am using JavaScript code with input parameter. i hope it will be helpful for you.

https://rahuljain877.outsystemscloud.com/Example/Image?_ts=637390460937850657


Thanks

Rahul Jain


 

Sorry I forgot to mention I was developing a mobile app:


"Sorry, I forgot to mention that I was developing a mobile app. If anyone could provide a working example, that would be great. I have not used Outsystems in around a year. The code which I used used to work in the past" 

2021-03-18 21-03-15
Benjith Sam
 
MVP

Hi Louie,

In addition with the previous comments, I created a sample app based on the mentioned use-case

see this sample mobile app-ShowImageJS

JavaScript Code Snippet:

document.getElementById($parameters.ElementId).innerHTML= "<img src = '" + $parameters.Url + "'>";

Refer the attached .oml file


Hope this helps you!


Kind regards,

Benjith Sam

DemoAppShowImgJS.oml
UserImage.jpg
NIROSHA N

Hi Benjith sam, 

In the above example you have given single image src = "single image file" but I want to display the image from database in List page. Could you please help me sort this issue.

UserImage.jpg
NIROSHA N

Hi All,

Could someone help me to preview the uploaded file 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.