如何使用 DOM 和 JavaScript 更改背景图像

Question

---

Hi Everyone, I am a beginner working on a small project in which I am facing an issue related to the background image (how I can change the background image using DOM and Javascript). I Have tried a few ways but am still on the problem side. I have used JavaScript function (random_image_picker(min,max)) for getting random image from Image_gallery. Everything going well until when I clicked on background_theme btn, the background image was supposed to be changed but not working. Every help would be appreciated. Thanks HTML Tag...

..Background Image....

 <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>

Answer 1

BackgroundImage should be a string

The style.backgroundImage property accepts a string. you can apply it using a template string `url(${random_image_picker(0, 4)})` or using a regular concat like "url("+random_image_picker(0, 4)+")"

getElementsByTagName('main') return an array of elements

when you use getElementsByTagName you'll receive an array. If there's only 1 element to apply the background image to. you may select the first element using an 0 index. 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>