javascript值在onmousevent之后没有更新

Question

我目前使用 1 个 span 标签。

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

span有一个“默认”的图像，当鼠标移到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;

随机数在这里生成。所以每次离开span，再上span，都会有不同的形象。

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

使用包装函数，您可以同时调用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>

Answer 2

您的代码有点不合逻辑。似乎您想将图像随机分配给元素背景并每次都获得不同的元素。因此，将图像 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>