SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post If Paper; if else rock; else scissors?

    I have been working on a "Rock Paper Scissors" game to see if I understand the basics of JavaScript. It all works well until I get to the if statement from lines 30 to 71 in the `fight()`: I have adjusted the reply variable to indicate how it may be "if'ing" through. It seems to be returning the default value of every sub "if" in the overall "if". Am I using the wrong variable for the secondary condition maybe?

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="content-type" content="text/xml; charset=utf-8" />
        <title>radioGroup.html</title>
        <link rel = "stylesheet"
              type = "text/css"
              href = "radioGroup.css" />
     
        <script type = "text/javascript">
          //<![CDATA[
          // from radioGroup.html
          function fight(){
    	  	var randomChoice = Math.random();
    		var threeChoice = Math.floor (randomChoice * 3);
    		var weapon = document.getElementsByName("weapon");
     
            for (i = 0; i < weapon.length; i++){
              currentWeapon = weapon[i];
     
              if (currentWeapon.checked){
                var selectedWeapon = currentWeapon.value;
              } // end if
     
            } // end for
     
    		var cpuChoice = new Array("Paper", "Rock", "Scissors")
            var reply = "xxx"
    		if (threeChoice === 0) {
    			if (weapon === "Paper") {
    				reply = "11";
    				}
    			else if (weapon === "Rock") {
    					reply = "12";
    				}
    			else if (weapon === "Scissors") {
    					reply = "13";
    					}
    			else {
    					reply = "what1";
    					}
    		}else if (threeChoice === 1) {
    				if (weapon === "Paper") {
    				reply = "21";
    				}
    			else if (weapon === "Rock") {
    					reply = "22";
    				}
    			else if (weapon === "Scissors") {
    					reply = "23";
    					}
    			else {
    					reply = "what2";
    					}
    		}else if (threeChoice === 2) {
    				if (weapon === "Paper") {
    				reply = "31";
    				}
    			else if (weapon === "Rock") {
    					reply = "32";
    				}
    			else if (weapon === "Scissors") {
    					reply = "33";
    					}
    			else {
    					reply = "what3";
    					}
    		}else {
    			reply = "hay now?";
    			}
    		var output = document.getElementById("output");
            var response = "<h2>You have chosen ";
            response += selectedWeapon + "<h2>The CPU has chosen ";
    		"<\/h2> \n";
    		response += cpuChoice[threeChoice] + "<\/h2> \n";
    		response += reply + "<\/h2> \n";
            output.innerHTML = response;
         } // end function
     
          //]]>
        </script>
      </head>
     
      <body>
        <h1>Choose!</h1>
        <form action = "">
          <fieldset>
            <input type = "radio"
                   name = "weapon"
                   id = "radPaper"
                   value = "Paper"
                   checked = "checked" />
            <label for = "radPaper">Paper</label>
     
            <input type = "radio"
                   name = "weapon"
                   id = "radRock"
                   value = "Rock" />
            <label for = "radRock">Rock</label>
     
            <input type = "radio"
                   name = "weapon"
                   id = "radScissors"
                   value = "Scissors" />
            <label for = "radScissors">Scissors</label>
            <button type = "button"
                    onclick = "fight()">
              fight the dragon
            </button>
          </fieldset>
        </form>
        <div id = "output">
     
        </div>
      </body>
    </html>

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,254
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    That's because you need to use selectedWeapon in your comparison, not weapon.

    You know - if you reorder the radio buttons, you can simplify the javascript coding a lot.

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
    <html lang="EN" dir="ltr" xmlns="[url=http://www.w3.org/1999/xhtml]XHTML namespace[/url]">
      <head>
        <meta http-equiv="content-type" content="text/xml; charset=utf-8" />
        <title>radioGroup.html</title>
        <link rel = "stylesheet"
              type = "text/css"
              href = "radioGroup.css" />
     
        <script type = "text/javascript">
          //<![CDATA[
          // from radioGroup.html
          function fight(){
            var response = "";
            var possibleChoices = new Array();
            // First get random machine choice...
            var cpuChoice = Math.floor(Math.random() * 3);
            // now get user choice...
            var userChoice = -1;
            var weapon = document.getElementsByName("weapon");
            for (i = 0; i < weapon.length; i++){
                // add possible choices to array....
                possibleChoices.push(weapon[i].value);
                if (weapon[i].checked){
                    var userChoice = i;
                } // end if
            } // end for
     
            //alert(userChoice); alert(cpuChoice); alert(possibleChoices.length);
            if (userChoice === -1) {
                response = "<p>Please Choose a Weapon</p>";
            } else {
                response = "<h2>You have chosen " + possibleChoices[userChoice] + " and the CPU has chosen " + possibleChoices[cpuChoice] + ".</h2>";
                if ((userChoice == 0 && cpuChoice == possibleChoices.length - 1) || userChoice > cpuChoice) {
                    response += "<h2>You win!</h2>";
                } else if (userChoice < cpuChoice || cpuChoice == 0 && userChoice == possibleChoices.length - 1) {
                    response += "<h2>CPU wins!</h2>";
                } else {
                    response += "<h2>It's a tie!</h2>";
                }
            }
            output.innerHTML = response;
         } // end function
     
          //]]>
        </script>
      </head>
     
      <body>
        <h1>Choose!</h1>
        <form action = "">
          <fieldset>
            <input type = "radio"
                   name = "weapon"
                   id = "radPaper"
                   value = "Paper"
                   checked = "checked" />
            <label for = "radPaper">Paper</label>
            <input type = "radio"
                   name = "weapon"
                   id = "radScissors"
                   value = "Scissors" />
            <label for = "radScissors">Scissors</label>
            <input type = "radio"
                   name = "weapon"
                   id = "radRock"
                   value = "Rock" />
            <label for = "radRock">Rock</label>
            <button type = "button"
                    onclick = "fight()">
              fight the dragon
            </button>
          </fieldset>
        </form>
        <div id = "output">
     
        </div>
      </body>
    </html>
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •