javascript函数来改变背景图像

Question

I'm trying to write a js function to change the background image for a class of html elements triggered by the onchange() function of a select element, but I can't seem to get it to work. Here is my js function ...

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

...my css class...

.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;
}

...and the relevant portion of the html file...

    <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

In your changePic() make the following correction var square = document.getElementsByClassName("square"); this will return you an array containing all the elements having css class as square and as its an array you'll need to change this as well square[0].style.backgroundImage = selectBox.value; for changing all elements having this class you'll need to loop through the array hope it helps :)

Answer 2

Make the following changes in script,

  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
    }