-2

私は実際にヘルプを使用できる別の Javascript の問題を抱えています。繰り返しになりますが、このようなばかげた質問で申し訳ありませんが、私はこれが本当に初めてで、自分が何をしているのかわかりません。これまでのところ、必要なもののコードがあり、欠落している情報をスクリプトに書き留めています。

ありがとうございました！

<HTML>
<HEAD>
<script>
//build a function named displayImage
//it should be catching the value of the item selected in a variable named whichImage
//use an if / else structure to test for whichImage not being equal to the string "noImage"
//if the statement is true then display the selected image in the canvas image
//if the statement is false then display the "blank.jpg" external file in the canvas image

//In the select tag below add an onChange event handler that calls the displayImage function
//the value property of the selection list should be passed to the displayImage function as it is called
//hint (this.value)

function displayImage(whichImage)
{
    if(whichImage != "noImage")
    {
        document.canvas.src = whichImage;
    }
    else
    {
        document.canvas.src = "blank.jpg";
    }
}


</script>
</HEAD>

<BODY>
<form name="imageForm">
<table border=3>
<tr>
<td>
<select name="imageSelector" onchange = "displayImage(this.value)">
    <option value="noImage">Select an Animal
    <option value="dog.jpg">Dog
    <option value="cat.jpg">Cat
    <option value="parrot.jpg">Parrot
    <option value="fish.jpg">Fish
    <option value="alligator.jpg">Alligator
    <option value="mouse.jpg">Mouse
    <option value="fox.jpg">Fox
</select>
</td>
</tr>
<tr>
<td>
<img src="blank.jpg" name="canvas">
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
4

2 に答える 2

0

これにはjQueryを使用することを強くお勧めします。試してみてください：

$('select[name="imageSelector"]').change(function() {
    var whichImage = $(this).val();

    // It would make more sense to have the noImage option's value "blank.jpg" instead of using an if statement here
    if(whichImage != 'noImage'){
        // Also give the img tag an id instead of just selecting it with a name attribute
        $('img[name="canvas"]').attr('src', whichImage);
    }else{
        $('img[name="canvas"]').attr('src', 'blank.jpg');
    }
});

ここのコメントの詳細に従いましたが、改善できることがいくつかあります (コードのコメントを参照してください)。

于 2013-10-30T01:11:27.227 に答える