Menu
Question about ‘this’ as a reference. 😮
If I have in the <body> section …
[code]
<div id=”TEXT2″ class=”TEXT”>
<span class=”RB” onclick=”pick(this)”>Calculators</span>
<span class=”RB” onclick=”pick(this)”>Algerbraic</span>
<span class=”RB” onclick=”pick(this)”>RPN</span>
</div>
And I have the function ‘pick(this)’ defined in the <head><script> area …
[code]
function pick(which) {
alert(which.innerHTML);
// which.className = (which.className == ‘RB’) ? “RBON” : “RB”;
}
Finally, the CSS applicable statements are …
[code]
input.RB { border: 1px solid black;
background-color: #e8d8c8;
color: black;
width: 100px;
}
input.RB:hover { background-color: orange; }
input.RBON { border: 1px solid blue;
background-color: lightgreen;
color: blue;
width: 100px;
}
input.RBON:hover { background-color: orange; }
The ‘which’ passed in the ‘pick()’ function correctly displays the .innerHTML
BUT (big but) ?
it does not seem to have any effect on the ‘className’ I’m trying to change in the // commented out line of the ‘pick()’ function.
How do I determine which ‘which’ (from the ‘this’ passed to the function,
to apply to change the className clicked upon?
I’ve also tried to use a parent.id to choose the correct <span> tag to alter,
but this too failed to have any effect or gave errors that it was undefined or undetermined. Obviously my DOM skills are sore-ly lacking. 😮
Any clarification to my understanding is much appreciated. ?