我编写了一个 javascript 函数,它根据单击哪个按钮更改元素的背景图像。所有图像都存储在一个单独的文件夹中。它在 localhost 之外正常工作,但是当我在 localhost 上运行该页面时,该特定功能不再有效,所有其他 javascript 功能都正常工作。我还没有在那个页面上实现 php,所以我不确定问题出在哪里。
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>
LEATH
相关分类