Forum Discussion
JavaScript not working
Hello,
In an effort to create Dark Mode in JavaScript, I have been attempting using codes that change shapes and text into different colors. For whatever reason, codes that I once used are no longer working and I'm unable to accomplish this. I took a Master Developer course not long ago, and even the JS I entered in there that worked at the time, no longer works. I cannot provide a file due to confidentiality but the codes I am using are below.
This one is to target shapes, specifically a star, but I had modified it in the past to change the shape colored based on the Accessibility text. It appears my text does not get recognized.
let Shape = document.querySelector('[data-acc-text="darkMode"]');
let pathElement = Shape.querySelector('path');
pathElement.setAttribute('fill', #C0504D);
This one is for text, and should change the text color based on the Accessibility text, but also does not work anymore. Both of these are triggered by the click of a button.
const texts = document.querySelectorAll(‘[data-acc-text=”darkText”]’);
texts.forEach(text => {
const txt = text.querySelector(‘text’);
if (txt) {
txt.style.fill = ‘#C0504D’;
}
});
The hash color was just for testing. Any advice would be helpful, but essentially it is those codes mixed with
Execute JavaScript
When User Clicks > Button
The first part is easy. You forgot the "" around the color.
let pointStar = document.querySelector('[data-acc-text="star5Points"]'); gsap.to(pointStar, {duration:0.7,scale:1.5}); let pathElement = pointStar.querySelector('path'); console.log("pathElement: "+pathElement); pathElement.setAttribute('fill', "#C0504D");
Then this works fine. Little note to everyone coding in Javascript in Storyline, when testing i noticed giving the variable a numeric as first character...Storyline fails on that.
So pointStar works fine... 5pointStar will fail ;-)
The first part is easy. You forgot the "" around the color.
let pointStar = document.querySelector('[data-acc-text="star5Points"]'); gsap.to(pointStar, {duration:0.7,scale:1.5}); let pathElement = pointStar.querySelector('path'); console.log("pathElement: "+pathElement); pathElement.setAttribute('fill', "#C0504D");
Then this works fine. Little note to everyone coding in Javascript in Storyline, when testing i noticed giving the variable a numeric as first character...Storyline fails on that.
So pointStar works fine... 5pointStar will fail ;-)And as you can see here... text works too. But the biggest issue with text is the way Storyline handles it. Depending on your textfield you might have 1 or multiple spans and divs, thus making it hard to create a generic way to get to the text wanted. I do have a check for that somewhere...trying to find it and then adding it.
https://360.articulate.com/review/content/9d1333c9-0469-48f5-b1d4-a1439e15068b/review
This is the code used in the above.const texts = document.querySelectorAll('[data-acc-text="text2Change"]'); gsap.to(texts, {duration:0.7,scale:1.5}); texts.forEach(text => { const txt = text.querySelector('text'); if (txt) { txt.style.fill = "#C0504D"; } });I had to remove the scale portion but that worked for the Shape, thank you. My next question if you'd be so kind, is when I have multiple objects with the same Accessibility (e.g. darkMode is the Accessibility text for 3 parts of the course that should go dark) - should they not all behave the same? It seems to only target one shape, not sure how it even picks between them since they're all copy/pastes.
I will give the text a try.
Update: The text worked as well. I am currently troubleshooting how to make it affect the entire paragraph, it seems to only change the font color for the first line. I've also come to realize each JavaScript must execute on its own which is probably another reason it wasn't working.
Your help has been greatly appreciated.
PS. there is now a separate group in the community for Javascript
Ok thanks I'll try asking if anyone has a fix for the paragraphing in there.
