Question

我有另一个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>

Answer 1

我强烈建议您使用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');
    }
});

我在这里的评论中遵循了细节，但有一些事情可以做得更好（参见我的代码评论）。

Answer 2

或者如果它必须是纯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>

Javascript显示所选图像

2 个答案: