一旦从 select 下拉列表中选择了相应的选项，我就会尝试更改背景图像。 但这没有发生

Question

 function bgimg() { var ch = document.getElementById("country").value; if (ch == "None") { document.getElementById("bgi").style.background = "black"; } else if (ch == "India") { document.getElementById("bgi").style.backgroundImage = "url('https://wallpaperaccess.com/full/5770.jpg')"; } else if (ch == "USA") { document.getElementById("bgi").style.backgroundImage = "url('Usa.jpghttps://wallpaperaccess.com/full/52904.jpg')"; } else if (ch == "Japan") { document.getElementById("bgi").style.backgroundImage = "url('https://wallpaperaccess.com/full/6512.jpg')"; } else { document.getElementById("bgi").style.backgroundImage = "url('https://wallpapercave.com/wp/wp1833702.jpg')"; } }

 <h1 align="center" style="font-family: umpush;">WELCOME TO INTERACTIVITY</h1> <div id="bgi"></div> <select id="country" onchange="Javascipt: bgimg()"> <option value="None">None</option> <option value="India">India</option> <option value="USA">USA</option> <option value="Israel">Israel</option> <option value="Japan">Japan</option> </select>

/* I am trying to change the background image as soon as the respective option is selected from the select drop down list. but this is not happening. OUTPUT: No background is being shown after choosing the options */

Answer 1

The Javascript code was put into the css textarea. And there were some typos in your code ("Javascipt" and a wrong image url).

Also he backgrounds were set on an empty div without any styling, which results in not seeing them. I have added a height and width on it so that you can at least see the backgrounds. Furthermore I called the function at the start so that it will set the background for the initial value (which is "None" so the background becomes black)

 function bgimg() { var ch = document.getElementById("country").value; if (ch == "None") { document.getElementById("bgi").style.backgroundColor = "black"; } else if (ch == "India") { document.getElementById("bgi").style.backgroundImage = "url('https://wallpaperaccess.com/full/5770.jpg')"; } else if (ch == "USA") { document.getElementById("bgi").style.backgroundImage = "url('https://wallpaperaccess.com/full/52904.jpg')"; } else if (ch == "Japan") { document.getElementById("bgi").style.backgroundImage = "url('https://wallpaperaccess.com/full/6512.jpg')"; } else { document.getElementById("bgi").style.backgroundImage = "url('https://wallpapercave.com/wp/wp1833702.jpg')"; } } bgimg();

 #bgi { height: 200px; width: 300px; background-size: cover; }

 <h1 align="center" style="font-family: umpush;">WELCOME TO INTERACTIVITY</h1> <div id="bgi"></div> <select id="country" onchange="Javascript: bgimg()"> <option value="None">None</option> <option value="India">India</option> <option value="USA">USA</option> <option value="Israel">Israel</option> <option value="Japan">Japan</option> </select>

Answer 2

You can also add an event listener for change on Javascript if you want. Also, do not forget to give the #bgi div a width and height on CSS otherwise it won't show.

    
<h1 align="center" style="font-family: umpush;">WELCOME TO INTERACTIVITY</h1>
    <div id="bgi"></div>
    <select id="country">
        <option value="None">None</option>
        <option value="India">India</option>
        <option value="USA">USA</option>
        <option value="Israel">Israel</option>
        <option value="Japan">Japan</option>    
    </select> 


const select = document.querySelector("#country");

select.addEventListener('change', (event) => {
  const ch = document.getElementById("country").value;
  
  console.log(ch);
  
  if(ch=="None") {document.getElementById("bgi").style.background="black";}
  else if(ch=="India") {document.getElementById("bgi").style.backgroundImage="url('https://wallpaperaccess.com/full/5770.jpg')";}
  else if(ch=="USA") {document.getElementById("bgi").style.backgroundImage="url('Usa.jpghttps://wallpaperaccess.com/full/52904.jpg')";}
  else if(ch=="Japan") {document.getElementById("bgi").style.backgroundImage="url('https://wallpaperaccess.com/full/6512.jpg')";}
  else {document.getElementById("bgi").style.backgroundImage="url('https://wallpapercave.com/wp/wp1833702.jpg')";}

});