-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

或者如果它必须是纯 javascript 忽略旧的 IE 浏览器：

<!DOCTYPE html>
<HTML>
<HEAD>
 <title>My img</title>
</HEAD>
<BODY>
<form name="imageForm">
<table>
<tr>
<td>
<select name="imageSelector" id="imageSelector">
    <option value="blank.jpg">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" id="canvas" alt="Showing the selected image">
</td>
</tr>
</table>
</form>
<script>

var img={
  imgEl:document.getElementById("canvas"),
  sel:document.getElementById("imageSelector"),
  changeHandler:function(){
    img.imgEl.src=img.sel.options
      [img.sel.selectedIndex].value;
    console.log(img.imgEl);
  },
  init:function(){
    img.sel.onchange=img.changeHandler;
  }
};
img.init();



</script>
</BODY>
</HTML>
于 2013-10-30T02:42:13.770 回答
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 回答