document.getElementById() returns null

Louie Ng

Rank: #47951

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

on 2020-10-23

Amit Verma

Champion

Rank: #136

Hi Louie,

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

Hope this will help you :)

-AV

Thanks

on 2020-10-23

1 reply

on 2020-10-23

Show thread

Hide thread

Louie Ng

Rank: #47951

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'>";

on 2020-10-23

Nghia Hoang

Rank: #6844

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"

on 2020-10-23

1 reply

on 2020-10-23

Show thread

Hide thread

Louie Ng

Rank: #47951

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'>";

on 2020-10-23

Jorge Martins

mvp_badge

MVP

Rank: #19

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!

on 2020-10-23

Ajay Sharma

Rank: #692

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!!

on 2020-10-23

1 reply

on 2020-10-23

Show thread

Hide thread

Louie Ng

Rank: #47951

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

on 2020-10-23

Louie Ng

Rank: #47951

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

on 2020-10-23

Rahul Jain

Rank: #1341

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

on 2020-10-23

1 reply

on 2020-10-23

Show thread

Hide thread

Louie Ng

Rank: #47951

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"

on 2020-10-23

Benjith Sam

mvp_badge

MVP

Rank: #78

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

on 2020-10-23

Training

Documentation

document.getElementById() returns null