javascript onmousevent 后值未更新

Question

我目前使用 1 个 span 标签。

<span onmouseover="numberOne()" onclick="imgNumber(); return false"  onmouseout="noHoverOne()" class="img1 img" id="new-img"> </span>

span有一张"deafult"图片，当鼠标移到span上时，会显示另一张图片，当鼠标离开span时，会再次显示默认图片。

现在 javascript：

function numberOne() {
  var random2 = Math.floor((Math.random() * 3) + 1);
  var random3 = Math.floor((Math.random() * 3) + 1);

  do {
    var random = Math.floor((Math.random() * 3) + 1);
  } while (random === numberOne.last);

  numberOne.last = random;

这里生成随机数。所以每次离开跨度，继续跨度，都会有不同的影像。

if (random == 2) {
  document.getElementById('new-img').style = "background-image: url('http://web-stars.nl/molgeld.jpg');";
} else if ((random==random2)==random3) {
  document.getElementById('new-img').style = "background-image: url('http://web-stars.nl/vrijstelling.jpg');";
} else {
  document.getElementById('new-img').style = "background-image: url('http://web-stars.nl/haspel.jpg');";
}

这些是将根据数量显示的图像

  return random;
}

var value = numberOne();

function imgNumber() {
  document.getElementById('demo').innerHTML = value;                
}

imgNumber();

这就是我卡住的地方。在我用鼠标触摸 span 标签之前，已经有一个随机数，当我将鼠标放在 span 标签上时，它会显示不同的图像，但不会显示不同的数字。我想以某种方式使用这个数字来为我的游戏创建一个新关卡。游戏受所选图像的影响。

所以发生了很多事情，而且非常混乱。所以拜托，我很乐意听到任何类型的建设性反馈。

[编辑] 我会保持 JSfiddle 是最新的，但是预览中有错误，它不会显示任何内容。还是有用的Jsfiddle

Answer 1

你的代码有点不合逻辑。似乎您想将图像随机分配给元素背景并每次获取不同的元素。因此，将图像 URL 放在一个数组中并随机抓取一个，确保它与上一个不同。这意味着您可以通过修改图像数组来添加或减少要显示的图像。

同样将所有数据放在一个对象中而不是使用全局变量，这样更简洁。并为您的函数命名，告诉您它们的作用。

例如

var imageData = {
  pix: ['http://web-stars.nl/molgeld.jpg',
    'http://web-stars.nl/vrijstelling.jpg',
    'http://web-stars.nl/haspel.jpg'
  ],
  random: null
}

function changeImage(el) {
  // limit do loop just in case data is bad
  // Infinite loops are bad...
  var len = imageData.pix.length;
  var i = len;

  do {
    var random = Math.random() * len | 0;
  } while (i-- && imageData.random == random)

  imageData.random = random;
  el.style.backgroundImage = imageData.pix[random];
  console.log(random, imageData.pix[random]);
}

function updateImageRef() {
  document.getElementById('imageRef').textContent = imageData.random;
}

<div id="imageDiv" onmouseover="changeImage(this)" onclick="updateImageRef()">Image div</div>
<div id="imageRef"><div>

Answer 2

使用包装函数，您可以在其中调用 imgNumber 和 numberOne

function mouseHover() {
  var value = numberOne()
  imgNumber(value)
}

function imgNumber(value) {
  document.getElementById('demo').innerHTML = value;              
}

<span onmouseover="mouseHover()" onclick="imgNumber(); return false"  onmouseout="noHoverOne()" class="img1 img" id="new-img"> </span>

javascript onmousevent 后值未更新

javascript value is not updating after onmousevent

html

javascript

feedback