Quiero poder copiar el color de un cuadro en el que se hizo clic y almacenarlo como la variable newColor .
Mi función selectColor(color) , a la que se le pasa la propiedad de background-color , me da el error "Error de referencia no detectado: el color no está definido". ¿Necesito definir la variable que uso como parámetro de una función por separado, por ejemplo, cuando defino var newColor ?
Código completo: 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 }Debería hacer referencia a this en lugar de event.target en su atributo onclick , ya this refiere al elemento actual.
Además, no existe una propiedad de estilo background-color . Es 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>