Button with SVG - Change inner HTML....loses icon

[gregincolumbus]

I have a button that uses SVG icon above text. I want to be able to change the text using responsive rules if I am on a phone vs tablet due to space concerns.

This works for changing the text

var lObj = {dialog.object}.getPointer('BUTTON_1);
lObj.innerHTML = "New Value";

But I lose the icon.

How can I change just the text but keep the icon? I have looked at the properties of the button using the inspector in Chrome and see a span that holds the text value but I cant seem to isolate it to change just that.

Thanks

[Davidk]

Re: Button with SVG - Change inner HTML....loses icon

Seems that there should be a better way... but this works. When using an image, the full innerHTML includes the image and button text.

var bObj = {dialog.object}.getPointer('BUTTON_1');
var innerHTML = bObj.innerHTML;
var innerText = bObj.innerText; //just the button text

var innerHTML = innerHTML.replace(innerText, " New Value"); //replace the button text

bObj.innerHTML = innerHTML; //re-assign the innerHTML

[gregincolumbus]

Re: Button with SVG - Change inner HTML....loses icon

David,

Thank you so much for your response. I am trying to make this work and it doesn't seem to do anything?

Attached is a UX with your code. The second button on the ux has the code to set the inner html....but clicking it doesn't work for me

sample.zip

Thanks again for any insight

Greg

[Davidk]

Re: Button with SVG - Change inner HTML....loses icon

Sorry... I missed "above text" in your original post. This code takes care of the <br> in front of the original button text...

var bObj = {dialog.object}.getPointer('BUTTON_1');
var innerHTML = bObj.innerHTML;
var innerText = bObj.innerText; //just the button text
var innerText = innerText.slice(1); //use this if the svg image is above the button text.
//var innerText = innerText.slice(0,-1); //use this if the svg image is below the button text.

var innerHTML = innerHTML.replace(innerText, "New Value"); //replace the button text
bObj.innerHTML = innerHTML; //re-assign the innerHTML

[gregincolumbus]

Re: Button with SVG - Change inner HTML....loses icon

Thanks again David.

For some reason, this is still not working for me. I am using a pre-release...not sure if that makes a difference.

[Davidk]

Re: Button with SVG - Change inner HTML....loses icon

So am I, but this is pretty much straight Javascript so that shouldn't make a different. Attached is your "sample" UX.

[gregincolumbus]

Re: Button with SVG - Change inner HTML....loses icon

David...again, I appreciate your help on this. My javascript skills are still beyond sketchy.

After trying different viewing options, I found this does work for me if I am using Chrome and open it in Chrome.....it doesn't work for me at all using IE or Edge.

Unlike the regular set innerHTML that doesn't take the icon into account.....this code doesn't work for me in working preview, nor does it work for me using Live Preview (even with Chrome as the default).....I have to open in Chrome.

I am guessing these issues are related to my development machine. Its a new one but maybe there are some issues with it. I will investigate....this should work on all those browsers

Once again David, I appreciate your time and effort on this.

Greg

[gregincolumbus]

Re: Button with SVG - Change inner HTML....loses icon

Just another follow up....your code works perfectly on my iPad and iPhone and Android tablet.....must be something weird going on with my development machine.

Thanks again David

[Davidk]

Re: Button with SVG - Change inner HTML....loses icon

Let's do something a bit better. Instead of using "innerText" which carries with it the formatting... we'll use "textContent" which is the pure text and it much better. innerText include a crlf which is represented differently by each brower. In Chrome, on my machine, it's 1 character... in Edge it's \n\n... so... there you go. Try this...

var bObj = {dialog.object}.getPointer('BUTTON_1');
var innerHTML = bObj.innerHTML;
var textContent = bObj.textContent;

var innerHTML = innerHTML.replace(textContent, "New Value"); //replace the button text
bObj.innerHTML = innerHTML; //re-assign the innerHTML

This works for me in Chrome, Edge, and FireFox. I haven't used Edge very much... nice debugger.

[gregincolumbus]

Re: Button with SVG - Change inner HTML....loses icon

David that works PERFECTLY on all browsers and in working preview....THANK YOU!!!

Wow I have much to learn.....but truly appreciate all your efforts helping me (and so many others on the board).

[Davidk]

Re: Button with SVG - Change inner HTML....loses icon

It's just a matter of going through the properties of the object to find the best one to work with. Thankfully, Alpha exposes a lot of information. Very glad it worked.