Javascript Image Replace Coin Flipping

Я пробовал много разных способов, но это моя недавняя попытка. Запустив это, я не могу заставить изображение заменить его. Мой результат правильный (головы или хвосты). Но это не замена изображения.Javascript Image Replace Coin Flipping

Я пробовал другие способы, но тогда мои результаты не будут отображаться точно или вообще не будут отображаться. Мне просто нужна помощь. Я довольно новичок в этом и разочаровываюсь.

В приведенном коде я уверен, что что-то не служит цели, или что-то не должно быть там, где оно есть. Я пробовал так много разных вещей, что я потерял контроль несколько попыток назад.

Мои 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' на' No wrap - in ' –

Это происходит потому, что вы создаете новый 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 Image Replace Coin Flipping

ответ

Смежные вопросы