單擊后如何使我的按鈕顯示兩個不同的圖像？

Question

我有兩個骰子，在主頁上它們是默認的骰子面，但是一旦單擊“投擲”按鈕，則兩個圖像將隨機更改為兩個隨機骰子數。 這些數字已添加並顯示在我的“總計” div中。 我該如何在javascript中做到這一點？ 我還有一個“清除”按鈕，選中該按鈕后，它將返回兩個默認骰子面，並將結果從總div中清除為0。

這是我的html：

<head>

    <link rel="stylesheet" type="text/css" href="dice.css">

<title> Dice </title>

<script type="text/javascript">


var num1 = Math.floor(Math.random() * 6) + 1;
    var num2 = Math.floor(Math.random() * 6) + 1;

    var imgtag1 = "<img src=\"die" + num1 + ".gif\">";
    var imgtag2 = "<img src=\"die" + num2 + ".gif\">";

    var score = num1 + num2;

</script>

</head>
<body>

<h1> Dice </h1>

<div id="green">


<img src="die-default.gif" class="die1" /><img src="die-default.gif" class="die2" />

</div>

<button type="button" class="throw" onclick="myScript">Throw</button>
<button type="button" class="clear">Clear</button>

<h2>Total</h2>

<div id="total">
<script>

document.write(score1);

</script>
</div>

</body>

這是我的CSS：

body{
background-color: black;
color: white;
text-align: center;
font-size: 30px;
font-family: arial;
}

#green {
 background-color: #0B610B;
height: 200px;
width: 550px;
border-radius: 25px;
position: relative;
left: 480px;
}

.die1{
float: left;
margin-top: 12px;
margin-left: 70px;
}

.die2{
float: right;
margin-top: 12px;
margin-right: 70px;
}

.throw {
margin-top: 100px;
font-size: 40px;
border-radius: 10px;
height: 70px;
width: 200px;
text-align: center;
background-color: white;
}

.clear {
margin-top: 100px;
font-size: 40px;
border-radius: 10px;
height: 70px;
width: 200px;
text-align: center;
background-color: white;
}

h2{
font-size: 30px;
text-align: center;
margin-top: 40px;
font-family: arial;
}

#total {
background-color: white;
height: 70px;
width: 300px;
border-radius: 10px;
position: relative;
left: 600px;
}

我有骰子的6張面孔的圖像加上帶有問號的骰子面孔的默認骰子圖像。 我所有的圖像都命名為die1.gif-die6.gif，默認名稱為die-default.gif

Answer 1

首先，您需要為每個img標簽分配一個ID：

    <img src="die-default.gif" id="die1" class="die1" />
    <img src="die-default.gif" id="die2" class="die2" />

對於“投擲”按鈕：投擲

最后，您的myScript函數：

        function myScript() {

            var num1 = Math.floor(Math.random() * 6) + 1;
            var num2 = Math.floor(Math.random() * 6) + 1;

            d1 = document.getElementById("die1");
            d2 = document.getElementById("die2");
            d1.src = "die" + num1 + ".gif";
            d2.src = "die" + num2 + ".gif";
            var score = num1 + num2;
        }

無需JQuery即可更改img標記的src。

Answer 2

看來您可能忘記了聲明函數，然后在html中正確調用它。

您可以這樣聲明函數：

function myfunction(){

var num1 = Math.floor(Math.random() * 6) + 1;
var num2 = Math.floor(Math.random() * 6) + 1;

var imgtag1 = "<img src=\"die" + num1 + ".gif\">";
var imgtag2 = "<img src=\"die" + num2 + ".gif\">";

var score = num1 + num2;

};

像這樣調用函數：

<button type="button" class="throw" onclick="myfunction();">Throw</button>

編輯：

<button onclick="myFunction()">click it</button>

<script>
var myFunction = function (){

    var num1 = Math.floor(Math.random() * 6) + 1;
    var num2 = Math.floor(Math.random() * 6) + 1;

    var imgtag1 = "<img src=\"die" + num1 + ".gif\">";
    var imgtag2 = "<img src=\"die" + num2 + ".gif\">";

    var score = num1 + num2;

    console.log(score);
    };
</script>

將第二個代碼段放入html頁面，首先打開chrome控制台，然后您可以查看是否使用

console.log();

功能。 如果您每次單擊該按鈕都看到生成的數字，則表示您的樂譜有效，您可以通過這種方式將您在腳本中聲明的任何數字輸出到控制台。

一旦您在那里並且生成了隨機數，只需將num1和num2放入圖像的src中，對於該以太我的答案或發布的其他答案將起作用。

單擊后如何使我的按鈕顯示兩個不同的圖像？

問題描述

2 個解決方案

解決方案1
1 2014-11-03 18:06:12

解決方案2
1 已采納 2014-11-03 18:16:20

單擊后如何使我的按鈕顯示兩個不同的圖像？

問題描述

2 個解決方案

解決方案1 1 2014-11-03 18:06:12

解決方案2 1 已采納 2014-11-03 18:16:20

解決方案1
1 2014-11-03 18:06:12

解決方案2
1 已采納 2014-11-03 18:16:20