28
Views
16
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

Champion
Rank: #136

Hi Louie,

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

Hope this will help you :)

-AV

Thanks

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"

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!


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

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

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

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