Using object reference (this) in called function

Question

I have rewritten this question as parts of the original were solved to a simpler solution:

I have a dynamically created table where there will potentially be over 100 table cells () that wont have ID's for them. When a table cell is clicked a onclick event fires and a conditional check is done to determine if it is the first click of a 2 click series or the second click. The conditional determines which value of 2 hidden form fields is set.

Now here is the simple part im trying to accomplish: onclick, IF it is the first click I want the background color of the object that triggered the function to be color1 else if it is the second click then it will be color2.

The code: (JSFiddle Here)

CSS

#test tr td {text-align:center; border: thin black solid;}

SCRIPT

<script>
var x = 0;
var click = 0;
function res(zz) {
if (click == 0) {document.getElementById('start').value=zz; click = 1;} else
{document.getElementById('end').value=zz; click = 0;}
}
</script>

HTML

<form action="" method="POST">
<input type="hidden" name="start" id="start" value="">
<input type="hidden" name="end"  id="end" value="">
<input name="submit" type="submit" value="submit" />    
</form>

 <div id="starget"></div>
    <div id="etarget"></div>

    <table width="100%" id="test">
            <thead>
            <tr>
            <th>Tech</th><th>0800</th><th>0900</th><th>1000</th><th>1100</th><th>1200</th>
            </tr>
        </thead>
        <tr>
<td>Bill</td>
<td>XXX</td>
<td onclick="res(0900);"></td>
<td>XXX</td>
<td>XXX</td>
<td onclick="res(1200);"></td>
</tr>
 </table>

This change works IF i want the background color between the first click and second click to be the same:

<td onclick="res(0900);this.style.backgroundColor='green';"></td>

This below however does not work, since the calling object () passes no reference of itself (this.style....) to the function, however this is in fact the way i need it to work because i need the conditional check to determine what color to set the background to:

function res(zz) {
    if (click == 0) {document.getElementById('start').value=zz; click = 1;this.style.backgroundColor='green';} else {document.getElementById('end').value=zz; click = 0;this.style.backgroundColor='red';} }

So the table data is coming from PHP/server-side. I would have a function that runs on the page load, using ajax to call the php to return the table data, then i would use javascript to append the new data (Dynamic). You can set evenhandlers for each call that will trigger a function to set a timer start/stop. Within the stop timer you can again use ajax to submit the value of that cell for php to save the new data or insert new data. — NewToJS
– NewToJS, Commented Feb 11, 2015 at 15:11
@NewToJS I apologize, not start/stop time as like a stop watch timer... i meant the dispatchers for the technicians are going to assign a block of time that can vary for each new ticket they are assigning to the technician, like a day planner. So by example.... a new plumbing call for "Jim" might be assigned to start at 1600Hrs and end at 1800Hrs. — DMSJax
– DMSJax, Commented Feb 11, 2015 at 16:23
Can you give me an example of your table structure for the database please? Is the structure set the same as the the example table shown in this question? — NewToJS
– NewToJS, Commented Feb 11, 2015 at 17:09
@NewToJS I have restructured the question so the original direction is not really the same, thank you for the efforts you had made so far. — DMSJax
– DMSJax, Commented Feb 13, 2015 at 15:34
About the problem with the this context: Use onclick="res.call(this, 0900);". — Tobias
– Tobias, Commented Feb 13, 2015 at 15:42

sifriday · Accepted Answer · 2015-02-13 15:44:05Z

1

You simply need to pass 'this' to the function res

Fiddle here:

http://jsfiddle.net/sifriday/r3jaapj5/2/

HTML:

<td onclick="res(0900, this);"></td>

Corresponding JS tweak:

function res(zz, el) {
    if (click == 0) {document.getElementById('starget').innerHTML=zz; click = 1; el.style.backgroundColor='green';} else {document.getElementById('etarget').innerHTML=zz; click = 0;}
}

answered Feb 13, 2015 at 15:44

sifriday

4,5011 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DMSJax Over a year ago

Thanks! Didn't know you could pass 'this' as a variable

sifriday Over a year ago

yep, it is super-handy for exactly what you're doing here!

Collectives™ on Stack Overflow

Using object reference (this) in called function

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related