Rock-paper-scissor

Simple Rock-paper-scissor in javascript when you get bored

by marbx

HTML

<div >
  <label>Make a choice</label>
  <label class="checkbox-inline">
    <input type="radio" name="rps" id="rock" value="rock">
    Rock
  </label>
  <label class="checkbox-inline">
    <input type="radio" name="rps" id="paper" value="paper">
    Paper
  </label>
  <label class="checkbox-inline">
    <input type="radio" name="rps" id="scissor" value="scissor">
    Scissor
  </label>
</div>
<br/>
<button id="play" >Play</button>
<div id="result">

</div>

JavaScript

var playButton = document.getElementById("play");
playButton.onclick = play;

const choices = ['rock','paper','scissor'];

const rockPaperScissor = (choice) =>{    
		let random = Math.floor(Math.random() *3);
    let indexOfChoice = choices.indexOf(choice);
     let result = '';
   
    if(indexOfChoice<0){
     	result = "Wrong choice";
      console.log(result);
      return;
    }
    let computerResult = choices[random];
    console.log('Computer selected : '+computerResult+", You selected :"+choice);
    if(random==indexOfChoice){
    	result = 'tie';
    }
    else if(random==indexOfChoice+1){
      result = 'You lost' 
    }else if(indexOfChoice==2&& random==0){
    	result="You lost";
    }
    else{
    	result = "You win";
    }
   	return result;
    //console.log(result)
}

function play() {
	let choice = document.querySelector('input[name="rps"]:checked').value;
  var place = document.getElementById("result");
  place.innerHTML =rockPaperScissor(choice) ;
}