Menu
I am working on a test project to learn web development and have run into a problem that I am not sure how to solve.
I have a table that contains 11 cells. 9 of the cells have predefined values in them, however, for the other two I would like to manually set the value through passing values to parameters.
The code;
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Colour Match</title>
</head>
<body>
<table width="300" border="1" id="menuitems">
<tbody>
<tr>
<td id="cell1"><div> RED</div></td>
<td id="cell2"><div> BLUE</div></td>
<td id="cell3"><div> GREEN</div></td>
</tr>
<tr>
<td id="cell5"><div> PINK</div></td>
<td id="cell6"><div> PURPLE</div></td>
<td id="cell7"><div> YELLOW</div></td>
</tr>
<tr>
<td id="cell9"><div> BLACK</div></td>
<td id="cell10"><div> BROWN</div></td>
<td id="cell11"><div> GREY</div></td>
</tr>
</tbody>
</table>
<table width="300" border="1" id="menulist">
<tbody>
<tr>
<td id="colourname"><div> colour name</div></td>
</tr>
<tr>
<td id="colour"> colour</td>
</tr>
</tbody>
</table>
</body>
</html>
I have given ids to each cell and what I would like to do is, change the value of the bottom two cells 'colourname' and 'colour' depending on what cell user clicked, however, I would like to manually pass values to javascript parameter when I call it on click; Something like this;
</script> <td id="cell1" onClick="mySetup("RED", Color:RED)"><div> RED</div></td>
I don't have much knowledge of Javascript but I have some knowledge of java and this is roughly how it can be achieve in java:
TextField someID;
Button SomeID;
Public mySetup (String colourName, Color colour) {
someID = colourName;
someID.setBackgroundColor(colour)
}
What I want to do is set up a function in javascript that when called onClick takes in values as parameter and changes the bottom two cells:
I am sure this isn't the correct way of doing it in JS but just to explain my question better:
Function mySetup (Var name, Color colour) {
colourName.setVar(name);
colour.setColour(colour);
}
I hope I have explained myself properly, if not please let me know and I will try to explain better.
EDITED:
colourName should change the text of the cell, whereas colour should change the background colour of the cell.
EDITED 2
Hi, I think my question did not come as clear as I wanted it to be;
The parameter of the function should take in two values, 1 for colourName and 1 for the backgroundcolour.
the colourName should change the text of colourname cell and backgroundcolour should change the background for colour for colour cell.
<td id="colourname"><div> colour name</div></td>
</tr>
<tr>
<td id="colour"> colour</td>
</tr>
288
function f(col, name) {
$("#colourname div").html(name);
$("#colour").css('background-color', col);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="300" border="1" id="menuitems">
<tbody>
<tr>
<td id="cell1" onclick="f('RED', 'name RED')"><div> RED</div></td>
<td id="cell2" onclick="f('BLUE', 'name BLUE')"><div> BLUE</div></td>
<td id="cell3" onclick="f('GREEN', 'name GREEN')"><div> GREEN</div></td>
</tr>
</tbody>
</table>
<table width="300" border="1" id="menulist">
<tbody>
<tr>
<td id="colourname"><div> colour name</div></td>
</tr>
<tr><td id="colour"> colour</td></tr>
</tbody>
</table>see https://jsfiddle.net/gkmmmk86/4/
151
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
