JavaScript圖片更換拋硬幣

我已經嘗試了許多不同的方式，但是這一次是我最近的嘗試。通過運行這個我不能讓圖像取代一個。我的結果是正確的（正面或反面）。但它並沒有取代形象。JavaScript圖片更換拋硬幣

我曾嘗試其他方法，但隨後我的結果不會準確地顯示，或將不會顯示在所有。我只需要幫助。我對此很新，感到沮喪。

在提供的代碼，我敢肯定自己是不是服務於目的或東西是不應該在哪裏。我嘗試了很多不同的東西，以至於我在幾次嘗試之前失去了控制權。

我的javascript：

var tails = 0; 
    var heads = 0; 
    var clicks = 0; 
    function clicked() 
    { 
     clicks += 1; 
     document.getElementById("seq").innerHTML = clicks; 
    } 

    function toss() { 
     var rows = 0; 
     document.getElementById("results").innerHTML = ""; 
     while (rows < 1) { 
      var arr = new Array(); 
      for (var i = 0; i < 1; i++) 
      {  
       var val = Math.floor(Math.random() * 2); 
       if (val === 1) { 
        arr[i] = imageHeads("images/heads.jpg"); 
        heads = heads + 1; 
        checkHeads(); 
       } else { 
        arr[i] = imageTails("images/tails.jpg"); 
        tails = tails + 1; 
        checkTails(); 
       }  
      } 
      document.getElementById("results").innerHTML += "<br />" + arr; 
      delete arr; 
      rows++; 
     } 
     clicked(); 
    } 

    function checkHeads() 
    { 
     document.getElementById("headsDisplay").innerHTML = heads; 
    } 

    function checkTails() 
    { 
     document.getElementById("tailsDisplay").innerHTML = tails; 
    } 


    function imageHeads(src) { 
     var img = document.createElement("img"); 
     img.src = src; 

     // This next line will just add it to the <body> tag 
     document.body.appendChild(img); 

    } 

    function imageTails(src) { 
     var img = document.createElement("img"); 
     img.src = src; 

     // This next line will just add it to the <body> tag 
     document.body.appendChild(img); 

    }

我的HTML代碼片段：

<table> 
     <tr> 
      <td><input type="button" id="toss" value=" Flip Coin " onclick="toss()"></td> 
     </tr> 
     <tr> 
      <td>Number of Flips Performed: <span id="seq">0</span></td> 
     </tr> 
     <tr> 
      <td>Heads Count: <span id="headsDisplay">0</span></td> 
     </tr> 
     <tr>  
      <td>Tails Count: <span id="tailsDisplay">0</span></td> 
     </tr> 
     <tr> 
      <td><span id="results"><img id="myImg" src="images/heads.jpg"></span></td> 
     </tr> 
    </table>

我試圖讓一個小提琴，但我不能讓它正常運行https://jsfiddle.net/qvqzje82/1/

來源

2015-07-12 GiBiT 09

https://jsfiddle.net/qvqzje82/3/？ – guest271314

[https://jsfiddle.net/qvqzje82/2/](https://jsfiddle.net/qvqzje82/2/）這是爲我工作。爲什麼？因爲我改變了JavaScript從jsfiddle的左上方面板加載的方式。將它從'onLoad'改爲'不換 - 在' –

這是因爲您正在創建一個新的img，並將其附加到bosy，而不是將其添加到「結果」範圍。修改您的以下功能

function imageHeads(src) { 
var img = document.createElement("img"); 
img.src = src; 

// This next line will just add it to the <results> tag 
document.getElementById('results').appendChild(img); 

} 

function imageTails(src) { 
var img = document.createElement("img"); 
img.src = src; 


// This next line will just add it to the <results> tag 
document.getElementById('results').appendChild(img); 

}

來源

2015-07-12 18:42:36

var tails = 0; 
 
var heads = 0; 
 
var clicks = 0; 
 
function clicked() 
 
{ 
 
\t clicks += 1; 
 
    document.getElementById("seq").innerHTML = clicks; 
 
} 
 

 
function toss() { 
 
    var rows = 0; 
 
    document.getElementById("results").innerHTML = ""; 
 
    while (rows < 1) { 
 
     var arr = new Array(); 
 
     for (var i = 0; i < 1; i++) 
 
\t \t {  
 
      var val = Math.floor(Math.random() * 2); 
 
      if (val === 1) { 
 
       arr[i] = imageHeads("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/2009NativeAmericanRev.jpg/150px-2009NativeAmericanRev.jpg"); 
 
\t \t \t \t heads = heads + 1; 
 
\t \t \t \t checkHeads(); 
 
      } else { 
 
       arr[i] = imageTails("https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/2010NativeAmerican_Rev.jpg/150px-2010NativeAmerican_Rev.jpg"); 
 
\t \t \t \t tails = tails + 1; 
 
\t \t \t \t checkTails(); 
 
      }  
 
     } 
 
     document.getElementById("results").appendChild(arr[0]); 
 
     delete arr; 
 
     rows++; 
 
    } 
 
\t clicked(); 
 
} 
 

 
function checkHeads() 
 
{ 
 
\t document.getElementById("headsDisplay").innerHTML = heads; 
 
} 
 

 
function checkTails() 
 
{ 
 
\t document.getElementById("tailsDisplay").innerHTML = tails; 
 
} 
 

 

 
function imageHeads(src) { 
 
    var img = document.createElement("img"); 
 
    img.src = src; 
 
    return img; \t 
 

 
} 
 

 
function imageTails(src) { 
 
    var img = document.createElement("img"); 
 
    img.src = src; 
 
    return img; \t 
 
}

<html> 
 
<body> 
 
<div id="display"> 
 
<table> 
 
\t <tr> 
 
\t \t <td><input type="button" id="toss" value=" Flip Coin " onclick="toss()"></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>Number of Flips Performed: <span id="seq">0</span></td> 
 
\t </tr> \t 
 
\t <tr> 
 
\t \t <td>Heads Count: <span id="headsDisplay">0</span></td> 
 
\t </tr> 
 
\t <tr> \t 
 
\t \t <td>Tails Count: <span id="tailsDisplay">0</span></td> 
 
\t </tr> \t 
 
\t <tr> 
 
\t \t <td><span id="results"><img id="myImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/2009NativeAmericanRev.jpg/150px-2009NativeAmericanRev.jpg"></span></td> 
 
\t </tr> 
 
</table> 
 
</div> 
 
</body> 
 
</html>

來源

2015-07-12 18:47:06

您也可以停止清除每個<span id="results">折騰了，而不是取代已經存在的圖像的src：

function imageHeads(src) { 
    var img = document.getElementById("myImg"); 
    img.src = src; 
} 

function imageTails(src) { 
    var img = document.getElementById("myImg"); 
    img.src = src; 
}

https://jsfiddle.net/qvqzje82/6/

來源

2015-07-12 18:47:59 Sphinxxx

JavaScript圖片更換拋硬幣

回答

相關問題