I've got some troubles with return

Question

I have a trouble: when button onclicked, I need to return position of a block and hold it till next onclick. On next click, I need to take position and change it again and hold its number. And make it for eternity xD. But I've done something wrong. Please help.
And one thing more: I need to make a reset position by clicking reset button. Reset must be to the 1.

 window.onload = function core() { // creating elements let platform = document.createElement('div'); platform.setAttribute('id', 'platform'); document.body.appendChild(platform); let up = document.createElement('button'); up.setAttribute('id', 'up'); up.setAttribute('class', 'actionButton'); document.body.appendChild(up); document.getElementById('up').innerHTML = 'up'; let down = document.createElement('button'); down.setAttribute('id', 'down'); down.setAttribute('class', 'actionButton'); document.body.appendChild(down); document.getElementById('down').innerHTML = 'down'; let left = document.createElement('button'); left.setAttribute('id', 'left'); left.setAttribute('class', 'actionButton'); document.body.appendChild(left); document.getElementById('left').innerHTML = 'left'; let right = document.createElement('button'); right.setAttribute('id', 'right'); right.setAttribute('class', 'actionButton'); document.body.appendChild(right); document.getElementById('right').innerHTML = 'right'; let reset = document.createElement('button'); reset.setAttribute('id', 'reset'); reset.setAttribute('class', 'actionButton'); document.body.appendChild(reset); document.getElementById('reset').innerHTML = 'reset'; // binding platform let count = 0; let defaultPosition = 1; for (let i = 1; i < 101; i++) { let grid = document.createElement('button'); grid.setAttribute('id', i); grid.setAttribute('class', 'eachGridBlock'); document.getElementById('platform').appendChild(grid); count++; if (count === 10) { let newLine = document.createElement('br'); document.getElementById('platform').appendChild(newLine); count = 0; }; }; // waiting for action document.getElementById(defaultPosition).setAttribute('class', 'focusedBlock'); console.log(defaultPosition); document.getElementById('up').onclick = function() { processUp(defaultPosition) }; document.getElementById('down').onclick = function() { processDown(defaultPosition) }; document.getElementById('left').onclick = function() { processLeft(defaultPosition) }; document.getElementById('right').onclick = function() { processRight(defaultPosition) }; document.getElementById('reset').onclick = function() { processReset(defaultPosition) }; // action functions function processUp(positionX) { let nowPosition = positionX; if (nowPosition <= 10) { alert('you cant step here'); } else { let nextPosition = nowPosition - 10; document.getElementById(nowPosition).setAttribute('class', 'eachGridBlock'); document.getElementById(nextPosition).setAttribute('class', 'focusedBlock'); positionX = nextPosition; }; console.log(positionX); return positionX; }; function processDown(positionX) { let nowPosition = positionX; if (nowPosition >= 91) { alert('you cant step here'); } else { let nextPosition = nowPosition + 10; document.getElementById(nowPosition).setAttribute('class', 'eachGridBlock'); document.getElementById(nextPosition).setAttribute('class', 'focusedBlock'); positionX = nextPosition; }; console.log(positionX); return positionX; }; function processLeft(positionX) { let nowPosition = positionX; if (nowPosition === 1 || nowPosition === 11 || nowPosition === 21 || nowPosition === 31 || nowPosition === 41 || nowPosition === 51 || nowPosition === 61 || nowPosition === 71 || nowPosition === 81 || nowPosition === 91) { alert('you cant step here'); } else { let nextPosition = nowPosition - 1; document.getElementById(nowPosition).setAttribute('class', 'eachGridBlock'); document.getElementById(nextPosition).setAttribute('class', 'focusedBlock'); positionX = nextPosition; }; console.log(positionX); return positionX; }; function processRight(positionX) { let nowPosition = positionX; if (nowPosition === 10 || nowPosition === 20 || nowPosition === 30 || nowPosition === 40 || nowPosition === 50 || nowPosition === 60 || nowPosition === 70 || nowPosition === 80 || nowPosition === 90 || nowPosition === 100) { alert('you cant step here'); } else { let nextPosition = nowPosition + 1; document.getElementById(nowPosition).setAttribute('class', 'eachGridBlock'); document.getElementById(nextPosition).setAttribute('class', 'focusedBlock'); positionX = nextPosition; }; console.log(positionX); return positionX; }; function processReset(positionX) { let nowPosition = positionX let nextPosition = 1; document.getElementById(nowPosition).setAttribute('class', 'eachGridBlock'); document.getElementById(nextPosition).setAttribute('class', 'focusedBlock'); return positionX; }; }; 

 * { margin: 0; padding: 0; } #plarform { width: 500px; height: 500px; background-color: #222222; } .eachGridBlock { margin: 0; padding: 0; width: 50px; height: 50px; background-color: #000044; border: 0; } .focusedBlock { margin: 0; padding: 0; width: 50px; height: 50px; background-color: #9900ff; border: 0; } .actionButton { border: 0; width: 100px; height: 35px; background-color: #999999; color: #222222; outline: none; } .actionButton:hover { background-color: #dddddd; } 

 <html> <head> </head> <body> </body> </html> 

Answer 1

You need to update defaultPosition when you call the functions, eg

document.getElementById('right').onclick = function() {
    defaultPosition = processRight(defaultPosition)
};