javascript值在onmousevent之后没有更新

Posted 2023-05-06

【中文标题】javascript值在onmousevent之后没有更新

【英文标题】：javascript value is not updating after onmousevent

【发布时间】：2018-10-16 04:31:39

【问题描述】：

我目前使用 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

【问题讨论】：

您从全局代码中调用 numberOne 和 imgNumber，所以是的，numberOne.last 和在 demo 元素中（假设代码在元素存在之后运行）。是的，代码对于它正在实现的逻辑来说非常混乱。

你能帮我解决一下吗？

【参考方案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>

【参考方案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>

【讨论】：

我不想每次都获得不同的元素，我希望每次鼠标悬停都有不同的图像。但不应连续出现 2 张相同的图像。我会试试你的代码！我会告诉你的

我也不明白怎么用图片号影响游戏