某些 Javascript 函数在 WAMP 上不起作用

Question

I wrote a javascript function that changes the background image of an element depending on which button is clicked. All images are stored in a separate folder. It works properly off of localhost but when i run the page on localhost, that particular function no longer works, all the other javascript functions work properly. I haven't implemented php yet on that page so I'm not sure what the problem is.

 function changeBG(btnID){ var card = document.getElementById('edit'); if(btnID == 'btn1') card.style.backgroundImage = "url('/images/1.JPG')"; else if(btnID == 'btn2') card.style.backgroundImage = "url('/images/2.jpg')"; else if(btnID == 'btn3') card.style.backgroundImage = "url('/images/3.jpg')"; else if(btnID == 'btn4') card.style.backgroundImage = "url('/images/4.jpg')"; }

 .cardImage{ height: 15rem; width: 30rem; border-radius: 30px; background: #a4bac0; background-image: url(''); background-position: center; }

 <div class="cardImage" id="edit"> <h5>Card</h5> </div> <div class="options"> <h6>Options</h6> <button class="op" id="btn1" onclick="changeBG(this.id);">1</button> <button class="op" id="btn2" onclick="changeBG(this.id);">2</button> <button class="op" id="btn3" onclick="changeBG(this.id);">3</button> <button class="op" id="btn4" onclick="changeBG(this.id);">4</button> <button class="op" id="save">Save</button> </div>

Answer 1

I ended up figuring it out, for some reason live changes to css don't show up on localhost unless you hard refresh a page! so I edited the javascript to refresh the div when an option is selected. Like below if anyones curious. Thanks for the suggestions :)

$("card").load("customize.php");