Javascript array and changing an image with button

Javascript: iteration to change images in DOM

Purpose:
 For the next experiment, it was trying to change an image by button click, and surf through the array in my javascript file.

Setup:
Remember all files are in the same folder.
To replicate this experiment locally on your browser, have your image files, your HTML and your JS in the same folder, replace the file names in the image_array [] with your file names.  In my code, you'll see the image paths for my images. Double click that index.html file and see the code run. 


*Note about frameworks and non-local use of this code*
In an actual web app, with something like Django, the images would be in static / images,  the html, in templates, and the javascript in the static/js.


But why?

It's helpful to me to create these little projects so I can explore how things work.
I'm sharing as I learn so that maybe this method would be useful to others. 

Notes

Next experiment I will evolve the style more, and try to retrieve the image path from an object constant instead.

The incrementor/counter once again came in quite handy. 
Making it work first is the goal, then moving the codes into the app.

 Video:








GIMME THE CODE

index.html



<!DOCTYPE html>

<html>
<head>
<title>Exercise 2 Arrays</title>
 <script type="text/javascript" src="ex2.js"></script>
  </head>
  <!-- #91cac5 == greyish teal-->
  <body id="Main_Body" style="background:grey;">
    <br>
    <br>


  <h1> This is the browser opened page </h1>
  <br>

  <div style="display: inline-block; margin-left: 25%; margin-right: 25%;">
    <button id="mybutton" onclick="myFunction()">Test the code</button>
    <img id="myImages" style="display: block; width: 400px; height: 400px; border: solid;" src="/home/nellie/Desktop/browser test/image1.png">
  </div>



  </body>
  </html>



ex2.js



 // JavaScript file for experiment 2  => arrays



const image_array = [
                     "/home/nellie/Desktop/browser test/image1.png",
                     "/home/nellie/Desktop/browser test/image2.png",
                     "/home/nellie/Desktop/browser test/image3.jpg",
                     "/home/nellie/Desktop/browser test/image4.png"
                    ];
var place = 0;

function incrementor(n){
  max = image_array.length - 1;
 
  if( n < max){
    return n + 1;
}
  else{
    return 0;
  }
}


function myFunction(){
  var image_element = document.getElementById("myImages");
  place = incrementor(place);
  var new_image = image_array[place];
  image_element.src = new_image;
 
};









 

Comments

Post a Comment

Popular posts from this blog

JavaScript Ascii animation with while loops and console.log

I was working on figuring out while loops for an exercise in LearnJavaScriptTheHardWay  by Zed Shaw,  and I decided to do this: The red text console.logs were for debugging, and will take over the animation if the comments are removed. The bold red number is the point at which the loop stops.  My CPU didn't have too much trouble with that large number, but I'd recommend dialing it down if your CPU is slow. Also if your CPU is really fast, you'll have to change the pause to something much lower to see the animation better.  That too is in a loop, so the more that pause happens, the more loops your CPU is running.   Link: https://stackoverflow.com/questions/9006988/node-js-on-windows-how-to-clear-console To clear screen as described in link above, uncomment the bold purple comment I tried to comment the code to help learners see what I did,  any comments or suggestions, feel free to drop em in!        ...
Read more

playing with trigonometry sin in pygame

Image
Ok I am so far from understanding, so don't take this as any kind of math lesson. Also, every time I thought I knew what I was doing.... pygame would show me differently. Still a work in progress, but for now, something to play with. Update: SinWaveTime class added to produce that particular weaving effect Tinkering with the different sin wave variables: I wrote this piece separate from my 3D experiment to see how to manipulate the sin wave. While trying to use time as the factor to move my pygame draw circle on the x-axis, i got this crazy little doo-dad : I don't think it's drawing two circles at once, but if I figure out what the heck it's doing I'll let you know.  Or hey if you know, drop a comment.  I don't know if my comments are just not working, or no one wants to. So, here's some pygame code to play with the sin wave.  Alter the different variables to see it in action. picture of SinWave.move_with_time() see changes, SinWaveTime c...
Read more

JavaScript and a Matrix

Image
Screenshot of the code a 10 by 10 matrix Update 5/11/2021 I have successfully used the matrix to create a Snake game in Angular. See the live (Desktop only) game here: Firebase Deploy of Angular S N A K E Update 3/23/2021: I have changed the live version of the game to dynamically create the map for the minesweeper and this allowed for many open windows as to how I can upgrade and add onto the game. The easy version of the game allows people to learn and see how to form a strategy to defeat the original version of the game. There are sounds and options for game type and game size. Click on the options to turn the sound off if loud noises startle you as losing the games results in an explosion noise. Below is the link to the game, hosted on GitHub, and a GitHub link if you'd like to fork the code. Live Game: http...
Read more