когда я запускаю .onclick, он запускается один раз, а затем снова не работает - PullRequest
Новая
       8

когда я запускаю .onclick, он запускается один раз, а затем снова не работает

0 голосов
/ 11 декабря 2019

, насколько я понимаю, .onclick, должно работать каждый раз, когда я нажимаю кнопку, однако это работает только один раз. Это мой код до сих пор 

var left = document.getElementById("left");
left.onclick = moveLeft;

function moveLeft() {
  var box = document.getElementById("box1");
  var pos = 200;
  if (pos < 500) {
    pos = pos + 50
    box.style.right = pos + "px";
  }
};
#container {
  width: 500px;
  height: 650px;
  background: black;
  position: relative;
}

#left {
  width: 250px;
  height: 650px;
  position: relative;
  background: transparent;
}

#right {
  left: 250px;
  top: 0px;
  width: 250px;
  height: 650px;
  position: absolute;
  background: transparent;
}

#box1 {
  width: 100px;
  height: 100px;
  right: 200px;
  background: red;
  position: absolute;
}

.grid {
  background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px);
  background-size: 50px 50px;
  height: 100%;
  position: absolute;
  width: 100%;
}
<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tetris</title>
  <link rel="stylesheet" href="styleSheets/main.css">
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script src="js/jquery.1.js"></script>
  <script src="js/main.js"></script>
</head>

<body>
  <div id="container">
    <div class="grid"></div>
    <div id="box1"></div>
    <div id="left" onclick="moveLeft()"></div>
    <div id="right"></div>
  </div>
</body>

</html>

Как я уже сказал, это работает, но только один раз, оно сдвигает коробку влево на одну клетку, но не должно останавливаться до тех пор, пока5 квадратов. пожалуйста, помогите ...

Ответы [ 3 ]

1 голос
/ 11 декабря 2019

Либо сделайте pos глобальным, как показано ниже:

, либо установите его динамически в функции. 

var left = document.getElementById("left");
left.onclick = moveLeft;
var pos = 200;

function moveLeft() {
  var box = document.getElementById("box1");

  if (pos < 500) {
    pos = pos + 50
    box.style.right = pos + "px";
  }
};
#container {
  width: 500px;
  height: 650px;
  background: black;
  position: relative;
}

#left {
  width: 250px;
  height: 650px;
  position: relative;
  background: transparent;
}

#right {
  left: 250px;
  top: 0px;
  width: 250px;
  height: 650px;
  position: absolute;
  background: transparent;
}

#box1 {
  width: 100px;
  height: 100px;
  right: 200px;
  background: red;
  position: absolute;
}

.grid {
  background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px);
  background-size: 50px 50px;
  height: 100%;
  position: absolute;
  width: 100%;
}
<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tetris</title>
  <link rel="stylesheet" href="styleSheets/main.css">
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script src="js/jquery.1.js"></script>
  <script src="js/main.js"></script>
</head>

<body>
  <div id="container">
    <div class="grid"></div>
    <div id="box1"></div>
    <div id="left" onclick="moveLeft()"></div>
    <div id="right"></div>
  </div>
</body>

</html>
1 голос
/ 11 декабря 2019

Первый ответ правильный, ваша переменная pos переоценивается в 200 при каждом нажатии кнопки. Так что это всего лишь от 200 до 250 каждый раз. Это выглядит одинаково каждый раз. попробуй так: 

var left = document.getElementById("left");
left.onclick = moveLeft;

var pos = 200;
function moveLeft() {
  var box = document.getElementById("box1");
  if (pos < 500) {
    pos = pos + 50
    box.style.right = pos + "px";
  }
};
1 голос
/ 11 декабря 2019

Это потому, что ваша переменная pos определена внутри функции moveLeft. Каждый раз, когда выполняется функция, pos всегда равен 200. Определите его вне функции moveLeft.

...