javascript函數來改變背景圖像

Question

我想寫一個js函數來改變背景圖像的select元素的onchange（）函數所觸發的一類html元素，但我似乎無法得到它上班。這是我的js函數...

function changePic() { 
    var square = document.getElementByClass("square"); 
    var selectBox = document.getElementById("selectBox"); 
    var selectedItem = selectBox.options[selectBox.selectedIndex].value; 
    square.style.backgroundImage = url(value); 
} 

...我的CSS類...

.square{ 
    border:2px solid black; 
    position:absolute; 
    width:100px; 
    height:100px; 
    cursor:pointer; 
    background-image:url("house.jpg"); 
    color:red; 
    font-size:32pt; 
    font-family:Arial,Helvetica,sans-serif; 
    text-align: center; 
} 

...和html文件的相關部分...

<div id="puzzle_container"> 
    <div class="square" id="puzzletile0"><p>1</p></div> 
    <div class="square" id="puzzletile1"><p>2</p></div> 
    <div class="square" id="puzzletile2"><p>3</p></div> 
    <div class="square" id="puzzletile3"><p>4</p></div> 
    <div class="square" id="puzzletile4"><p>5</p></div> 
    <div class="square" id="puzzletile5"><p>6</p></div> 
    <div class="square" id="puzzletile6"><p>7</p></div> 
    <div class="square" id="puzzletile7"><p>8</p></div> 
    <div class="square" id="puzzletile8"><p>9</p></div> 
    <div class="square" id="puzzletile9"><p>10</p></div> 
    <div class="square" id="puzzletile10"><p>11</p></div> 
    <div class="square" id="puzzletile11"><p>12</p></div> 
    <div class="square" id="puzzletile12"><p>13</p></div> 
    <div class="square" id="puzzletile13"><p>14</p></div> 
    <div class="square" id="puzzletile14"><p>15</p></div> 
    <div class="square" id="puzzletile15"><p></p></div> 
</div> 
<input class = "button1" type="button" value = "Reset" onclick = "reset()" /> 
<input class = "button2" type="button" value = "Shuffle" onclick = "shuffle()" /> 
<br/> 
<div id="picselect"> 
    Select an option to change background image 
    <select id="selectBox" onchange="changePic();"> 
     <option value="Forest.jpg">Forest</option> 
     <option value="House.jpg">House</option> 
     <option value="Night.jpg">Night</option> 
     <option value="City.jpg">City</option> 
    </select> 
</div> 

Answer 1

在您的changePic()中進行以下更正var square = document.getElementsByClassName("square"); 這將返回一個數組，其中包含所有具有css類爲square的元素以及您需要的數組GE這也square[0].style.backgroundImage = selectBox.value; 的改變具有這個類，你會通過陣列需要循環的所有元素希望它能幫助:)

Answer 2

使腳本如下更改，

function changePic() { 
     var square = document.getElementsByClassName("square");//had invalid markup 
     var selectBox = document.getElementById("selectBox"); 
     var selectedItem = selectBox.options[selectBox.selectedIndex].value; 
     square[0].style.backgroundImage = "url("+selectedItem+")";//url should be inside quotes,added first element of the array 
    }