Skip to Content (Press Enter)
UserImage.jpg
David Lee
1718Views
4Comments
Solved
Change text value with JavaScript but keep saying Cannot set property 'value' of null
Question

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

testJS.oml
0
0
10 May 2018
Copy Link
2020-02-28 09-46-54
Eduardo Jauch
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 :)

See solution in context
3
0
10 May 2018
Copy Link
UserImage.jpg
David Lee

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.

0
1
10 May 2018
Copy Link
2020-02-28 09-46-54
Eduardo Jauch

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

0
0
10 May 2018
Copy Link
UserImage.jpg
David Lee

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.

testJS.oml
0
0
10 May 2018
Copy Link
2020-02-28 09-46-54
Eduardo Jauch
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 :)

3
0
10 May 2018
Copy Link
UserImage.jpg
David Lee

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.

0
1
10 May 2018
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.