Push Value of attribute in array

Question

$(document).ready(function() {
  function randomColor() {
    return 'rgb(' +
      Math.round(Math.random() * 255) + ', ' +
      Math.round(Math.random() * 255) + ', ' +
      Math.round(Math.random() * 255) + ')'
  }

  $('.Showcolor #button').each(function(i) {
    $(this).css('background-color', randomColor());
  })
  var Random = [];
  var color = $(".Showcolor #button").css("background-color");
  for (i = 0; i < button.length; i++) {
    Random.push(color);
  }
  console.log(Random);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <title>captcha</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Click on circle matching right circle</h1>
  <div class="box">
    <div class="Showcolor">
      <button class="Black"></button>
      <button class="Blue"></button>
      <button class="Orange"></button>

      <button class="Pink"></button>
      <button class="Purple"></button>
      <button class="Skyblue"></button>

      <button class="Brown"></button>

    </div>
    <div="match">
      <button class="Random"></button>
  </div>
  <input type="text" name="color" class="color" disabled>
  </div>
  <script src="jquery.3.js"></script>
  <script src="file.js"></script>
  </table>
</body>

</html>

I am trying to store the color generated for each button into an array of colors(Random), so that an another button(class name = Random) can choose a color from this specific array. Can you help me to find a solution?

Multiple elements with the same ID in one document is invalid HTML. Fix that first. — CertainPerformance
– CertainPerformance, Commented Sep 28, 2018 at 9:08
Also variable names (eg. var Random = []; should be lowercase by convention to avoid confusion. — Frieder
– Frieder, Commented Sep 28, 2018 at 9:23

Zakaria Acharki · Accepted Answer · 2018-09-28 09:26:28Z

First of all the id attribute must be unique in the same document, so replace the duplicate ones by common class like :

<button class="button Black">Black</button>
<button class="button Blue">Blue</button>
<button class="button Orange">Orange</button>

You could use map to loop through them and push the colors to the array :

$(document).ready(function() {
  var buttons = $('.Showcolor .button');

  var Random = buttons.map(function(i) {
    var generated_color = randomColor();

    $(this).css('background-color', generated_color);

    return generated_color;
  }).get();

  $('.random').on('click', function() {
    $('.random').css('background-color', Random[Math.floor(Math.random() * Random.length)]);
  })
});

function randomColor() {
  return 'rgb(' +
    Math.round(Math.random() * 255) + ', ' +
    Math.round(Math.random() * 255) + ', ' +
    Math.round(Math.random() * 255) + ')'
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Click on circle matching right circle</h1>
<div class="box">
  <div class="Showcolor">
    <button class="button Black">Black</button>
    <button class="button Blue">Blue</button>
    <button class="button Orange">Orange</button>

    <button class="button Pink">Pink</button>
    <button class="button Purple">Purple</button>
    <button class="button Skyblue">Skyblue</button>

    <button class="button Brown">Brown</button>

  </div>
  <br>
  <div id="match">
    <button class="random">Random</button>
  </div>
</div>

peeebeee · Accepted Answer · 2018-09-28 09:18:15Z

0

Fix the IDs. Then instead of

$('.Showcolor #button').each(function(i) {
         $(this).css('background-color', randomColor());
      })

use

$('.Showcolor > button').each(function(i) {
         $(this).css('background-color', randomColor());
      })

to select all the <button> elements under the Showcolor <div>

answered Sep 28, 2018 at 9:18

peeebeee

2,6296 gold badges24 silver badges28 bronze badges

Collectives™ on Stack Overflow

Push Value of attribute in array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related