2016-05-03 2 views
2

Я пишу программу для скалы, бумаги, ножниц, где пользователь может нажать одно из трех изображений, которые появляются на веб-странице (камень, бумага или ножницы).Как вернуть значение из и события onclick в симуляции ножниц для каменной бумаги?

Когда пользователь нажимает на одно из этих изображений, он меняет изображение слева от этих 3 на руку в форме одного из трех вариантов. Кроме того, изображение справа от изображения пользователя также изменяется случайным образом (контролируется компьютером).

Когда эти два изображения совпадают, есть галстук. Когда изображение слева бьет изображение справа, есть выигрыш (рок-бейс-бумага). Когда изображение слева изображает изображение справа, происходит потеря.

Эти три результатов написаны ниже набор изображений в виде

«Wins: # Галстуки: # Потери: #»

В Хештеги представляют номера, начинающиеся на 0 изменения по ходу игры и сбрасывается до 0, когда страница обновляется.

У меня возникли проблемы с тем, как вернуть значение HTML-файла из JavaScript, когда пользователь взаимодействует.

Я думал, что заявление if сделает трюк, однако значение на моей веб-странице не меняется, оно остается пустым.

Вот мой HTML

<tr> 
    <td colspan="3" align="center"> 
     <!--results will change when user interacts--> 
     <b> 
      <span id="Wins">Wins:&nbsp;</span> 
      <span id="Losses">Losses:&nbsp;</span> 
      <span id="Ties">Ties:&nbsp;</span> 
     </b> 
    </td> 
</tr> 

и вот первая часть 3 из моих JavaScript

var counter = {win: 0, tie: 0, loss: 0} 

function clickRock() { 
    var computerChoice = Math.floor(Math.random() * 3); 

    img = document.getElementById("change1"); 
    img.src = "leftRockHand.jpg"; //if user presses the rock, the rock hand is displayed 
    img = document.getElementById("change2"); 

    //randomly picks a picture of a hand for the computer 
    switch(computerChoice){ 
     case 0: 
     img.src = "rightRockHand.jpg"; 
     break; 
     case 1: 
     img.src = "rightPaperHand.jpg"; 
     break; 
     case 2: 
     img.src = "rightScissorHand.jpg"; 
     break; 
    } 

    Wins.innerHTML = rockWin; 

    if (computerChoice === "rightRockHand.jpg") { 
     rockWin + 1; 
    } 

    return rockWin; 
} 
+4

Пожалуйста, создайте «скрипку» или другую демонстрационную ссылку, чтобы мы могли видеть ее в действии. –

+1

https://jsfiddle.net/cr_harrison14/rya66w3h/1/#update вот скрипка кода –

+0

Я рекомендую вам загружать свои изображения на imgur.com, чтобы вы могли напрямую ссылаться на изображения для более удобного просмотра (потому что они сломаны изображения в JSFiddle), и поэтому вам не нужно размещать их самостоятельно. – Scott

ответ

3

Несколько вопросов:

  1. бумаги бьет рок
  2. Использование rockwin += 1 вместо rockwin + 1
  3. Вы должны установить rockwin, прежде чем установить победы SPAN основаны от rockwin
  4. Вы не установили Wins к выигрышей SPAN
  5. Вы не получили значение rockwins

JS

var counter = {win: 0, tie: 0, loss: 0} 

    function clickRock() { 
     var computerChoice = Math.floor(Math.random() * 3); 
     img = document.getElementById("change1"); 
     img.src = "leftRockHand.jpg"; //if user presses the rock, the rock hand is displayed 
     img = document.getElementById("change2"); 
     switch(computerChoice){ //randomly picks a picture of a hand for the computer 
     case 0: 
      img.src = "rightRockHand.jpg"; 
     break; 
     case 1: 
      img.src = "rightPaperHand.jpg"; 
     break; 
     case 2: 
      img.src = "rightScissorHand.jpg"; 
     break; 
     } 
     var Wins=document.getElementById('Wins'); 
     var rockwin = Wins.innerHTML; 
     if (computerChoice === "rightPaperHand.jpg") { 
      rockWin += 1; 
     } 
     Wins.innerHTML = rockWin; 
     return rockWin; 
    } 
+0

Я всегда думал, что рок бьет все, кроме +1, бумага ударяет рок :) – Scott

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