bug-fixed: jmemori.css para evitar inline-css-attack

[ghost]

Oi GeorgiaPereira039.

Aqui adicionei variáveis do css de forma estática. Você pode manipular essas variáveis com js, é uma alternativa ao inline-css. Você pode visualizar essa ideia aqui:

Caso queira ler ou saber mais sobre inline-css-attack, por favor veja isso em: https://stackoverflow.com/questions/41925390/what-are-the-risks-associated-with-using-inline-styles

seria possível com isso css-variables em vez de inline-css podemos fazer algo como:

const styleStatic = document.querySelector(':root');

const getPathCSS =()=> {
  let change = getComputedStyle(styleStatic);
  console.log("o value de cardImageBack1 eh: " + change.getPropertyValue('--cardImageBack1'));
  // --cardImageBack1: url('./back1.jpg'); ou background-image: url('./back1.jpg');
}

const setPathCSS = () => {
  styleStatic.style.setProperty('--cardImageBack1', './back1.jpg');
  styleStatic.style.setProperty('--cardImageBack2', './back.png');
  styleStatic.style.setProperty('--cenario', './cenario.png');
  styleStatic.style.setProperty('--cenario1', './cenario1.jpg');
}

demonstração real

const selectTypeCardNow = (selectObject) => {
  if (selectObject.value === '0') {
    //return `url(` + imageArray[0] + `)`;
    return styleStatic.style.setProperty('--cardImageBack1',  imageArray[0]);
  }
  if (selectObject.value === '1') {
    //return `url(` + imageArray[randomNum] + `)`;
    return styleStatic.style.setProperty('--cardImageBack1',  imageArray[randomNum]);
  }
  if (selectObject.value === '2') {
    //return `url(` + imageArray[1] + `)`;
    return styleStatic.style.setProperty('--cardImageBack1',  imageArray[1]);
  }
  if (selectObject.value === '3') {
    //return `url(` + imageArray[2] + `)`;
    return styleStatic.style.setProperty('--cardImageBack1',  imageArray[2]);
  }
}

ainda não testei esse código em js, mas seria possível pelo que li na documentação do css-3 fazer isso que demonstro aqui