Forum Discussion

MattBotelho's avatar
MattBotelho
Community Member
18 days ago

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

Articulate 360
e-learning development
storyline 360
  • MathNotermans-9's avatar
    MathNotermans-9
    18 days ago

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

  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    18 days ago

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

  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    18 days ago

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

     

    • MattBotelho's avatar
      MattBotelho
      Community Member
      18 days ago

      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.

    • MattBotelho's avatar
      MattBotelho
      Community Member
      18 days ago

      Ok thanks I'll try asking if anyone has a fix for the paragraphing in there.

Related Content