CODEWITHSUNDEEP
javascripthtmlcssdom
Sandeep Kumar
Sandeep Kumar

Reputation: 49

How to change background Image with DOM and JavaScript

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>

Upvotes: 1

Views: 502

Answers (1)

Lars
Lars

Reputation: 3573

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>

Upvotes: 3

Related Questions