Clash Royale CLAN TAG#URR8PPP

I want to change the background color of the table given in csss from an value from select

this is this script

<script>
function abcd()

var col=document.getElementById("chess").value;
document.getElementById("chess").style.background:col;


</script>


the css where i defined the color i need to change as per the value retrieved from the select

table

margin: 80px auto;
background:black;



need to access the value selected

<select id="chess" >
<option name="abc" value="black"> <i><b>BLACK</b></i></option>
<option name="abc" value="red"><i><b>RED</b></i></a></option>
<option name="abc" value="yellow"><i><b>YELLOW</b></i></option>
</select>


this is table where i need to change color after the selection / submit of the value

<table id="ta">
<tr class="chessboard">
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
</tr>
</table


background:col;

background = col;

abcd()

2 Answers
2

There are some issues in your code:

chessboard

chess

=

:

</a>

>

</table

Try the following way:

function abcd(op)
var col=op.options[op.selectedIndex].value;
document.getElementById("ta").style.background = col;


table
margin: 80px auto;
background:black;


<select id="chess" onchange="abcd(this)">
<option name="abc" value="black"> <i><b>BLACK</b></i></option>
<option name="abc" value="red"><i><b>RED</b></i></option>
<option name="abc" value="yellow"><i><b>YELLOW</b></i></option>
</select>
<table id="ta">
<tr class="chessboard">
<td class="chessboard">1</td>
<td class="chessboard">2</td>
<td class="chessboard">3</td>
<td class="chessboard">4</td>
<td class="chessboard">5</td>
<td class="chessboard">6</td>
<td class="chessboard">7</td>
<td class="chessboard">8</td>
</tr>
</table>

There are a few issues to work on here.

You have no event listener on your options menu, so there's nothing calling your abcd function when you select a different option.

abcd

background:col is not an assignment as intended; you probably meant background = col.

background:col

background = col

Your HTML is a bit suspect in a number of ways: you have a loose </a> and you can't stick <i>s and <b>s in an attempt to style a select menu. Use CSS for that. The name attribute on the option element is obsolete; use an id for those if necessary. It also strikes me as strange that you're using the class name chessboard for both a <tr> and a bunch of <td>s and you have ta (presumably short for table?) and a chess element that is really a color selector. It's good practice to keep your naming consistent and precise in the interest of keeping your code readable. Lastly, you're missing a > to close your final <table> element.

</a>

<i>

<b>

chessboard

<tr>

<td>

ta

chess

>

<table>

const selector = document.getElementById("chess");
const ta = document.getElementById("ta");

selector.addEventListener("change", e =>
ta.style.background = selector.options[selector.options.selectedIndex].value
);

table
margin: 10px auto;
width: 90%;
height: 90vh;
background: black;


<select id="chess">
<option value="black">BLACK</option>
<option value="red">RED</option>
<option value="yellow">YELLOW</option>
</select>

<table id="ta">
<tr class="chessboard">
<td></td>
</tr>
</table>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.