Одна кнопка, меняя ID для рисования

Question

Я пытаюсь сделать линейный график в Canvas, У меня был main.html и скрипт в main.js (dosen`t matter what is inside - я вставляю только конец код).

Это конец main.js - plot, plot2, plot3 - функция для рисования линии.

document.getElementById("button").onclick = plot; ///drawing line 1 
document.getElementById("button2").onclick = plot2; //drawing line 2 
document.getElementById("button3").onclick = plot3; //drawing line 3 
document.getElementById("button4").onclick = plot4; //drawing .... 
document.getElementById("button5").onclick = plot5; //drawing ... 

В main.html я имел

<input type="submit" name="button" id="button" value="Rysuj" /></td> 
<input type="submit" name="button2" id="button2" value="Rysuj2" /></td> 
        <input type="submit" name="button3" id="button3" value="Rysuj3" /></td> 
        <input type="submit" name="button4" id="button4" value="Rysuj4" /></td> 
        <input type="submit" name="button5" id="button5" value="Rysuj5" /></td> 

И когда я нажимаю кнопки Rysuj, Rysuj2, Rysuj3 все рисуете.

Но я хотел бы сделать только одну кнопку, как «Rysuj», и я пытаюсь изменить идентификатор после щелчка, но что-то не работает.

В main.html я писал:

<script language="text/javascript"> 
function something(){ 
document.getElementById("button").id = "button2" 


} 
</script> 
<input type="button" onclick="something()" value="Rysuj" id="button"> 

Что я должен сделать, чтобы сделать только 1 кнопку, которая после щелчка изменит идентификатор button2, после следующего щелчка мышью на Button3 и т.д.?

Answer 1

Как насчет изменения линии линии от первой кнопки после каждого нажатия?

var arr = ['plot','plot2','plot3','plot4','plot5']; 
var count=0; 
document.getElementById("button").onclick = something; 
function something(){ 
    eval(arr[count%arr.length]+'();'); 
    count++; 
} 

Answer 2

Вы можете установить счетчик:

<script language="text/javascript"> 
    var counter = 1; 
    function something(){ 
     document.getElementById("button").id = "button" + counter; 
     counter++; 
    } 
    </script> 

И пытаетесь отделить яваскрипт кода и HTML. Inline js, как onclick, не похож на красивый код.