Pomodoro Clock - trouble setting time

Question

I'm brand new to Stack Overflow and pretty new to coding. This Pomodoro clock is the first thing I've ever made without following a tutorial. I'm wondering how to fix it, and moreso why a few things are behaving as they are. My questions/issues:

1. The first time I click the + or -, the set time doesn't move...on the second click it starts to work. Why?
2. The time in the middle moves up and down when I change the set time, but it's always off by 1...furthermore, if the set time says 27, the time in the middle will say 28, and console.log(x) will say 29. What's happening here?
3. How do I connect the time in the middle so that when I click "start timer", it starts from that time?

My clock: https://codepen.io/phershbe/pen/gxOKYz

The JavaScript code:

var minutes;
var clockSeconds;
var time;
var x = 25;
var seconds = x * 60;


function countdown() {
    setInterval("count()", 1000);
}

function minutesSeconds() {
    minutes = Math.floor(seconds / 60);
    if (seconds >= 60) {
        clockSeconds = seconds % 60;
    };
    if (seconds < 60) {
        clockSeconds = seconds;
    }
}

function defineTime() {
    time = minutes + ":" + (clockSeconds < 10 ? "0" : "") + clockSeconds;
}


function count() {
    minutesSeconds();
    defineTime();
    document.getElementById("timeLeft").innerHTML = time;
    seconds--;
    if (seconds < 0) {
        document.getElementById("timeLeft").innerHTML = "Done";
    } 
}


function initialTime() {
    document.getElementById("chooseTime").innerHTML = x;
}

function mainTime() {
    document.getElementById("timeLeft").innerHTML = x + ":" + "0" + seconds % 60;
}

function allTime() {
    initialTime();
    mainTime();
}

function add() {
    document.getElementById("chooseTime").innerHTML = x++;  
    document.getElementById("timeLeft").innerHTML = x++;

}

function subtract() {
    document.getElementById("chooseTime").innerHTML = x--;
    document.getElementById("timeLeft").innerHTML = x--;
}

Thank you in advance to anyone who looks at this and/or answers. I know the code is a total mess and may be a debugging nightmare, but it's the first thing I've made and I'm proud I got this far with it.

Answer 1

1. When you write x++ it returns x and then adds 1 to x. Therefore on first click the value will always be 25. You should instead write ++x so that 1 is added to x before the value is returned. Have a look here for more info on how this works.
2. You're calling x++ twice. This means 1 is added to x each time and there will always be a difference between the the top and middle values. You should instead add 1 to x only the first time.
3. The updates to x aren't reflected on seconds (which is used in the timer). In your countdown() function set the value of seconds. i.e. seconds = x * 60; before starting up the timer.

Fixed JS:

var minutes;
var clockSeconds;
var time;
var x = 25;

function countdown() {
    seconds = x * 60;
    setInterval("count()", 1000);
}

function minutesSeconds() {
    minutes = Math.floor(seconds / 60);
    if (seconds >= 60) {
        clockSeconds = seconds % 60;
    };
    if (seconds < 60) {
        clockSeconds = seconds;
    }
}

function defineTime() {
    time = minutes + ":" + (clockSeconds < 10 ? "0" : "") + clockSeconds;
}


function count() {
    minutesSeconds();
    defineTime();
    document.getElementById("timeLeft").innerHTML = time;
    seconds--;
    if (seconds <= 0) {
        document.getElementById("timeLeft").innerHTML = "Done";
    } 
}


function initialTime() {
    document.getElementById("chooseTime").innerHTML = x;
}

function mainTime() {
    document.getElementById("timeLeft").innerHTML = x + ":" + "0" + seconds % 60;
}

function allTime() {
    initialTime();
    mainTime();
}

function add() {
    document.getElementById("chooseTime").innerHTML = ++x;  
    document.getElementById("timeLeft").innerHTML = x;

}

function subtract() {
    document.getElementById("chooseTime").innerHTML = --x;
    document.getElementById("timeLeft").innerHTML = x;
}