значение JavaScript не обновляется после onmousevent

Question

В данный момент я использую 1 тег span.

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

используйте функцию-обертку, где вы можете вызывать 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-адреса изображений в массив и случайным образом выберите один, чтобы он отличался от предыдущего. Это означает, что вы можете добавлять или уменьшать изображения, которые хотите отобразить, просто изменив массив изображений.

Также поместите все свои данные в объект, а не с помощью глобальных переменных, это просто аккуратно. И дайте своим функциям имена, которые сообщают вам, что они делают.

* 1005 Е.Г. *

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>