1

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!

1 respuesta 1

0

Comunidad, una disculpa realmente el fragmento de código que tengo esta correcto y se puede aplicar sin problemas. El error lo tuve por estar buscando los resultados al probar el archivo equivocado en lugar del archivo local.(ya saben cosas de novatos) No voy a borrar la pregunta por si en algún momento a alguien le sirve. A menos claro que algún moderador lo solicite.

function changePosition() {
    switch(turno) {
        case 1:
            imgTurno2()
            $img1.classList.toggle('rotar')
            $img2.classList.toggle('rotar') 
            turno++
            break
        case 2:
            imgTurno1()
            $img1.classList.toggle('rotar')
            $img2.classList.toggle('rotar')
            turno--
            break
    }
}

En esa parte de la aplicación se iteran las imagenes llamando a esta función con el evento click a un botón.

4
  • ¿Entonces cuál era el error?
    – user128299
    Commented el 29 ene. 2020 a las 22:48
  • Tenia abierto el HTML desde un servidor en la red en lugar de mi archivo local.
    – JuanGF
    Commented el 29 ene. 2020 a las 23:09
  • Considero entonces si es mejor eliminar tu pregunta ya que no es problema en si que a otros les pueda llegar a servir, sino mas bien un descuido
    – user128299
    Commented el 29 ene. 2020 a las 23:23
  • Si que fue un descuido de novato, si no te molesta voy a esperar otra más, para tampoco pasar por alto la edición de FRANCISCO J. BLANCO y pensando en que tal vez si alguien tiene esa pregunta pueda llegar a ese código
    – JuanGF
    Commented el 29 ene. 2020 a las 23:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.