How to ask again and again if they want to play?


#1


I asked the user if they want to play Rock Paper Scissors.
Now, when they click button "no", I want to ask them again.
Also, if they click "yes", how do I jump out of the script tags and create another p tag with my next question?
Right now if I create a p tag, it automatically pops up at the first load of the page. I want it only after they click "yes", for example.

If this is too complicated to answer and will take a while to explain, just let me know. I can move on and try something else :slight_smile:


<!DOCTYPE html>
<html>
<head>
	<title>RockPaperScissors</title>
</head>
<body style="text-align: center">

	<p>Do you want to play Rock, Paper, Scissors?</p>

	<input type="button" name="yes" onclick="yes()" value="Yes">
	<input type="button" name="no" onclick="no()" value="No">

		<script>
			function yes() {
				document.getElementById("demo").innerHTML = "Awesome! <br />";
			}
			function no() {
				document.getElementById("demo").innerHTML = "Maybe next time. <br />";
			}
		</script>

		<!-- question here -->

	<p>Do you want to play now?<p>

		<!-- how do I ask again?-->

		<!-- end of question -->

	<p id="demo"></p>
</body>
</html>


#2

@amidzicigor

<!DOCTYPE html>
<head><title>Rock,Paper,Scissors!</title>
<style>
h2 {
    font-family:arial;
}
div {
   border: 1px solid black;
   height:20px;
   width:180px;
   text-align:center;
   }

form {
    display: inline-block;
}

#button {
    display: inline-block;
    height:20px;
	width:170px;
	background-color:#cc0000;
	font-family:arial;
	font-weight:bold;
	color:#ffffff;
	border-radius: 5px;
	text-align:center;
	margin-top:2px;
}

.list {
	font-family:garamond;
	color:#cc0000;
}
.uC {
   background-color:red;
  }
.cC {
   background-color:white;
  }
.result {
   background-color:blue;
  }

</style>
</head>
<body>
<!-- from Jquery - Modifying HTML Elements - 11. Click Da Button! Do It Naoughw! --></!-->
		<h2>Rock Paper Scissors</h2>
		<h5>Give your Choice (rock, paper, scissors)</h5>
		<form name="checkListForm">
			<input type="text,reset" name="checkListItem"/>
		</form>
		<div id="button">Show a Result</div>
		<br/>
		<div class="list" style="opacity: 0"></div>

  <div class="uC"></div>
  <div class="cC"></div>
  <div class="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript">
  
//var userChoice = prompt("Do you choose rock, paper or scissors?");
var main = function() {
 $('#button').click( function() {
     var userChoice = $('input[name=checkListItem]').val();
     var computerChoice = Math.random();
     if (computerChoice < 0.34) {
         computerChoice = "rock";
     }
	 else if(computerChoice <= 0.67) {
         computerChoice = "paper";
     }
	 else {
         computerChoice = "scissors";
     }
	 
     var compare = function(choice1, choice2) {
        if (choice1 === choice2) {
            return "The result is a tie!";
        }
		else if (choice1 === "rock") {
            if (choice2 === "scissors") {
                return "Rock wins";
            } 
			else {
                return "Paper wins";
			}
        }
		else if (choice1 === "paper") {
            if (choice2 === "rock") {
                return "Paper wins";
            } 
			else {
                return "Scissors wins";
			}
        }
		else if (choice1 === "scissors") {
            if (choice2 === "rock") {
                return "Rock wins";
            } 
			else {
                return "Scissors wins";
			}
		}
	}

  var result = compare(userChoice, computerChoice);
//   var docString= "<p>User: " + userChoice + "</p>" + 
//                  "<p>Computer: " + computerChoice + "</p>"+
//				  "<p>Result: " + result + "</p>"
//   document.write( docString);
  $('.uC').text("userChoice: " + userChoice);
  $('.cC').text("computerChoice: " + computerChoice);
  $('.result').text("Result: " + result);
  $('input[name=checkListItem]').val("");
   });
  };
  $(document).ready(main);
</script>

</body>
</html>

#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.