Soy muy nuevo en JavaScript (también tengo una experiencia muy limitada en Python) y estoy tratando de encontrar una manera simple de llamar a una propiedad de objeto desde otro archivo .js que tengo en mi archivo base HTML.
Recorte de flores.js
const rose = {name:'Rose', color:'Red', pic:'Rose.png'};Recorte del archivo base HTML
<html> <head> <script src="flowers.js"></script> </head> <body> <img id='flowerOne' src=rose.pic style='width:100px'> </body> </html>Esto funciona bien si pego la referencia de la imagen directamente ("Rose.png" dentro de img src), pero no si escribo rose.pic, que teóricamente tiene exactamente la misma referencia. Me las arreglé para que las funciones del archivo .js funcionen bien, parece estar llamando a las propiedades del objeto donde estoy luchando.
Probablemente no estoy entendiendo algo, se agradece cualquier ayuda. ¡Gracias!
Puede cambiar la fuente de la imagen en javascript. solo usa esto
flores.js
const rose = {name:'Rose', color:'Red', pic:'Rose.png'}; document.getElementById('flowerOne').src = rose.picHTML:
<html> <head> </head> <body> <img id="flowerOne" style='width:100px'> <script src="flowers.js"></script> </body> </html>Un enfoque es usar JavaScript para actualizar el atributo src del html img. Puede lograrlo seleccionando primero la imagen de la siguiente manera:
let img = document.querySelector('img'); Luego puede asignarle un nuevo valor de atributo src de la siguiente manera:
img.src = rose.pic; La imagen puede tener un atributo src vacío, una imagen de marcador de posición o ningún atributo src . Tu elección.