Intento setear nuevos valores a una imagen con JS, primero al crear el objeto sí se asignan pero al quererlos cambiar no se aplican, tengo duda en si es posible desde JS o tengo que usar CSS.
El src de la img es obtenido del valor del atributo de un Objeto, el constructor de la clase es: (id, name, position, level, imgFront, imgBack
)
var $img1 = document.getElementById('img1')
var $img2 = document.getElementById('img2')
//a las imagenes se les asignará el valor de un objeto y atributos de dimensión
//en el HTML no tienen mas que el "id"
function setImgAttributes($element, attributes) {
for(let attribute in attributes)
$element.setAttribute(attribute, attributes[attribute])
}
function imgTurno1() {
setImgAttributes($img1, {
src: `${person1.imgBack}`,
width: 150,
height: 150,
})
setImgAttributes($img2, {
src: `${person2.imgFront}`,
width: 120,
height: 120,
})
}
function imgTurno2() {
setImgAttributes($img1, {
src: `${person1.imgFront}`,
width: 120,
height: 120,
})
setImgAttributes($img2, {
src: `${person2.imgBack}`,
width: 150,
height: 150,
})
}
//después de instanciar los objetos se asignan los primeros valores sin problema
imgTurno1()
//durante el proceso al interactuar se intenta setear nuevos valores a la imagen pero no se aplican
imgTurno2()
Si lo intento por separado en la consola del navegador si me aplica los cambios pero me arroja esta alerta:
"Uncaught TypeError: Assignment to constant variable. at
<anonymous>
"
$img2 = setImgAttributes($img2, {
src: `${person2.imgBack}`,
width: 150,
height: 150,
})
En un principio si tenia declaradas las imagenes en js como const, pero despues de intentar esto en la consola las cambie a var. Esta es mi primer pregunta. Gracias desde ya!