Hello!
Done!
HAPPY NEW YEAR TO ALL!!!
I get table cells change colors to green onclicked…
But can’t get the previous color after the whole day of trying…
PLEASE HELP WHO HAS PATIENCE!
ps trying to paste code regularly, I appologie for using ld pc…
MANY THANKS!!!
http://pastebin.com/jeeCrGP9
// if...
// () ? : ...
// embedded if...statement..
// assigning red fields id, name or class i head->style....
//...nothing worked to get preivious color back!!!
Please, what would be the best choice’??
Many thanks!!!
EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.
I tried this way f.e., ( using
tr:nth-of-type(2n+1) td:nth-of-type(2n+1),
tr:nth-of-type(2n) td:nth-of-type(2n){
but did not work
Happy New Year right back at ya’
I’ve seen toggle done both ways, directly changing the color, and by changing the CSS class.
Usually with an if inside the function like (pseudocode)
if (elem color/class == "red" ) {
elem color/class = "blue";
} else {
elem color/class = "red";
}
This looks more like CSS that would be best for something static or for initializing only, not something that would be directly changed by JavaScript
Hello!
Look, this code changes color to green when cell onclicked
but if cell is green , then it does not change it to red : why?
Because it isn’t being toggled, it’s being changed.
But I WANT then to be changed!!!
We have 3 colors actually:
1st ad 2nd: white are red chessboard.
When I click to a cell it should become green and it DOES. !!!(clap!!!)
But,I also want , when I click the green(changed) cell to get its PREVIOUS color (if it was white then I want it to be white again and if it was red I want it to become red again (second onclick).
Can U see my code from pastebin link?
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1pt solid black;
border-collapse:collapse;
}
tr:nth-of-type(2n+1) td:nth-of-type(2n+1),
tr:nth-of-type(2n) td:nth-of-type(2n){
background: #ff0000;
id="red";
}
</style>
</head>
<body>
<script>
function changeMe(el)
{
if (el.style.backgroundColor = "#00ff00") //this does
//not work
{
el.style.backgroundColor="ff0000"
} else {
el.style.backgroundColor = "#00ff00" //this works!!!
}
}
</script>
<table id="chess" width="100pt">
<tr>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
</tr>
<tr>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
</tr>
<tr>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
</tr>
<tr>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
</tr>
<tr>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
<td width="20pt" height ="15pt" onclick="changeMe(this);"></td>
</tr>
</table>
</body>
</html>
Yes, but right now it’s only changing the color to full green.
function changeMe(el)
{
// if...// () ? : ...// embedded if...statement..
// assigning red fields id, name or class i head->style....
//...nothing worked to get preivious color back!!!
el.style.backgroundColor = "#00ff00";
}
try putting in some “if” code and see if that’s a step in the right direction. (post #8)
* get it working for only two colors first
Please, can U have a look at my post 12.
SECOND part of if…statement works (colors cells to green) but FIRST part does no…I am too blind to see the mistake…
The if isn’t testing the condition, it’s making an assignment.
What it’s saying is
if el gets the bg color green then assign the string “ff0000” to it (you can’t assign an invalid color string) else give it the bg color green.
Ok, several things. First, click toggles of colors are usually done using classes because the major JS frameworks have a toggle function specifically for this reason. In jQuery it’s $().toggleClass()
Second, nth-of-type selectors are overkill in this situation. If your html is valid td elements should normally be the only thing within the tr elements (th is also valid, but is usually only used in the thead) So, nth child will do. Next, the keywords “odd” and “even” are much easier to read than n formulas, which should be reserved for those occasions when odd and even don’t work.
So with this in mind the CSS to make a checkerboard pattern on the cells of a table is
td { background: black; }
tr:nth-child(odd) td:nth-child(odd), tr:nth-child(even) td:nth-child(even) {background: red; }
Turning the clicked squares green is made tricky by the CSS specificity rules. That is “td.Active” will be trumped by “tr:nth-child(odd) td:nth-child(odd)” because the second rule is more specific. So the entire chain has to be repeated.
td.active,
tr:nth-child(odd) td.active:nth-child(odd), tr:nth-child(even) td.active:nth-child(even) {background: green; }
If only one square on the board is allowed to be highlighted at a time the standard toggleClass function will not work. For a table of id “MyBoard” the following will work (requires jQuery)
$('#MyBoard td').click(function(){
$('#MyBoard td').removeClass('active');
$(this).addClass('active');
});
This works because with event handlers jQuery coerces the this variable to point to the DOM element the event occurred on. This is the situation where it’s useful, there are many situations where this behavior is a royal pain. The above code must lie in the footer or in a window.ready handler. Combined with the CSS above it will.
If this is for checkers, you probably don’t want to highlight the red squares. You can accomplish this by not binding the event handler on the red squares.
$('#MyBoard tr:nth-child(odd) td:nth-child(even), #MyBoard tr:nth-child(even) td:nth-child(odd)').click(function(){
$('#MyBoard td').removeClass('active');
$(this).addClass('active');
});
A jsFiddle demonstrating all of this.
Happy New Year.
EDIT: Got bored, added checkers.
Thank U all!
But we MUSTEN-T use JQ .
Btw, I did this
function changeMe(el)
{
if (el.style.backgroundColor =="#00ff00")
{
el.style.backgroundColor="#ff0000"
} else {
el.style.backgroundColor = "#00ff00"
}
}
And it still colors it just to green and NOT BACK TO RED___
function changeMe(el)
{
if (el.style.backgroundColor =="#00ff00")
{
el.style.backgroundColor="#ff0000"
} else {
el.style.backgroundColor = "#00ff00"
}
}
Why? In any event, if that’s what you are tasked to do changing the code so that jQuery isn’t needed is relatively easy, but will take more time than I’m willing to toy with it on.
Do you see any difference between
background: #ff0000;
and
el.style.backgroundColor="#ff0000"
It would be logical to assume shorthand would include specific but maybe not?
I am thinking how to devide white cells to one group and reds in another then I could really simply toggle them from basic to green and back…but I cant find sintax example…tried alone but failed
Why mustn’t they use jQuery? Because this is some homework and they are supposed to demonstrate what they understand without resorting to such helpful libraries.