Question

我是这个网站的新人，但我已经关注了很多年。

在此测试中，我尝试按下按钮更改图像。图像将随机生成。简而言之，我有2个骰子和1个按钮来改变它们。这里是代码。

HTML：



<tr align="center">
<td width="20%"> 
<input type="button" name="tira" value="Tira" onClick="lancio()"> 
<td><img id="scelta1" alt="alt1" width="30px"></img> 
<td id="scelta2">
<img src="images/dado2.gif" alt="2" width="30px"></img>

<tr align="center"> <td width="20%"> <input type="button" name="tira" value="Tira" onClick="lancio()"> <td><img id="scelta1" alt="alt1" width="30px"></img> <td id="scelta2"> <img src="images/dado2.gif" alt="2" width="30px"></img>

这是我的javascript。

感谢您的支持，我希望能得到很多答案。对不起，如果我对论坛的规则有误。

再见

Answer 1

首先，没有<img></img>之类的东西。这是一个自我结束的标签。

<img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" />
<button onclick=lancio();>yoo</button>

以下是适合您的代码：

<img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" id="image" />



function lancio() {

  var temp=0;

  var image = new Array(6);
image[0]= 'http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg';
image[1]= 'http://images.visitcanberra.com.au/images/canberra_hero_image.jpg';
image[2]= 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg';
image[3]= 'http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg';
image[4]= 'http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg';
image[5]= 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg';

  temp = Math.floor(Math.random() * 6);

  document.getElementById("image").src=image[temp];


}

Answer 2

无需使用数组和ifs。您可以选择一种更简单的方式：

<html>
    <head>
        <script type="text/javascript">
            //global variables for later number access
            var diceValue1 = 0;
            var diceValue2 = 0;

            function calculateDice(index)
            {
                //get the image with the specified index
                var image = document.getElementById("dice" + index);
                //calculate a number from 1 to 6
                var number = Math.floor((Math.random() * 6)) + 1;

                window["diceValue" + index] = number; //assign global vars
                image.src = "images/dado" + number + ".gif"; //assign image
                image.alt = number.toString(); //assign alt
            }
        </script>
    </head>
    <body>
        <img id="dice1" src="blank.gif" alt=""/>
        <img id="dice2" src="blank.gif" alt=""/>
        <input type="button" value="Roll the dice" onclick="calculateDice(1); calculateDice(2);"/>
    </body>
</html>

Answer 3

@Nikola：谢谢标签，我不知道。语法可能很好，但是当我尝试点击按钮时图像不会改变。

<!--DOCTYPE HTML W3C-->
<html>
    <head>
        <title>Prova</title>

        <script type="text/javascript" src="js/lanciodadi.js">
        </script>
        <link href="stile.css" rel="stylesheet" type="text/css">
    </head>
    <body link="#7FFFD4">
        <div style="color: white"><a href="javascript: void{0}">Login</a> <span>/</span><a href="javascript: void{0}">Registrati</a></div>
        <p align="center"><img src="images/logo.gif" alt="logo" width="30%"></p>
        <table>
            <th colspan="3" style="color: red"><b>Statistiche PARTITA 1</b>
            <tr><td width="20%"> Nome <td><input type="text" name="g1" value="Giocatore 1" style="text-align: center" width="40%"><td><input type="text" name="g2" value="Giocatore 2" style="text-align: center" width="40%">
            <tr><td width="20%"> Soldi <td><input type="text" name="soldi1" value="1000" style="text-align: center" width="40%"><td><input type="text" name="soldi2" value="1000" style="text-align: center" width="40%">
            <tr><td width="20%"> Info <td><textarea rows="3"></textarea><td><textarea rows="3"></textarea>
            <!-- QUA I DADI DEVONO CAMBIARE -->
            <tr align="center"><td width="20%"> <input type="button" name="tira" value="Tira" onClick="lancio();"> <td><img src="images/dado1.gif" id="scelta1" alt="alt1" width="30px"> <td id="scelta2"><img src="images/dado2.gif" alt="2" width="30px">
        </table>
    </body>
</html>

lanciodadi.js

function lancio(){  
        var temp=0;
        var image = new Array(6);
        image[0]= 'images/dado1.gif';
        image[1]= 'images/dado2.gif';
        image[2]= 'images/dado3.gif';
        image[3]= 'images/dado4.gif';
        image[4]= 'images/dado5.gif';
        image[5]= 'images/dado6.gif';

        temp = Math.floor((Math.random() * 6));

        document.getElementById("scelta1").src = image[temp];


    }
}

@Sven：谢谢！这是一个不错的方法！它有效，我会用它。谢谢大家： - ）

按下按钮并随机更改图像

3 个答案: