Change text value with JavaScript but keep saying Cannot set property 'value' of null

Change text value with JavaScript but keep saying Cannot set property 'value' of null

  

I create a text field and assign it a name 'welcomeText'.

Now I want to change the text name with JavaScript, but it keep failing,

What is wrong with this code?

document.getElementById('"+welcomeText.Id+"').value = "Welcome";

Hello,

I can't see your code right now.

But if your JavaScript is positioned BEFORE the element (in the page), you will get this error, as the browser renders the page top/bottom and at the time the JavaScript is executed, the element does not exists yet, and the getElement will return null, failing.

Put your JavaScript AFTER the element (in an expression) and it should work.

Cheers

Eduardo Jauch wrote:

Hello,

I can't see your code right now.

But if your JavaScript is positioned BEFORE the element (in the page), you will get this error, as the browser renders the page top/bottom and at the time the JavaScript is executed, the element does not exists yet, and the getElement will return null, failing.

Put your JavaScript AFTER the element (in an expression) and it should work.

Cheers


Thanks for your prompt reply.

I put the JavaScript code in a client action, when I click the button, the client action will be triggered. but no luck the problem still persists.


I followed your instruction that I put an expression containing javascript code after the element, but I got two issue.

1. The JavaScript code is not taking effect. 

2. How can I hide the JavaScript code? As OutSystems displays my JavaScript Code to user. May I have an example? 


Thanks.

Solution

Hi David,

Mobile, huh?
Your code does not work because you are not passing the widget id, instead, you are passing the string welcomeText.Id. In Mobile, the ID of an element is its name.

The correct way to run your JavaScript is as follow:

document.getElementById('welcomeText').value = "Welcome";

Cheers.

EDIT:

I noticed that the element you are trying to change is a TEXT element. It will be set as SPAN in your code and the above will not change its content, as the span "text" is its inner html, not the value.

In this specific case, you need to set the innerHTML content appending a child node or using textContent (available in modern browsers).

document.getElementById('welcomeText').textContent= "Welcome";

If you wants to use JavaScript and mess with the DOM, you should study how it works :)

Solution

Eduardo Jauch wrote:

Hi David,

Mobile, huh?
Your code does not work because you are not passing the widget id, instead, you are passing the string welcomeText.Id. In Mobile, the ID of an element is its name.

The correct way to run your JavaScript is as follow:

document.getElementById('welcomeText').value = "Welcome";

Cheers.

EDIT:

I noticed that the element you are trying to change is a TEXT element. It will be set as SPAN in your code and the above will not change its content, as the span "text" is its inner html, not the value.

In this specific case, you need to set the innerHTML content appending a child node or using textContent (available in modern browsers).

document.getElementById('welcomeText').textContent= "Welcome";

If you wants to use JavaScript and mess with the DOM, you should study how it works :)


Hi Eduardo,

document.getElementById('welcomeText').textContent= "Welcome";


This code is working. Thanks for your help.