每次单击Javascript时移动图像

Question

我想在每次点击时移动图像，但使用此代码只能在一次点击时工作。

function moveright() {
  console.log("moveright invoked.");
  var myImg = document.getElementById("image");
  myImg.style.position = "absolute";
  var cLeft = myImg.style.left;
  if (cLeft == 500) {
    console("Maximum reached.");
  } else {
    myImg.style.left = (cLeft + 50) + "px";
  }
}

<img id="image" src="https://i.stack.imgur.com/TiYE3.jpg?s=32&g=1" onclick="moveright()" />

Answer 1

1. 给出初始左侧位置值。您可以添加如下内联样式：style="left: 0px"
2. 在向它添加50 px之前将左值解析为整数：var cLeft = parseInt(myImg.style.left);

function moveright() {
  var myImg = document.getElementById("image");
  myImg.style.position = "absolute";
  var cLeft = parseInt(myImg.style.left);
  
  if (cLeft == 500) {
    console("Maximum reached.");
  } else {
    myImg.style.left = (cLeft + 50) + "px";
  }  
}

<img id="image" src="https://i.stack.imgur.com/TiYE3.jpg?s=32&g=1" onclick="moveright()"  style="left: 0px" />

或者，您可以跳过left样式声明并使用window.getComputedStyle获取计算出的样式值。

function moveright() {
  var myImg = document.getElementById("image");
  myImg.style.position = "absolute";
  
  var cLeft = parseInt(window.getComputedStyle(myImg).left);
  
  if (cLeft == 500) {
    console("Maximum reached.");
  } else {
    myImg.style.left = (cLeft + 50) + "px";
  }  
}

<img id="image" src="https://i.stack.imgur.com/TiYE3.jpg?s=32&g=1" onclick="moveright()" />

Answer 2

使用parseInt，因为style.left在px中有价值。如果style.left为空，则将0作为初始值传递。

function moveright() {
  var myImg = document.getElementById("image");
  myImg.style.position = "absolute";
  var cLeft = parseInt(myImg.style.left || 0);

  if (cLeft == 500) {
    alert("Maximum reached.");
  } else {
    myImg.style.left = (cLeft + 50) + "px";
  }
}

<img id="image" src="https://i.stack.imgur.com/TiYE3.jpg?s=32&g=1" onclick="moveright()" />