0

select 要素の onchange() 関数によってトリガーされる html 要素のクラスの背景画像を変更する js 関数を作成しようとしていますが、うまく動作しないようです。これが私の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>
4

2 に答える 2

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
    }
于 2012-09-18T04:16:18.773 に答える
0

changePic()次の修正を行うとvar square = document.getElementsByClassName("square"); 、css クラスを持つすべての要素を含む配列が返されます。配列squareとして、このクラスを持つすべての要素を変更するには、これも変更するsquare[0].style.backgroundImage = selectBox.value; 必要があります。配列をループする必要があります。それが役に立てば幸い ：）

于 2012-09-18T03:50:04.263 に答える