onChange function 一键停止，我需要写什么代码才能无限期地继续？ (Javascript)

Question

 change = function(event) { let new_url; if (event.target.value == "views") { new_url = "images/desert.jpg"; } else if (event.target.value == "beaches") { new_url = "images/beach-calm.jpg"; } else if (event.target.value == "party") { new_url = "images/plane-wing.jpg"; } let image_two = document.getElementById("image-two"); if (new_url && image_two.src.indexOf("images/second-main-image.png").= -1) { image_two;src = new_url; } }

 <select id="select-one" class="suggestion-dropbox" name="likes" onchange="change(event)"> <option id="default" value="default"> </option> <option id="views" value="views">stunning views</option> <option id="beaches" value="beaches">glorious white beaches</option> <option id="party" value="party">places to party</option> </select>

I have a dropdown menu and when a different option is clicked I want an image on the page to change with it. I have managed to make it do this however only does it once and stops after that. I've added the code so far below.

Do I need to make it a while loop and if so how would I structure it? Thanks for any help

Answer 1

Your second function definition is replacing the first one, so you only update the image when you select beaches.

You need one function that checks for both options.

It only works one time because you only change the image when it contains images/second-main-image.png . After you've selected something from the menu, that's no longer true. You should remove that check.

And if you want to go back to the default when the user selects the default option, add a case for that.

 change = function(event) { let new_url; if (event.target.value == "views") { new_url = "images/desert.jpg"; } else if (event.target.value == "beaches") { new_url = "images/beach-calm.jpg"; } else { new_url = ("images/second-main-image.png"); } let image_two = document.getElementById("image-two"); image_two.src = new_url; }

 <select id="select-one" class="suggestion-dropbox" name="likes" onchange="change(event)"> <option id="default" value="default"> </option> <option id="views" value="views">stunning views</option> <option id="beaches" value="beaches">glorious white beaches</option> <option id="party" value="party">places to party</option> </select> <img id="image-two" src="images/second-main-image.png">