Question

我有关于html和javascript的功课，我已经做了一些事情，但我没有设法工作

这就是学校给我的：

“你将创建一个文件即hw3_2.html，其中包含一个javascript函数用户输入并显示两个图像。此页面中有一个下拉列表和一个用户可以选择三个图像中的一个。用户选择的图像首先显示图片。当用户进行此选择时，在1-3和之间生成随机数相应的图像显示为第二图像。然后还会显示一条消息这两个图像是相同还是不同。显示网页的用户界面下面。你可以使用你家乡的照片而不是埃斯基谢希尔的照片。“

以下是我到目前为止所做的事情：你能救我吗？

 <!DOCTYPE html>
<html>
<head>
<script>

function getRandomInt(min, max) {
    var obj=document.getElementById("photo");

    var x = Math.floor(Math.random() * (max - min + 1)) + min;
    document.getElementById("para").innerHTML=x;

    var y=obj.options[obj.selectedIndex].id;

function image(){

    function show_image(src, width, height, alt) {
    var img    = document.createElement("img");
    img.src    = src;
    img.width  = width;
    img.height = height;
    img.alt    = alt;



    }
    var p1=new show_image('eskisehir1.png', 276, 110,'Eskisehir1');
    var p2=new show_image('eskisehir2.png', 276, 110,'Eskisehir2');
    var p3=new show_image('eskisehir3.png', 276, 110,'Eskisehir3');

    if(y==x ){

       if(y==1)
          {document.body.appendChild(p1);}
       else if(y==2)
          {document.body.appendChild(p2);}
       else
         {document.body.appendChild(p3);}
        }

    else // i couldnt fill this , 

    }
   }     

</script>
</head>
<body>
< !-- do i need to add more attibute? -->
Photos:<select id="photo" onchange="getRandomInt(1,3);">
           <option value="1" >eskisehir1</option>
           <option value="2" >eskisehir2</option>
           <option value="3" >eskisehir3</option>
       </select >

 <p id="para"></p>



</body>
</html>

也许我犯了很多错误，但我想学习这个

Answer 1

嗯，好吧，让我们检查你的代码。

首先，您获取选择值的方式有效，但只需执行obj.value就可以更简单地获取选择框的当前值（并且因为您正在执行此函数onchange ，这将为您提供用户刚刚选择的价值。

其次，你的show_image函数没问题，它确实创建了一个图像并为其设置了属性，但它没有返回任何内容，也没有设置任何可用于{的属性。 {1}}运算符（详情请见new here和here）。只返回创建的图像更简单，而不是使用new关键字创建对象，所以你应该这样做。

最后，您要一次创建所有可能的图像，但根据我的理解，您只需要两个。一个具有所选值，另一个具有随机数。我认为不是创建它们而是在那里删除一些new，你应该创建所需的两个，并比较它们是否相同，并附加它们。此外，你使用if逻辑的方式，只会有一个图像被追加，而不是两个;我看不到您将所选图像附加到文档的位置。

我为你制作了这个jsFiddle：

http://jsfiddle.net/xvvt3j8d/7/

注意结构的变化。此代码必须在选择框标记之后，或者如果您真的想要它在文档的头部，if事件内。如果您想要从外部window.onload文件中包含此代码，则同样适用。

我做了我提到你应该做的所有改变。这是带注释的代码：

.js

使用下拉列表中的函数添加图像

1 个答案: