Changing a text box class with JavaScript

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Posts: 9811
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK

Changing a text box class with JavaScript

Post by Hopki » Thu Feb 06, 2020 9:58 pm

Following a request to change the class of a text box in a post in the Pano2VR General forum I give this a bit of thought and spoke with Christoph Gnome.
This is a skin project so posted here in the Skins forum.

We have come up with this project that uses the Go To URL action with a JavaScrip call that finds the text box, then removes the current class and then replaces it with a different class from the CSS stylesheet.

As an example in the attached project, in the skin, there is a text box with the ID Title.

The button with the ID Button Zhi Mang Xing has an action to change the class in the text box which is:

1.png (28.22 KiB) Viewed 186 times

The URL has the Javascript:

Code: Select all

javascript: skin.findElements('Title')[0].classList.remove('font1', 'font2', 'font3', 'font4', 'font5');
If you look at the code you will see that the first part finds the element Title which is one of the text boxes that need its class changed, then it removes any class it may have. The CSS Stylesheet I am using has five different classes, font1 to font 5. So I am removing all as I do not know which class the text box may have.

The next part of the JavaScript then finds the text box Title and adds the class 'font1'.

You will see in the buttons that change the class you need a call for each text box.
The good news is you can type out the JavaScript call for one text box then just copy and paste it changing the text box that needs the class to be changed.

For the Button, Button Zhi Mang Xing the URL is:

3.png (108.95 KiB) Viewed 186 times

Note you only need the text javascript: at the start of the code.

This will then remove any classes from the text boxes with the ID's: Title, Description, Author, Date, Copyright, Source.
Then it will set the class font1 to all the text boxes.

Just to add a bit more wow to this I add two more actions to the buttons that change the class, on mouse enter and leave they change the class for themselves and also using a colour logic block to invert the colour of the buttons.
I hope this gives you a bit more inspiration.
(14.23 KiB) Downloaded 17 times

User avatar
Posts: 875
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia

Re: Changing a text box class with JavaScript

Post by Tony » Fri Feb 07, 2020 12:11 am

Hi Hopki,

Very cool and thanks to Christop gnome.

Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: - | roundme: | instagram:

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest