我想能夠復制一個被點擊的盒子的顏色,并將其存盤為變數newColor。
我的函式selectColor(color),傳遞了background-color的屬性,給了我一個錯誤"Uncaught ReferenceError: color is not defined"。我是否需要單獨定義作為函式引數使用的變數,例如當我定義var newColor時?
完整的代碼。https://codepen.io/Lukedoc321/pen/GRENxao
< p id="redSelector"/span> style="background-color: red;" onclick="selectColor(event. target.style.background-color)">復制我!</p>
var newColor = "紫色"。
function selectColor(color) { /選擇/保存新顏色
newColor = color; //用點擊的單元格的顏色來更新變數。
}
uj5u.com熱心網友回復:
在你的onclick屬性中,你應該參考this而不是event.target,因為this是指當前元素。
另外,沒有background-color樣式屬性。它是backgroundColor.
//alert("Welcome!");
var newColor = "purple"; //Default color,to testfunction selectColor(color) { /選擇/保存新的顏色。
//alert("test1");
console.log(color)
newColor = color; //Updates variable with the color of the clicked cell.
alert("You've selected " newColor "! 現在點擊一個有編號的單元格來應用該顏色。")。
}
function changeColor() { /Applies new color
//alert("test2");
event.target.style.backgroundColor = newColor;
alert("You made the empty cell " newColor "!") 。
}
.table {
display: table;
padding: 5px;
}
行 {
display: table-row;
}
a,p {
background-color: 黃色。
max-width: 100%;
height: 100%;
display: table-cell;
border: 1px solid;
padding: 50px;
text-align: center;
}
body {
background-color: 綠色。
}
<body>/span>
< div class="table" id="reservation_table">
<row>
<p id="redSelector"/span> style="background-color: red;" onclick="selectColor(this. style.backgroundColor)">復制我!</p>
< p id="1A" onclick="changeColor()" > 1A</p>
< p id="1B" onclick="changeColor()" > 1B</p>B
< p id="1C" onclick="changeColor()" /span>> 1C</p>1
</row>/span>
<row>
<p id="blueSelector"/span> style="background-color: blue;" onclick="selectColor(this. style.backgroundColor)">復制我!</p>
< p id="2A" onclick="changeColor()" > 2A</p>
< p id="2B" onclick="changeColor()" > 2B</p>
< p id="2C" onclick="changeColor()" /span>> 2C</p>
</row>/span>
<row>
<p id="greenSelector"/span> style="background-color: green;" onclick="selectColor(this. style.backgroundColor)">復制我!</p>
< p id="3A" onclick="changeColor()" /span>> 3A</p>
< p id="3B" onclick="changeColor()" /span>> 3B</p>
< p id="3C" onclick="changeColor()" /span>> 3C</p>
</row>/span>
<row>
<p style="background-color: black;"></p>>
<p>A</p>/span>
<p>B</p>/span>
<p>C</p>/span>
</row>/span>
<!-- <button onclick="changeColor()">Change Color</button> -->
</div>
</body>/span>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/316194.html
標籤:
上一篇:通過使用所選選項的變數值呼叫陣列
