Use a function several times

Asked

Viewed 110 times

2

I created a function that creates a certain clock. The goal is to use the function to reuse several times by changing the position parameters x and y. I use the function setInterval to update every second. The problem is that the function is only being used once.

Complete code: https://jsfiddle.net/p53xcwcj/

    var cont = 0;
	
	function horloge_dynamique(x,y,diametre,decalage){
		
		var svg = document.getElementById('svg');
		cont++;
		
		//cree circle
		var newCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
		newCircle.setAttributeNS(null, 'id', 'circle' + cont);
		newCircle.setAttributeNS(null,'stroke-width',2);
		newCircle.setAttributeNS(null,'stroke','black');
		newCircle.setAttributeNS(null,'fill','Aqua');
		svg.appendChild(newCircle);
		
		//cree aiguille heure
		var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
		newLine.setAttributeNS(null, 'id', 'heure' + cont);
		newLine.setAttributeNS(null, "stroke","red");
		newLine.setAttributeNS(null, "stroke-width","4");
		svg.appendChild(newLine);
		
		//cree aiguille minute
		var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
		newLine.setAttributeNS(null, 'id', 'min' + cont);
		newLine.setAttributeNS(null, "stroke","orange");
		newLine.setAttributeNS(null, "stroke-width","2");
		svg.appendChild(newLine);
		
		//cree aiguille seconde
		var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
		newLine.setAttributeNS(null, 'id', 'sec' + cont);
		newLine.setAttributeNS(null, "stroke","black");
		newLine.setAttributeNS(null, "stroke-width","1");
		svg.appendChild(newLine);
		
		//var circle = document.getElementById("circle_horloge");
		var circle = document.getElementById("circle" + cont);
		circle.setAttribute("cx",x);
		circle.setAttribute("cy",y);
		circle.setAttribute("r",diametre);
		
		//heure
		//var aiguille_heure = document.getElementById("heure");
		var aiguille_heure = document.getElementById("heure"+ cont);
		aiguille_heure.setAttribute("x1",x);
		aiguille_heure.setAttribute("y1",y);
		aiguille_heure.setAttribute("x2",x);
		aiguille_heure.setAttribute("y2",(y-diametre)+diametre/3);
													
		//minutes
		var aiguille_min = document.getElementById("min"+ cont);
		aiguille_min.setAttribute("x1",x);
		aiguille_min.setAttribute("y1",y);
		aiguille_min.setAttribute("x2",x);
		aiguille_min.setAttribute("y2",(y-diametre)+diametre/5);
		
		//secondes
		var aiguille_sec = document.getElementById("sec"+cont);
		aiguille_sec.setAttribute("x1",x);
		aiguille_sec.setAttribute("y1",y);
		aiguille_sec.setAttribute("x2",x);
		aiguille_sec.setAttribute("y2",y-diametre);
		
		
		setInterval(function(){ 
			var d = new Date(); //date
		
			var heure_decalage = d.getHours()+decalage;
			var minute = d.getMinutes();
			var seconds = d.getSeconds();
			
			var heure_calc = (30*((heure_decalage)%12) + (d.getMinutes()/2));
			var minute_calc = 6*minute;
			var seconde_calc = 6*seconds;
			
			var heure = document.getElementById("heure"+ cont);
			var min = document.getElementById("min"+ cont);
			var sec = document.getElementById("sec"+ cont);
			
			//title horloge
			document.getElementById("circle"+cont).setAttribute("title", heure_decalage + ":" + minute);
			
			heure.setAttribute('transform', 'rotate('+ heure_calc +" "+ x +" "+ y +')');
			
			min.setAttribute('transform', 'rotate('+ minute_calc +" "+ x +" "+ y +')');
			sec.setAttribute('transform', 'rotate('+ seconde_calc +" "+ x +" "+ y +')');
			//setTimeout("r(x,y,diametre,decalage,cont)", 1000); 
	
		}, 1000)
	
	}
	
	var x = 500;
	var y = 250;
	
	var x1 = 200;
	var y1 = 100;
	
	var diametre = 100;

	var decalage = 0; 
	
	horloge_dynamique(200,200,diametre,decalage);
	
	horloge_dynamique(100,100,diametre,decalage);
<svg id="svg" width="100%" height="800">
</svg>

javascript svg
  • 2

    Please present a more succinct version of your problem and put the whole dog in the question itself instead of linking to an external site (Stackoverflow is also able to run javascript snippets if you want). The current way is a little difficult to understand your question and your code has many unnecessary details.

  • I just didn’t understand why I took -1 if the explanation was pertinent, I just hadn’t put the source code.

2 answers

4


Your main problem is the variable cont which is only one, and not one per clock. I just entered a variable myCont per watch and use it instead of the cont that worked.

Here is the jsfiddle: https://jsfiddle.net/p7L3jf5L/

Here comes the code:

var cont = 0;

function horloge_dynamique(x, y, diametre, decalage) {

    var myCont = cont;
    var svg = document.getElementById('svg');
    cont++;

    //cree circle
    var newCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    newCircle.setAttributeNS(null, 'id', 'circle' + myCont);
    newCircle.setAttributeNS(null,'stroke-width', 2);
    newCircle.setAttributeNS(null,'stroke', 'black');
    newCircle.setAttributeNS(null,'fill', 'Aqua');
    svg.appendChild(newCircle);

    //cree aiguille heure
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'heure' + myCont);
    newLine.setAttributeNS(null, "stroke", "red");
    newLine.setAttributeNS(null, "stroke-width", "4");
    svg.appendChild(newLine);

    //cree aiguille minute
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'min' + myCont);
    newLine.setAttributeNS(null, "stroke", "orange");
    newLine.setAttributeNS(null, "stroke-width", "2");
    svg.appendChild(newLine);

    //cree aiguille seconde
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'sec' + myCont);
    newLine.setAttributeNS(null, "stroke", "black");
    newLine.setAttributeNS(null, "stroke-width", "1");
    svg.appendChild(newLine);

    //var circle = document.getElementById("circle_horloge");
    var circle = document.getElementById("circle" + myCont);
    circle.setAttribute("cx", x);
    circle.setAttribute("cy", y);
    circle.setAttribute("r", diametre);

    //heure
    //var aiguille_heure = document.getElementById("heure");
    var aiguille_heure = document.getElementById("heure" + myCont);
    aiguille_heure.setAttribute("x1", x);
    aiguille_heure.setAttribute("y1", y);
    aiguille_heure.setAttribute("x2", x);
    aiguille_heure.setAttribute("y2", (y - diametre) + diametre / 3);

    //minutes
    var aiguille_min = document.getElementById("min" + myCont);
    aiguille_min.setAttribute("x1", x);
    aiguille_min.setAttribute("y1", y);
    aiguille_min.setAttribute("x2", x);
    aiguille_min.setAttribute("y2", (y - diametre) + diametre / 5);

    //secondes
    var aiguille_sec = document.getElementById("sec" + myCont);
    aiguille_sec.setAttribute("x1", x);
    aiguille_sec.setAttribute("y1", y);
    aiguille_sec.setAttribute("x2", x);
    aiguille_sec.setAttribute("y2", y - diametre);


    setInterval(function(){ 
        var d = new Date(); //date

        var heure_decalage = d.getHours() + decalage;
        var minute = d.getMinutes();
        var seconds = d.getSeconds();

        var heure_calc = (30 * ((heure_decalage) % 12) + (d.getMinutes() / 2));
        var minute_calc = 6 * minute;
        var seconde_calc = 6 * seconds;

        var heure = document.getElementById("heure" + myCont);
        var min = document.getElementById("min" + myCont);
        var sec = document.getElementById("sec" + myCont);

        //title horloge
        document.getElementById("circle" + myCont).setAttribute("title", heure_decalage + ":" + minute);

        heure.setAttribute('transform', 'rotate(' + heure_calc + " " + x + " " + y + ')');

        min.setAttribute('transform', 'rotate(' + minute_calc + " " + x + " " + y + ')');
        sec.setAttribute('transform', 'rotate(' + seconde_calc + " " + x + " " + y + ')');
        //setTimeout("r(x, y, diametre, decalage, myCont)", 1000); 
    }, 1000);
}

var x = 500;
var y = 250;

var x1 = 200;
var y1 = 100;

var diametre = 100;

var decalage = 0; 

horloge_dynamique(200, 200, diametre, decalage);

horloge_dynamique(100, 100, diametre, decalage);
<svg id="svg" width="100%" height="800">
</svg>

  • solved, mycount generates another ID made by changing the function signature instead of changing all lines within the function, but, ta solved equal.

  • @Maisonsakamoto Nice that you came to this too, but know that I was not the one who denied your answer. On the contrary, I just gave you +1 too.

3

where it is written getElementById javascript will take only the first element that has this ID, to make 2 watches, will have to change its code to catch adjust that part.

https://jsfiddle.net/p53xcwcj/3/

HTML

<svg id="svg01" width="100%" height="800">    </svg>
<svg id="svg02" width="100%" height="800">    </svg>

JAVASCRIPT

    //var cont = 0;

function horloge_dynamique(id,cont,x,y,diametre,decalage){

    var svg = document.getElementById(id);
    //cont++;

    //cree circle
    var newCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    newCircle.setAttributeNS(null, 'id', 'circle' + cont);
    newCircle.setAttributeNS(null,'stroke-width',2);
    newCircle.setAttributeNS(null,'stroke','black');
    newCircle.setAttributeNS(null,'fill','Aqua');
    svg.appendChild(newCircle);

    //cree aiguille heure
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'heure' + cont);
    newLine.setAttributeNS(null, "stroke","red");
    newLine.setAttributeNS(null, "stroke-width","4");
    svg.appendChild(newLine);

    //cree aiguille minute
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'min' + cont);
    newLine.setAttributeNS(null, "stroke","orange");
    newLine.setAttributeNS(null, "stroke-width","2");
    svg.appendChild(newLine);

    //cree aiguille seconde
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'sec' + cont);
    newLine.setAttributeNS(null, "stroke","black");
    newLine.setAttributeNS(null, "stroke-width","1");
    svg.appendChild(newLine);

    //var circle = document.getElementById("circle_horloge");
    var circle = document.getElementById("circle" + cont);
    circle.setAttribute("cx",x);
    circle.setAttribute("cy",y);
    circle.setAttribute("r",diametre);

    //heure
    //var aiguille_heure = document.getElementById("heure");
    var aiguille_heure = document.getElementById("heure"+ cont);
    aiguille_heure.setAttribute("x1",x);
    aiguille_heure.setAttribute("y1",y);
    aiguille_heure.setAttribute("x2",x);
    aiguille_heure.setAttribute("y2",(y-diametre)+diametre/3);

    //minutes
    var aiguille_min = document.getElementById("min"+ cont);
    aiguille_min.setAttribute("x1",x);
    aiguille_min.setAttribute("y1",y);
    aiguille_min.setAttribute("x2",x);
    aiguille_min.setAttribute("y2",(y-diametre)+diametre/5);

    //secondes
    var aiguille_sec = document.getElementById("sec"+cont);
    aiguille_sec.setAttribute("x1",x);
    aiguille_sec.setAttribute("y1",y);
    aiguille_sec.setAttribute("x2",x);
    aiguille_sec.setAttribute("y2",y-diametre);


    setInterval(function(){ 
        var d = new Date(); //date

        var heure_decalage = d.getHours()+decalage;
        var minute = d.getMinutes();
        var seconds = d.getSeconds();

        var heure_calc = (30*((heure_decalage)%12) + (d.getMinutes()/2));
        var minute_calc = 6*minute;
        var seconde_calc = 6*seconds;

        var heure = document.getElementById("heure"+ cont);
        var min = document.getElementById("min"+ cont);
        var sec = document.getElementById("sec"+ cont);

        //title horloge
        document.getElementById("circle"+cont).setAttribute("title", heure_decalage + ":" + minute);

        heure.setAttribute('transform', 'rotate('+ heure_calc +" "+ x +" "+ y +')');

        min.setAttribute('transform', 'rotate('+ minute_calc +" "+ x +" "+ y +')');
        sec.setAttribute('transform', 'rotate('+ seconde_calc +" "+ x +" "+ y +')');
        //setTimeout("r(x,y,diametre,decalage,cont)", 1000); 

    }, 1000)

}

var x = 500;
var y = 250;

var x1 = 200;
var y1 = 100;

var diametre = 100;

var decalage = 0; 

horloge_dynamique('svg01',1,x,y,diametre,decalage);

horloge_dynamique('svg02',2,x1,y1,diametre,decalage);

Browser other questions tagged javascript svg

You are not signed in. Login or sign up in order to post.