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 ;-)