Question

下午好，

我在网页上使用2个svg计数器时遇到问题。我知道我每页只能使用一次Id，但是当我尝试使用getElementByClassName而不是getElementById时，没有任何作用。如何在不使用getElementByClassName的情况下复制我的计数器或使代码与它一起使用？

以下是我的javascript的一部分：

var canvasSize = 200,
centre = canvasSize/2,
radius = canvasSize*0.8/2,
s = Snap('#svg'),
path = "",
arc = s.path(path),    
startY = centre-radius,
runBtn = document.getElementById('run'),
percDiv = document.getElementById('percent'),
input = document.getElementById('input');

input.onkeyup = function(evt) {
if(isNaN(input.value)) {
  input.value = '';
}
};

runBtn.onclick = function() {
run(input.value/100);
};

function run(percent) {
var endpoint = percent*360;
Snap.animate(0, endpoint,   function (val) {
    arc.remove();

    var d = val,
        dr = d-90;
        radians = Math.PI*(dr)/180,
        endx = centre - radius*Math.cos(radians),
        endy = centre + radius * Math.sin(radians),
        largeArc = d>180 ? 1 : 0;  
        path = "M"+centre+","+startY+" A"+radius+","+radius+" 0 "+largeArc+",0 "+endx+","+endy;

    arc = s.path(path);
    arc.attr({
      stroke: '#3da08d',
      fill: 'none',
      strokeWidth: 12
    });
    percDiv.innerHTML =    Math.round(val/360*100) +'%';

}, 2000, mina.easeinout);  
}

run(input.value/100);

http://codepen.io/anon/pen/pyyNxO

Answer 1

正如Felix Kling所指出的，你想要getElementsByClassName（多个元素 s ），这将返回一个数组-theh NodeList，你可以使用数组方法{ {1}}和[].method.call()。

因此，我会通过[].method.apply()（可能是“btn1”和“btn2”）将输入值保存在对象中，并将onclick赋值行更改为：

id

我如何使用getElementByClassName而不是getElementById来复制元素？

1 个答案: