Trying to put repetitive code in a function, I think I am messing up strings somewhere

Question

I built a little breathing app http://cheel.me/ but I know that the javascript is especially spaghetti- like and not how I should be doing it.

I wanted to put all the repeated stuff into a function but I think the way I am inserting the animation duration is wrong but cant seem to work it out.

This is the original Javascript want to make into a nicer function.

var breatheAnimation = document.getElementById("circleanim");

$('#5seconds').click(function () {
        breatheAnimation.style.animation = "breathe 10s infinite ease both";
        document.getElementById("in").style.animation = "in 10s infinite ease";
        document.getElementById("out").style.animation = "out 10s infinite ease";
        this.classList.add("active");
        document.getElementById("6seconds").classList.remove("active");
        document.getElementById("7seconds").classList.remove("active");
        document.getElementById("8seconds").classList.remove("active");
});

$('#6seconds').click(function () {
        breatheAnimation.style.animation = "breathe 12s infinite ease both";
        document.getElementById("in").style.animation = "in 12s infinite ease";
        document.getElementById("out").style.animation = "out 12s infinite ease";
        this.classList.add("active");
        document.getElementById("5seconds").classList.remove("active");
        document.getElementById("7seconds").classList.remove("active");
        document.getElementById("8seconds").classList.remove("active");
});

$('#7seconds').click(function () {
        breatheAnimation.style.animation = "breathe 14s infinite ease both";
        document.getElementById("in").style.animation = "in 14s infinite ease";
        document.getElementById("out").style.animation = "out 14s infinite ease";
        this.classList.add("active");
        document.getElementById("5seconds").classList.remove("active");
        document.getElementById("6seconds").classList.remove("active");
        document.getElementById("8seconds").classList.remove("active");
});

$('#8seconds').click(function () {
        document.getElementById("circleanim").style.animation = "breathe 16s infinite ease both";
        document.getElementById("in").style.animation = "in 16s infinite ease";
        document.getElementById("out").style.animation = "out 16s infinite ease";
        this.classList.add("active");
        document.getElementById("5seconds").classList.remove("active");
        document.getElementById("7seconds").classList.remove("active");
        document.getElementById("6seconds").classList.remove("active");
});

And this is where I got to but I am pretty sure the way I am adding duration is wrong but I'm struggling to google the right answer

var breatheAnimation = document.getElementById("circleanim");

function changeDuration(duration) {
    breatheAnimation.style.animation = "breathe  " . duration . "s infinite ease both";
    document.getElementById("in").style.animation = "in " . duration . "s infinite ease";
    document.getElementById("out").style.animation = "out " . duration . "s infinite ease";
    this.classList.add("active");
};

$('#5seconds').click.changeDuration(10);
$('#6seconds').click.changeDuration(12);
$('#7seconds').click.changeDuration(14);
$('#8seconds').click.changeDuration(16);

I keep on getting "unexpected string" errors in the console. I know I haven't added in a loop or an if/else statement to remove the active class. But I'll get to that!!

Answer 1

Use the JavaScript concatenation operator + instead of . (which is PHP's for instance)

breatheAnimation.style.animation = "breathe  " + duration + "s infinite ease both";