将另一个元素的id传递给按钮的onclick事件?

时间:2016-06-24 16:12:33

标签: javascript html

我正在尝试这样做,以便当我点击我所拥有的时钟元素上方的按钮时,它会从上午更改为下午。我有很多时钟元素,每个都与自己的am / pm按钮相关联。这是我尝试过的(piechart0是时钟,clock.js是我处理js的地方):

<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>

将此作为我的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);
    }
}

但是我得到了一个&#34;属性,这里不允许使用piechart0&#34;通知。我在这里做错了什么/如何将另一个id传递给按钮的onclick参数的参数?

编辑:我看到我可能有报价冲突。现在,使用&#39; &#39;引用我得到了对piechart0的引用,但是当我完成时,实际的piechart0变量都被定义了:

var clock = document.getElementById(id);

所有这些元素的变量都是未定义的。我不确定为什么会这样,因为我使用相同的ID?

2 个答案:

答案 0 :(得分:0)

一些建议:

为了调试这个,我会插入一个console.log(id),看看实际上是通过了什么。假设您将引号不匹配替换为onclick="Clock.toPm('piechart0')",则该值应该很好。

由于您将此标记为jQuery,我会使用.click(),例如:

HTML

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

使用Javascript:

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

至于clock.am,我不确定是否可以修改像这样的DOM对象。但是,可以肯定的是,它会让人气馁。我建议使用.prop(),即$(clock).prop('am', true)

答案 1 :(得分:0)

在onclick prop

中将其中一个双引号更改为单引号
<button class="button2" onclick='Clock.toAm("piechart0")'>AM</button>
<button class="button2" onclick='Clock.toPm("piechart0")'>PM</button>