Hola a todos, soy un principiante que trabaja en un proyecto pequeño en el que me enfrento a un problema relacionado con la imagen de fondo (cómo puedo cambiar la imagen de fondo usando DOM y Javascript). Lo he intentado de varias maneras, pero todavía estoy en el lado del problema. He usado la función de JavaScript (random_image_picker (min, max)) para obtener una imagen aleatoria de Image_gallery. Todo iba bien hasta que hice clic en background_theme btn, se suponía que la imagen de fondo debía cambiarse pero no funcionaba. Toda ayuda sería apreciada. Gracias Etiqueta HTML...
..Imagen de fondo.... <script> const image_gallery = ['https://img.playbuzz.com/image/upload/ar_1.5,c_pad,f_jpg,b_auto/q_auto:good,f_auto,fl_lossy,w_480,c_limit,dpr_1/cdn/2c2dd0ea-8dec-4d49-8a95-f7b18f0b7aed/df312655-1d96-457d-88f4-cfc93c580d1d_560_420.jpg', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwpR0X1hmpt4Kd2WviLXQGPrnUllW2UoLgtoWBoesgtFtSPFCF808bibJ8K2VhHRCki48&usqp=CAU', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxmLTuD78jeZaVR3I_xfIuvmE4tse_JuhGjQ&usqp=CAU', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxWrBodkwbTlxbMexeQCOneifPHaOUoTFwPA&usqp=CAU', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtQMwmsMjdYfF0W0cyMPX673aKVK3m8sSDjg&usqp=CAU'] function random_image_picker(min, max) { let a = Math.floor(Math.random() * (max - min + 1) + min); return image_gallery[a]; } let background_theme = document.querySelector('#background_theme'); let main = document.getElementsByTagName('main'); background_theme.addEventListener('click',function(){ main.style.backgroundImage = URL(random_image_picker(0,4)) }) </script> La propiedad style.backgroundImage acepta una cadena. puede aplicarlo usando una cadena de plantilla `url(${random_image_picker(0, 4)})` o usando un concat regular como "url("+random_image_picker(0, 4)+")"
cuando usa getElementsByTagName , recibirá una matriz. Si solo hay 1 elemento para aplicar la imagen de fondo. puede seleccionar el primer elemento usando un índice 0. document.getElementsByTagName('main')[0];
const image_gallery = ['https://img.playbuzz.com/image/upload/ar_1.5,c_pad,f_jpg,b_auto/q_auto:good,f_auto,fl_lossy,w_480,c_limit,dpr_1/cdn/2c2dd0ea-8dec-4d49-8a95-f7b18f0b7aed/df312655-1d96-457d-88f4-cfc93c580d1d_560_420.jpg', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwpR0X1hmpt4Kd2WviLXQGPrnUllW2UoLgtoWBoesgtFtSPFCF808bibJ8K2VhHRCki48&usqp=CAU', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxmLTuD78jeZaVR3I_xfIuvmE4tse_JuhGjQ&usqp=CAU', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxWrBodkwbTlxbMexeQCOneifPHaOUoTFwPA&usqp=CAU', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtQMwmsMjdYfF0W0cyMPX673aKVK3m8sSDjg&usqp=CAU' ] function random_image_picker(min, max) { let a = Math.floor(Math.random() * (max - min + 1) + min); return image_gallery[a]; } let background_theme = document.querySelector('#background_theme'); let main = document.getElementsByTagName('main')[0]; background_theme.addEventListener('click', function() { main.style.backgroundImage = `url(${random_image_picker(0, 4)})` }) main { width: 400px; height: 400px; border: 2px solid lime; } <main> <button id="background_theme">swap theme</button> </main>