javascript - 我在返回方面遇到了一些麻烦

Question

我有一个麻烦:当按钮单击时，我需要返回 block 的位置并保持它直到下一次单击。下次单击时，我需要占据位置并再次更改它并保留其编号。并让它成为永恒xD。但我做错了什么。请帮忙。
还有一件事:我需要通过单击重置按钮来重置位置。重置必须为 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

调用函数时需要更新defaultPosition，例如

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