Используйте math.random для создания изображений

#javascript

Вопрос:

На моем веб-сайте есть две картинки, когда я нажимаю на одну из картинок, я хочу, чтобы мой код распечатал кошку или лягушку, используя Math.random.я хочу, чтобы это было случайным, я хочу, чтобы пользователь также получил сообщение, которое сообщит им, правы они или нет.

 var outputDiv = document.getElementById("output-div");

var randomNumber;
var message;

function setRandomNumber() {
  randomNumber = Math.floor(Math.random() * 100   1);
}

function setMessage() {
  var image;

  if (randomNumber <= 50) {
    image = "cat.jpg";
  } else {
    image = "frog.jpg";
  }
  message = `
        <h3>${image}</h3>
        <img src="img/${image}"/>
        `;
}

function showMessage() {
  outputDiv.innerHTML = message;
}

function initLuckyDay() {
  setRandomNumber();
  setMessage();
  showMessage();
}

initLuckyDay();

 <h3>Click the one that you think have a cat!</h3>
<div id="output-div"></div>
<input type="image" src="img/person1.jpg" name="click" class="button" id="clickme" />
<input type="image" src="img/person2.jpg" name="click" class="button" id="clickme" />

1. В чем заключается ваш вопрос? С какой частью вам нужна помощь? Что-то не работает?

2. получите случайное число, проверьте, четное оно или нечетное. если даже показать фотографию кошки, если нечетно напечатать фотографию собаки. это подсказка, которую я могу вам дать. отдыхайте, с вашим кодом все в порядке

Ответ №1:

Вы должны иметь возможность объединить все эти функции в одну функцию. Я бы использовал .setAttribute() , чтобы изменить источник изображения и .innerText изменить отображение сообщений.

     const h3Message = document.getElementById('message'),
        htmlImg = document.getElementById('displayImg');

    function setImage() {
        let random = Math.random(); // generate a random number
        if (random < 0.5) {
            // set the source of the image
            htmlImg.setAttribute('src', 'dog.png');
        } else {
            htmlImg.setAttribute('src', 'cat.png');
        }
        // display the message
        h3Message.innerText = htmlImg.getAttribute('src');
    }

Чтобы сделать это таким образом, вам нужно установить идентификаторы для HTML-элементов.

 <h3 id="message"></h3>
<img id="displayImg" />