Changing the background color of a textbox

mlapl1
Community Member Posts: 350 ♪ Opening Act ♪
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: 44 ☆ Superstar ☆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
- 35.8K All Categories
- 109 ✫ Announcements
- 33.1K Lectora®
- 31.1K Lectora Discussions
- 28.9K Lectora Desktop
- 2K Lectora Online
- 2K Lectora Feature Requests
- 71 Lectora User Groups
- 36 Lectora Accessibility User Group (LAUG)
- 22 ELB Learning Content
- 22 ELB Learning Content Discussions
- 321 CenarioVR®
- 188 CenarioVR Discussions
- 133 CenarioVR Feature Requests
- 41 Rockstar Learning Platform®
- 38 Rockstar Learning Platform Discussions
- 108 CourseMill®
- 108 CourseMill Discussions
- 47 ReviewLink®
- 47 ReviewLink Discussions
- 5 The Training Arcade®
- 5 The Training Arcade Discussions
- 934 All Things eLearning
- 36 eLearning Development
- 546 Learning Management System (LMS) Integration
- 332 Web Accessibility
- 1.2K ♪ The Green Room
- 9 Additional Learning Products