Dynamic Button Text change linked to PLC string tag

[bryan]

I’m trying to dynamically change the text of a button based off of a PLC string. I don’t know the text that is required in the button so I can not use the built in function in viewon. I tried this code but the buttons remain blank. Do you see any errors in my code? It this a possible to do with javascript? I used a text box on the screen to verify the tag data is getting into the viewon software. It is. on the second button I tried to use static text (“test”) to see if the tag was not worked but the second button is still blank.

var ID1 = “UID_1621864851370”;
var ID1TEXT = getEwonTagVal(‘Viewon_UserPb1String’);
var ID2 = “UID_1621866577299”;
var ID2TEXT = getEwonTagVal(‘Viewon_UserPb2String’);

document.getElementById(ID1).value= ID1TEXT;
document.getElementById(ID1).innerHTML= ID1TEXT;
document.getElementById(ID2).value= “test”;
document.getElementById(ID2).innerHTML= “test”;

[bryan]

I changed to this code and the button text shows up now, but the button is completely gone?
Thoughts anybody?

var ID1 = “UID_1621864851370Container”;
var ID1TEXT = getEwonTagVal(‘Viewon_UserPb1String’);
var ID2 = “UID_1621866577299Container”;
var ID2TEXT = getEwonTagVal(‘Viewon_UserPb2String’);

document.getElementById(ID1).innerHTML= ID1TEXT;
document.getElementById(ID2).innerHTML= "test";

Pic below of running viewon

Pic below of buttons in viewon software

[deryck_hms]

You might need to double check what parameter of the object you are editing. What do you see in the console if you add the following:

console.log(document.getElementById(ID1.innerText));
or
console.log(document.getElementById(ID1));

Are you testing this with the viewon editor or are you downloading and testing on a device?

[bryan]

I put these two sections of code in the viewon page javascript area at different times.
Nothing came up in the console area. I might be doing something wrong though?

[deryck_hms]

Hi Bryan,

I was referring to to browser JavaScript log. When looking at the page in a browser they usually offer an inspect element option. This will help open up the developer tools in the developer tools you should see a console tab.

In my case I was testing though the viewon test page. this seemed to have issues accessing the inner element. suggesting the element id i am using is wrong or something else could be blocking access. I am thinking the test option in viewon could be part of the issue and would suggest downloading it to a device and testing.

[bryan]

I replaced it with this code and the button disappears but the text changes to “test2”

[bryan]

Ahhh, I see. Here is the inspect view of the button. “Test” is the current text.
Interesting note: The div ID has “container” in it and the button ID does not.

Pics… code in viewon (running on a flexy), inspect window, console window that updates every second.

[deryck_hms]

Bryan,

I was able to spend some time today testing this but was not able to find a way to edit the text either it seems like we are not able to edit the div in any way. I am checking if my colleague has any input.

As a workaround im thinking you could try creating a button directly in javascript. This should give you full control of it.

Deryck

[bryan]

Thanks for the info and research!