How to store images in an array?7


#1

I have 3 image files: a1.jpg,. a2.jpg, and a3.jpg.
I have two questions:

1.How do I store/assign these files to an array ’pic’?
2. How do I display a2.jpg on click of the button ‘press me’?

The 3 image files are in the ‘park’ folder which is in the same fodder as the html file.
Thank you.


#2

This is currently beyond the scope of what’s taught in Grasshopper since you’re working directly with an html file, but this code would do what you’re asking.

<html>
<body>
    <button id="myButton" type="button">press me</button>
    <img id="myImage" src="a1.jpg">
    <script type="text/javascript">
        let pic = ['a1.jpg', 'a2.jpg', 'a3.jpg'];
        let imageNumber = 0;
        document.getElementById("myButton").addEventListener('click', changeImage);
        function changeImage() {
            imageNumber = (imageNumber + 1) % pic.length;
            document.getElementById("myImage").src = pic[imageNumber];
        }
    </script>
</body>
</html>

#3

I did not request this


#4

Thank you very much.
The code is, at this point in time, beyond my comprehension, but it certainly works the way I want it to when the 3 image files are in the same folder as the html file.
How should I change the code if the 3 image files are stored in the sub-folder ‘park’?
Thank you.


#5

Should I stay quite and watch whats happening…

I find it weird at this point of time


#6

I think you’ve subscribed to my posts, or all posts on the forum. At the bottom of the email there should be a link that says, “To unsubscribe from these emails, click here.”

–Frankie


#7

Instead of 'a1.jpg', you would use 'park/a1.jpg'. You would also need to change all 4 strings that have .jpg in them.

You could organize this a bit by breaking up the string into different parts:

let path = 'park/'
let name = 'a1'
let type = '.jpg'

and then combining the parts: path + name + type. This way you can just change the value of name to get the location of the next picture. You could even just do 'park/a' + imageNumber + '.jpg' if you put it in the right place and are careful about the value of imageNumber.

You might find it helpful to search MDN for other html information.

–Frankie


#8

Thank you very much for your help. You are so very supportive.