Switching images to different images in Javascript

Question

I am in college right now and I am learning Javascript. I have a lab that requires I display three coloured buttons on the screen that are completely random in order. Now when these buttons are all green, all red, or all blue, you get a bonus to how many points you get. The code below is what I have so far, but right now I want to explain my thinking process and maybe get some help from you guys to help me better my thinking process.

So basically below I start with 3 button variables. These turn out to be completely useless for me I found out. I thought I could do more complicated if statements with them, but couldn't quite figure it out. So I make a function called randomButton. Then I use a variable called randomNumberOne and set it equal to the Math.ceil and make it so the numbers go from 1 -3. Then I write an if statement saying if the number in that variable gets set as 1, display the red button, if 2 green, if 3 blue. Then I call the function 3 times because I want it to be displayed 3 times. Now what I want to do is make it so if there are 3 blues, reds, or greens in a row it will display something like "You get x10 points" or something like that. I just do not know how to go about doing that. Sorry if what I am typing doesn't make sense, I am still learning and I am eager to learn. Thanks for your time.

<!doctype html>
<html>
  <head>
  <script>
  var button1 = "<img src=red.jpg>"
  var button2 = "<img src=green.jpg>"
  var button3 = "<img src=blue.jpg>"

  function randomButton() {
    var randomNumberOne = Math.ceil(Math.random() * 3);
      if (randomNumberOne === 1) {
        document.write("<img src= red.jpg>");
      } else if (randomNumberOne === 2) {
        document.write("<img src= green.jpg>");
      } else if (randomNumberOne === 3) {
        document.write("<img src= blue.jpg>");
      }
  }

  </script>
  </head>
  <body>

  </body>
  <script>
  randomButton()
  randomButton()
  randomButton()
  </script>

</html>

@David Thomas Sorry if I didn't clarify it, but I just want to be able to show that the user gets a point bonus if all the buttons are all green, blue, or red. That I don't know how to do — Michael, Nov 15 '14 at 23:29
No sorry. I was hoping to have some questions answered by the professionals here. I really want to learn. I have been looking online, but I just can't seem to find anything. — Michael, Nov 15 '14 at 23:35
[Codeschool](https://www.codeschool.com/courses/javascript-road-trip-part-1) is alright in my opinion, Ive gone to it a few times for clarification/ learning the basics of a new framework. Perhaps start there to get a taste-test. — Jhecht, Nov 15 '14 at 23:55

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

might try looking at: Random numbers Generate random number between two numbers in JavaScript

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

Variable conditions: http://www.w3schools.com/js/js_comparisons.asp

edited May 23 '17 at 10:26

Community

1
1

answered Nov 15 '14 at 23:30

bwohl932

1
1

score 0 · Answer 2 · answered Nov 15 '14 at 23:35

a possible demonstration could be like the following code. Note that : -I haven't test it -there is large room of improvement (inline javascript in HTML could be removed for example, global var bonus could be also removed)... I let it to you to do those improvement if required...

Good luck!

  < !doctype html >

  < html >
  < head >

  < script >

  var bonus = 0;


  //display the 3 images and increment the bonus if the user win
  function play(){
   var first_img = randomButton();
   var second_img = randomButton();
   var third_img = randomButton();

    

   document.getElementById('images').innerHTML = first_img + second_img + third_img ;

   if(first_img==second_img && second_img==third_img){
   bonus++;
   document.getElementById('nb_bonus').innerHTML=bonus;
   }

 
   }

   //Returns a new random image tag 
  function randomButton() {
 var images = ["<img src=red.jpg>","<img src=green.jpg>","<img src=blue.jpg>"];
    //generate random between 0 and 2 index
 return images [Math.ceil(Math.random() * 2)]; 
  }



< /script>
</head >
< body >


<div id="images"></div>


Hi, you have <span id='nb_bonus'>0</span>. <br/>
Please click the button in order to align 3 similar images and win some bonus!

<input type="button" value="play" onclick="play()"/>
</body>
</html>

score 0 · Accepted Answer · edited May 23 '17 at 12:20

I would avoid using document.write() as it's an ancient method that was used long ago. It results in poor performance optimization in browsers these days.

That aside, you should have an HTML file, that contains your buttons, a CSS file that colors them, and a javascript file that contains the business logic for generating the random number, which buttons to display, etc. Once you create buttons in your HTML file (dom elements), you can retrieve them in javascript and assign them to variables.

Please see this: Where is the JavaScript DOM API documented? and other links on Mozilla Developer Network.

Here is a simple JSFiddle link to get you started. http://jsfiddle.net/f4yLLa6c/1/

Html:

<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>

Javascript:

function randomNumber() {
    return parseInt(Math.random()*10);
}


function randomizeButtons(button1, button2, button3) {        
    // generate random number
    var randomNum = randomNumber(1,3);

    if( randomNum == 0 ) {
        button1.className = "red";
    } else if( randomNum == 1 ) {
        button2.className = "blue";
    } else if (randomNum == 2) {
        button3.className = "green";   
    } else {
        button1.className = "blue";   
    }
}

function randomButton() {
    // get the buttons from the DOM
    var redButton = document.getElementById("button1");
    var greenButton = document.getElementById("button2");
    var blueButton = document.getElementById("button3");

    randomizeButtons(button1, button2, button3);
    randomizeButtons(button1, button2, button3);
    randomizeButtons(button1, button2, button3);
    randomizeButtons(button1, button2, button3);
    randomizeButtons(button1, button2, button3);

}

randomButton();

CSS:

button {
    color: white;
    font-size: 18px;
}
.red {
    background-color: red;
}

.green {
    background-color: #006633;
}

.blue {
    background-color: blue;
}

It isn't fully working as per your lab, but it's enough starter code to get you going, you can add more logic to show the bonus points if colors are the same, and ensure the buttons always display a color.

Create three separate files, (.html, .css, and .js). Make sure to include the js file in your HTML using the script tag, and link to your stylesheet using the link tag. Good luck and try visiting codecademy.com if you need a basic introduction to javascript, html and css!

Can I ask why you're passing arguments to [`Math.random()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)? The MDN, albeit admittedly not the official, documentation makes no mention of them, or their use within the `random()` method. — David Thomas, Nov 16 '14 at 11:46
Thanks for pointing that out David, didn't realize I even did that, edited my answer! — gchaturvedi, Nov 17 '14 at 13:00

score 0 · Answer 4 · answered Nov 15 '14 at 23:55

Lots of great input here, I gave the concept a shot on jsFiddle: http://jsfiddle.net/bs8b4d29/

HTML:

<div id="wrapper">
    <div class="button" id="A"></div>
    <div class="button" id="B"></div>
    <div class="button" id="C"></div>
</div>

CSS:

.button {
    width: 50px;
    height: 20px;
    float: left;
    border: solid 2px;
    margin: 20px;
}

JS:

var buttonArray = ["red","blue","green"];

jackpot(randomizer(), randomizer(), randomizer());

function jackpot(btn1, btn2, btn3) {
    document.getElementById("A").style.backgroundColor = buttonArray[btn1];
    document.getElementById("B").style.backgroundColor = buttonArray[btn2];
    document.getElementById("C").style.backgroundColor = buttonArray[btn3];
}

function randomizer() {
    var color = Math.floor(Math.random()*3);
    return color;
}

Switching images to different images in Javascript

4 Answers4