Passing the id of another element into the onclick event of a button?

Question

I am trying to make it so that when I click on a button above a clock element that I have, it changes it from am to pm. I have many clock elements, each associated with their own am/pm buttons. Here is what I tried (piechart0 is the clock and clock.js is where I handle my js for it):

<button class="button2" onclick="Clock.toAm("piechart0")">AM</button>
<button class="button2" onclick="Clock.toPm("piechart0")">PM</button>
<canvas id="piechart0" width="200" height="200"></canvas>

With this as my javascript:

Clock.toAm = function(id) {
    var clock = document.getElementById(id);
    clock.am = true;
    for (var j = 0; j < 48; j++) {
        clock.segments[j] = clock.amSegments[j];
        clock.updateDraw(j);
    }
}

Clock.toPm = function(id) {
    var clock = document.getElementById(id);
    clock.pm = true;
    for (var j = 0; j < 48; j++) {
        clock.segments[j] = clock.pmSegments[j];
        clock.updateDraw(j);
    }
}

But I get a "attribute piechart0 is not allowed here" notification. What am I doing wrong here/how can I pass in another id to the argument of a button's onclick argument?

EDIT: I see that I may be having quotation conflicts. Now, with using ' ' quotations I get the reference to piechart0, but whereas the actual piechart0 variables are all defined, when I complete:

var clock = document.getElementById(id);

All of this element's variables are undefined. I am not sure why this is the case since I am using the same id?

Answer 1

A couple suggestions:

For debugging this I would insert a console.log(id) and see what's actually getting through. Assuming you replace the quote mismatch with onclick="Clock.toPm('piechart0')" the value should get through just fine.

Since you have this tagged as jQuery , I would use .click() ie something like:

HTML

<button id="btnPm">PM</button>

Javascript:

$('button#btnPm').click(function() { Clock.toPm('piechart0'); });

As for clock.am , I'm not sure if modifying a DOM object like this can be made to work. For sure, though, it would be discouraged. I would suggest using .prop() , ie $(clock).prop('am', true)

Answer 2

Change one of the double quotes to be single in the onclick prop

<button class="button2" onclick='Clock.toAm("piechart0")'>AM</button>
<button class="button2" onclick='Clock.toPm("piechart0")'>PM</button>