Changing the background color of a textbox

mlapl1
Community Member Posts: 350 ☆ Roadie ☆
Hello again (after a very long time).
I have the following JS for changing the background of a textbox. It works fine when I place it in an OnMclk action.
function checkFilled() {
var inputVal = document.getElementById("text31706");
inputVal.style.backgroundColor = "yellow";
}
checkFilled();
However, I want to implement this in many buttons and using many different text boxes. I therefore need to be able to read the html name of each textbox into the JS. How can I achieve that? One thought was to have an OnMclk action that reads the html name into a Lectora variable which is then read into the JS script in the usual way. But... how do I do that??? Or is there a better solution?
Thanks so much for your help.
Andrew
I have the following JS for changing the background of a textbox. It works fine when I place it in an OnMclk action.
function checkFilled() {
var inputVal = document.getElementById("text31706");
inputVal.style.backgroundColor = "yellow";
}
checkFilled();
However, I want to implement this in many buttons and using many different text boxes. I therefore need to be able to read the html name of each textbox into the JS. How can I achieve that? One thought was to have an OnMclk action that reads the html name into a Lectora variable which is then read into the JS script in the usual way. But... how do I do that??? Or is there a better solution?
Thanks so much for your help.
Andrew
Comments
-
susanmacnab Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 16 ♪ Opening Act ♪Hi Andrew,
Do you want to change a bunch of text fields all at once? If so, you could assign them all the same class name by clicking on the Appearance window in the Text Properties ribbon.
In my example above, I used the class name highlight.
Then on your button click action, run the following jquery/javascript command (change the class name to whatever you set above):
triv$('.highlight').css("background-color", "yellow");
You can assign multiple class names to each text field so you can highlight different combinations of fields from different buttons if desired.
Hope this helps!
Categories
- 4.7K All Categories
- 3 New Feature Releases
- The Training Arcade®
- Arcadesâ„¢
- 57 ✫ Announcements
- 6 ✪ Contests
- 34.1K eLearning Brothers® Products
- 33.6K Lectora®
- 31.5K Lectora Discussions
- 1.9K Lectora Feature Requests
- 64 Lectora User Groups
- 16 Asset Library
- 10 AssetLibrary Discussions
- 6 AssetLibrary Feature Requests
- 291 CenarioVR®
- 169 CenarioVR Discussions
- 122 CenarioVR Feature Requests
- 29 Rockstar Learning Platform®
- 20 Rockstar Learning Platform Discussions
- 9 Rockstar Learning Platform Feature Requests
- 4 Off-the-Shelf Course Library
- 3 Off-the-Shelf Course Library Discussions
- 1 Off-the-Shelf Course Library Feature Requests
- 114 CourseMill®
- 107 CourseMill Discussions
- 43 ReviewLink®
- 31 ReviewLink Discussions
- 12 ReviewLink Suggestions
- 2 The Training Arcade®
- 1 The Training Arcade Discussions
- 1 The Training Arcade Feature Requests
- 10 Additional Learning Products
- 2 Adobe®
- 4 Articulate®
- 2 Camtasia®
- Docebo®
- 1 iSpring®
- 1 Microsoft® PowerPoint®
- 911 All Things eLearning
- 5 Course Development Showcase
- 1 eLearning Brothers® Downloads
- 1 Compliance Training
- 11 eLearning Development
- eLearning Game Design
- 7 Instructional Design
- 545 Learning Management System (LMS) Integration
- 2 Mobile Learning
- 5 Visual Design
- 328 Web Accessibility
- 1.2K ♪ The Green Room
- 7 ♡ Community Feedback
- 7 Community Tips