Copying background color using variables in JavaScript

Question

I want to be able to copy a clicked box's color and store it as the variable newColor.

My function selectColor(color), which is passed the property of background-color, gives me the error "Uncaught ReferenceError: color is not defined". Do I need to define the variable that I use in as a parameter of a function separately, for example when I define var newColor?

Full code: https://codepen.io/Lukedoc321/pen/GRENxao

<p id="redSelector" style="background-color:red;" onclick="selectColor(event.target.style.background-color)">Copy me!</p>

var newColor = "purple"; 

function selectColor(color) { //Selects/saves the new color
  newColor = color; //Updates variable with color of the clicked cell
}

Spectric · Accepted Answer · 2021-09-08 02:29:35Z

You should be referencing to this instead of event.target in your onclick attribute, since this refers to the current element.

Also, there is no background-color style property. It's backgroundColor.

//alert("Welcome!");
var newColor = "purple"; //Default color, to test

function selectColor(color) { //Selects/saves the new color
  //alert("test1");
  console.log(color)
  newColor = color; //Updates variable with color of the clicked cell
  alert("You've selected " + newColor + "! Now click on a numbered cell to apply the color.");
}

function changeColor() { //Applies new color
  //alert("test2");
  event.target.style.backgroundColor = newColor;
  alert("You made the empty cell " + newColor + "!");
}

.table {
    display: table;
    padding: 5px;
}

row {
    display: table-row;
}

a,p {
    background-color: yellow;
    max-width: 100%;
    height: 100%;
    display: table-cell;
    border: 1px solid; 
    padding: 50px;
    text-align: center;
}

body {
  background-color: green;
}

<body>  
  <div class="table" id="reservation_table">     
    <row>
      <p id="redSelector" style="background-color:red;" onclick="selectColor(this.style.backgroundColor)">Copy me!</p>
      <p id="1A" onclick="changeColor()">1A</p>
      <p id="1B" onclick="changeColor()">1B</p>
      <p id="1C" onclick="changeColor()">1C</p>
    </row>
    <row>
      <p id="blueSelector" style="background-color:blue;" onclick="selectColor(this.style.backgroundColor)">Copy me!</p>
      <p id="2A" onclick="changeColor()">2A</p>
      <p id="2B" onclick="changeColor()">2B</p>
      <p id="2C" onclick="changeColor()">2C</p>
    </row>
    <row>
      <p id="greenSelector" style="background-color:green;" onclick="selectColor(this.style.backgroundColor)">Copy me!</p>
      <p id="3A" onclick="changeColor()">3A</p>
      <p id="3B" onclick="changeColor()">3B</p>
      <p id="3C" onclick="changeColor()">3C</p>
    </row>
    <row>
      <p style="background-color: black;"></p>
      <p>A</p>
      <p>B</p>
      <p>C</p>
    </row>
    <!-- <button onclick="changeColor()">Change Color</button> -->
  </div>
</body>

Oh I see, so even when you reference the function in HTML, you must use JavaScript syntax for the arguments? That solved the problem, thank you!

Collectives™ on Stack Overflow

Copying background color using variables in JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related