"Exploring the Art of Showcasing Duplicate Image Count from User Input in an

Question

"Exploring the Art of Showcasing Duplicate Image Count from User Input in an

I need to showcase multiple duplicates of 2 different images on a webpage. Users are asked for the duplication speed, which I have already implemented, and also how many copies of each image they want.

function show_image() {
  var img = document.createElement("img");
  var img2 = document.createElement("img");
  img.src = "map.png";
  img2.src = "figure-front.png";
  document.body.appendChild(img);
  document.body.appendChild(img2);
  setTimeout("show_image()", speed);
  max = 0;
  max++
  if (max = count) {
    return;
  }
}

<!DOCTYPE HTML>

<html lang="en">

<head>
  <meta charset="UTF-8>
  <title>JavaScript Slide Show</title>
  <script src="ShowImages3.js></script>
  <script>
    var speed = prompt("Enter the speed at which you want to duplicate", "");
    var count = prompt("Enter how many copies of each image you want to display", "");
  </script>
</head>

<body onLoad="show_image()">

</body>

</html>

Nevertheless, it seems to be running indefinitely

javascript html image prompt

Answer 1

Answer №1

To fix the issue, make sure to move the setTimeout function and use either == or === for comparison instead of = which is for assignment.

Avoid using body onload and opt for an eventListener instead as it is considered better practice.

Here is a more organized version utilizing setInterval. I have also used >= in the test condition.

I set an empty string for the speed and prompt values so that I can check if they exist using if (speed && prompt) after converting them to numbers with the unary plus operator. Note that I did not include checks for inputs other than numbers and empty strings.

let count = 0, cnt = 0, tId;

const show_image = () => {
  if (cnt >= count) {
    clearInterval(tId); // stop
    return;
  }
  const img = document.createElement("img");
  const img2 = document.createElement("img");
  img.src = "map.png";
  img2.src = "figure-front.png";
  document.body.appendChild(img);
  document.body.appendChild(img2);
  cnt++; // next
};
window.addEventListener("DOMContentLoaded", () => {
  let speed = +prompt("Type how fast you want to duplicate", "");
  count = +prompt("Type how many image of each you want to duplicate", "");

  if (speed && prompt) tId = setInterval(show_image, speed)

});

Alternatively, consider encapsulating the variables like this:

const generate = (count, speed) => {
  let cnt = 0;
  let tId;

  const addImages = () => {
    if (cnt >= count) {
      clearInterval(tId); // stop
      return;
    }
    const img = document.createElement("img");
    const img2 = document.createElement("img");
    img.src = "map.png";
    img2.src = "figure-front.png";
    document.body.appendChild(img);
    document.body.appendChild(img2);
    cnt++; // next
  };

  tId = setInterval(addImages, speed);
};

window.addEventListener("DOMContentLoaded", () => {
  let speed = +prompt("Type how fast you want to duplicate", "");
  let count = +prompt("Type how many image of each you want to duplicate", "");

  if (speed && count) {
    generate(count, speed);
  }
});

Answer 2

To fix the issue, make sure to move the setTimeout function and use either == or === for comparison instead of = which is for assignment.

Avoid using body onload and opt for an eventListener instead as it is considered better practice.

Here is a more organized version utilizing setInterval. I have also used >= in the test condition.

I set an empty string for the speed and prompt values so that I can check if they exist using if (speed && prompt) after converting them to numbers with the unary plus operator. Note that I did not include checks for inputs other than numbers and empty strings.

let count = 0, cnt = 0, tId;

const show_image = () => {
  if (cnt >= count) {
    clearInterval(tId); // stop
    return;
  }
  const img = document.createElement("img");
  const img2 = document.createElement("img");
  img.src = "map.png";
  img2.src = "figure-front.png";
  document.body.appendChild(img);
  document.body.appendChild(img2);
  cnt++; // next
};
window.addEventListener("DOMContentLoaded", () => {
  let speed = +prompt("Type how fast you want to duplicate", "");
  count = +prompt("Type how many image of each you want to duplicate", "");

  if (speed && prompt) tId = setInterval(show_image, speed)

});

Alternatively, consider encapsulating the variables like this:

const generate = (count, speed) => {
  let cnt = 0;
  let tId;

  const addImages = () => {
    if (cnt >= count) {
      clearInterval(tId); // stop
      return;
    }
    const img = document.createElement("img");
    const img2 = document.createElement("img");
    img.src = "map.png";
    img2.src = "figure-front.png";
    document.body.appendChild(img);
    document.body.appendChild(img2);
    cnt++; // next
  };

  tId = setInterval(addImages, speed);
};

window.addEventListener("DOMContentLoaded", () => {
  let speed = +prompt("Type how fast you want to duplicate", "");
  let count = +prompt("Type how many image of each you want to duplicate", "");

  if (speed && count) {
    generate(count, speed);
  }
});

"Exploring the Art of Showcasing Duplicate Image Count from User Input in an

Answer №1

Similar questions

Preventing multiple clicks by toggling the HTML tag on and off

Is there a way to retrieve the current object as a JSON string from inside the object using either jquery or javascript?

NextJS: Retrieve the information in its initial state

A guide on adding a personal library to Ember using npm

Events are not being triggered when using node busboy with express 4 and ng-file-upload

I'm attempting to install the "firebase" package using npm, but I keep encountering a python-related error message during the installation process

Customizing checkbox appearance without including a label

Having trouble with your Bootstrap Accordion panels?

Is there any more Angular code to be bound using ng-bind-html or ng-bind?

Troubleshooting Automatic Scrolling Problems in React Virtualized

Utilizing .env Variables in NestJS Main App Module for Establishing Database Connection

`Is there a way to avoid extra re-renders caused by parameters in NextJS?`

What is the best way to include a substantial amount of HTML in a Vue.js template?

A guide on retrieving bytecode from a specific PDF using Angular

Vue transition isn't functioning correctly without the specified mode parameter of 'out-in'

Steps to align table next to the paragraph tag

Using Angular.js to fetch information from a MySQL database

Using Selenium Webdriver to target and trigger an onclick event through a CSS selector on a flight booking

AngularJS Error: Attempting to Access Undefined Object - Jasmine Testing

What strategies can be implemented to increase the number of backlinks?