Utilizing an array to cycle through various images

Question

Utilizing an array to cycle through various images

Initially, I'm facing an issue with morscreens[i] not displaying the desired image from the array. When left as it is, it ends up showing a [<] button followed by "morscreens[i]" and then a [>] button. However, enclosing morscreens[i] in quotes causes an error stating that morshots() is not defined.

Furthermore, if I aim to cycle through the buttons, would it be advisable to utilize subroutines like morPrev() and morNext()? My concern revolves around potentially encountering scope-related challenges when trying to return the desired value and correctly placing it in the required locations. Simply incrementing and decrementing i using i++ and i-- may not suffice for achieving the intended functionality, even with the presence of 2 conditional statements.

var mordorscreens = new Array();
mordorscreens[0] = '<img src=\"http://i.imgur.com/83HCt.png\" alt=\"scrns1\">';
mordorscreens[1] = '<img src=\"http://i.imgur.com/5mWIy.png\" alt=\"scrns1\">';
mordorscreens[2] = '<img src=\"http://i.imgur.com/pPafl.png\" alt=\"scrns1\">';

function morshots()
{
    var i = 0;
    var mordor = document.getElementById("ss1");
    mordor.innerHTML = '<button onClick="morPrev();"> < </button> ' + mordorscreens[i] + ' <button onClick="morNext();"> > </button> ';

    if (i<0) {i=2};
    if (i>2) {i=0};
}

javascript arrays button

Answer 1

Answer №1

This particular line

'<button onClick="morPrev();"> < </button>    
                mordorscreens[i]    <button onClick="morNext();"> > </button> ';

was intended to appear like this

'<button onClick="morPrev();"> &lt; </button>' 
             + mordorscreens[i] + '<button onClick="morNext();"> &gt; </button>';

I believe it is not advisable to expose the variable i for iterating through the images. It would be better to set the event handlers in Javascript rather than in HTML.

You can test out this code

HTML

<div id="ss1">
   <button id="previous"> &lt; </button>
   <span id="imageSpan"></span>
   <button id="next"> &gt; </button>
</div>

Javascript

var mordorscreens = [];
mordorscreens[0] = '<img src="http://i.imgur.com/83HCt.png" alt="scrns1">';
mordorscreens[1] = '<img src="http://i.imgur.com/5mWIy.png" alt="scrns1">';
mordorscreens[2] = '<img src="http://i.imgur.com/pPafl.png" alt="scrns1">';

function morshots() {
    var i = 0;
    var elem = document.getElementById('imageSpan');
    elem.innerHTML = mordorscreens[i];
    // Data Attribute that holds the initial 
    // image number
    elem.setAttribute('data-number', i);
}
// Call The function
morshots();

// Assign Event handlers
var buttons = document.getElementsByTagName('button');

for (var j = 0; j < buttons.length; j++) {
    // Add Click events to the button
    buttons[j].addEventListener('click', clickHandler);
}

function clickHandler() {
    var elem = document.getElementById('imageSpan');
    // Store the current Image Number in a HTML5 data-attribute
    var currImage = parseInt(elem.getAttribute('data-number'), 10);
    if (this.id === 'previous') {
        currImage--;
        currImage = currImage < 0 ? 2 : currImage;
    }
    else if (this.id === 'next') {
        currImage++;
        currImage = currImage > 2 ? 0 : currImage;
    }
    // Set the current Image Number 
    elem.setAttribute('data-number', currImage);
    elem.innerHTML = mordorscreens[currImage];
}

Explore JSBin Demo

Answer 2

This particular line

'<button onClick="morPrev();"> < </button>    
                mordorscreens[i]    <button onClick="morNext();"> > </button> ';

was intended to appear like this

'<button onClick="morPrev();"> &lt; </button>' 
             + mordorscreens[i] + '<button onClick="morNext();"> &gt; </button>';

I believe it is not advisable to expose the variable i for iterating through the images. It would be better to set the event handlers in Javascript rather than in HTML.

You can test out this code

HTML

<div id="ss1">
   <button id="previous"> &lt; </button>
   <span id="imageSpan"></span>
   <button id="next"> &gt; </button>
</div>

Javascript

var mordorscreens = [];
mordorscreens[0] = '<img src="http://i.imgur.com/83HCt.png" alt="scrns1">';
mordorscreens[1] = '<img src="http://i.imgur.com/5mWIy.png" alt="scrns1">';
mordorscreens[2] = '<img src="http://i.imgur.com/pPafl.png" alt="scrns1">';

function morshots() {
    var i = 0;
    var elem = document.getElementById('imageSpan');
    elem.innerHTML = mordorscreens[i];
    // Data Attribute that holds the initial 
    // image number
    elem.setAttribute('data-number', i);
}
// Call The function
morshots();

// Assign Event handlers
var buttons = document.getElementsByTagName('button');

for (var j = 0; j < buttons.length; j++) {
    // Add Click events to the button
    buttons[j].addEventListener('click', clickHandler);
}

function clickHandler() {
    var elem = document.getElementById('imageSpan');
    // Store the current Image Number in a HTML5 data-attribute
    var currImage = parseInt(elem.getAttribute('data-number'), 10);
    if (this.id === 'previous') {
        currImage--;
        currImage = currImage < 0 ? 2 : currImage;
    }
    else if (this.id === 'next') {
        currImage++;
        currImage = currImage > 2 ? 0 : currImage;
    }
    // Set the current Image Number 
    elem.setAttribute('data-number', currImage);
    elem.innerHTML = mordorscreens[currImage];
}

Explore JSBin Demo

Answer 3

Answer №2

Here is a simple string without any variables:

mordor.innerHTML = '<button onClick="morPrev();"> < </button>    mordorscreens[i]    <button onClick="morNext();"> > </button> ';

To extract the value, you can do it like this:

mordor.innerHTML = '<button onClick="morPrev();"> < </button>'  +  mordorscreens[i]  +  '<button onClick="morNext();"> > </button> ';

Answer 4

Here is a simple string without any variables:

mordor.innerHTML = '<button onClick="morPrev();"> < </button>    mordorscreens[i]    <button onClick="morNext();"> > </button> ';

To extract the value, you can do it like this:

mordor.innerHTML = '<button onClick="morPrev();"> < </button>'  +  mordorscreens[i]  +  '<button onClick="morNext();"> > </button> ';

Utilizing an array to cycle through various images

Answer №1

Answer №2

Similar questions

What is the best way to display several components in a particular location within a parent component using react-native?

Having trouble with your JSONP callback not being received?

Can anyone provide a method for obtaining a date that is x days earlier through date arithmetic?

Ways to eliminate the occurrence of 'undefined' in Object.keys while using forEach loop

Discover how to capture a clicked word within the Ionic Framework

Calculate the total width of all images

Feeling lost about arrow functions in JavaScript

Issue with jQuery: Function not triggered by value selection in dynamically created select boxes

Discovering the worth of specific selections in a dropdown menu

"The `Head.js` method called `.js()` allows for dynamic

What is the best way to display a collection of images in an HTML page?

Encountering a "Start script missing" error while trying to execute npm start, the problem remains even after attempting

Learn to leverage JavaScript in Node-RED to dynamically display messages based on selected dropdown options

How do I overwrite this calculation using JQuery?

At what point should the term "function" be included in a ReactJS component?

What could be causing TypeScript to throw errors when attempting to utilize refs in React?

What is the cause behind the failure of this regular expression in JavaScript?

Leveraging real-time geographical location data for a weather widget with OpenWeatherAPI integration

The Ajax success callback is failing to update the background-image property after receiving a successful JSON response

Tips for fixing the Runtime.UnhandledPromiseRejection error when deploying your next.js project on Vercel and Netlify