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
}
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>