title: How to change background color of a div using javascript?
body: <p>For my course I am making a memory card game. All I want to do here is to change the background color of a div (that has been created in Javascript) when clicked. When the div is clicked, the background color should change to its class name. I included my entire code for your reference, but the part I'm having issues with is the function handleCardClick(event). What am I doing wrong with
  (event.target.style.background-color = selectedColor)?</p>
  <p>I'm sure it is a simple fix, but any help is appreciated. Love this community!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const gameContainer = document.getElementById("game");
  
  const COLORS = [
    "red",
    "blue",
    "green",
    "orange",
    "purple",
    "red",
    "blue",
    "green",
    "orange",
    "purple"
  ];
  
  
  // here is a helper function to shuffle an array
  // it returns the same array with values shuffled
  // it is based on an algorithm called Fisher Yates if you want ot research more
  function shuffle(array) {
    let counter = array.length;
  
    // While there are elements in the array
    while (counter &gt; 0) {
      // Pick a random index
      let index = Math.floor(Math.random() * counter);
  
      // Decrease counter by 1
      counter--;
  
      // And swap the last element with it
      let temp = array[counter];
      array[counter] = array[index];
      array[index] = temp;
    }
  
    return array;
  }
  
  let shuffledColors = shuffle(COLORS);
  
  // this function loops over the array of colors
  // it creates a new div and gives it a class with the value of the color
  // it also adds an event listener for a click for each card
  function createDivsForColors(colorArray) {
    for (let color of colorArray) {
      // create a new div
      const newDiv = document.createElement("div");
  
      // give it a class attribute for the value we are looping over
      newDiv.classList.add(color);
  
      // call a function handleCardClick when a div is clicked on
      newDiv.addEventListener("click", handleCardClick);
  
      // append the div to the element with an id of game
      gameContainer.append(newDiv);
    }
  }
  
  // TODO: Implement this function!
  function handleCardClick(event) {
    // you can use event.target to see which element was clicked
    let selectedColor = event.target.className;
    event.target.style.background-color = selectedColor;
  
    }
  
  // when the DOM loads
  createDivsForColors(shuffledColors);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#game div {
    border: 1px solid black;
    width: 15%;
    height: 200px;
    margin: 10px;
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;title&gt;Memory Game!&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;Memory Game!&lt;/h1&gt;
      &lt;div id="game"&gt;
      &lt;/div&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>