JavaScript: Creating an array of images from a directory

Question

JavaScript: Creating an array of images from a directory

I've encountered a problem that has proven to be more complex than expected - I am struggling to find resources related to my specific question. My goal is to store 36 images from a folder on my computer into an array using Javascript. Below, you will find a condensed version of the relevant code snippets.

<!doctype html>
    <head>
      <style>
       div#GameBoard {
         position: absolute;
         top: 66px;
         left: 53px;
         display: block;
         margin: 10px;
         padding: 10px;
         border: ridge #7CFC00 15px;
         width: 1007px;
         height: 698px;
       }

       div#Flipper {
         display: block;
         position: relative;
         background-color: #000;
       }      
     <style>

     <script lang="javascript">
       var ImgArray = [[11-16][21-26][31-36][41-46][51-56][61-66]];
       // pseudocode, where first digit represents row and second digit column number. 
       // Images in folder named accordingly like 11.png,12.png,21.png,
       // also within the array.

       function OnClickCard(path)
       {
         path || path ='C:\Users\Jamal\Desktop\codefolder\memorygame\gameimages'

         document.getElementById("Flipper").img.src = ImgArray.splice(Math.floor(Math.random() * ImgArray.length)[ImgArray];
       }
    </script>
  <body>
    <div id="GameBoard">
        <div class="Tile" id="Flipper">
            <img name ="11" src="blue-glass-tile.png" onclick="OnClickCard()"/>
        </div>

  </body>
  </head>
</html>

I aim to store the 36 images within 'C:\Users\Jamal\Desktop\codefolder\memorygame\gameimages' in an array, randomly select an index between 0-35 to change the image source in the div, and remove that index to avoid duplication.

However, the current situation yields no results. Despite clearing all errors in Firefox's developer console, nothing seems to be happening. I am unsure how to log errors or determine if an image has loaded. As I struggle with the randomizer logic, any assistance would be greatly appreciated as I strive to finish this task successfully.

javascript arrays image path

Answer 1

Answer №1

To start, there are a few mistakes in the code snippet you provided. The #Gameboard element is missing a closing <div> tag, and it seems like the path variable is not being used at all.

Next, executing a console log statement is simple:

console.log("logging statement");

You can include this line of code within your Javascript to print messages to the browser console.

The main issue you're facing is that web browsers have limitations when it comes to interacting with system files on your computer. When you use the

<input type='file' id='file_input'/>

element, the browser handles the file selection process for security reasons.

Depending on your browser's compatibility with the File API, you may be able to implement functionality using Javascript and event binding. However, it's often simpler to host images on a server and access them via URLs in the browser. If you're working locally, consider setting up an Apache/MySQL/PHP stack and storing data within your localhost directory.

Answer 2

To start, there are a few mistakes in the code snippet you provided. The #Gameboard element is missing a closing <div> tag, and it seems like the path variable is not being used at all.

Next, executing a console log statement is simple:

console.log("logging statement");

You can include this line of code within your Javascript to print messages to the browser console.

The main issue you're facing is that web browsers have limitations when it comes to interacting with system files on your computer. When you use the

<input type='file' id='file_input'/>

element, the browser handles the file selection process for security reasons.

Depending on your browser's compatibility with the File API, you may be able to implement functionality using Javascript and event binding. However, it's often simpler to host images on a server and access them via URLs in the browser. If you're working locally, consider setting up an Apache/MySQL/PHP stack and storing data within your localhost directory.

Answer 3

Answer №2

Here is a simple method that focuses on extracting the image src path rather than the blob content of the image. Hopefully, this will guide you in the right direction.

To achieve this, follow these steps:

Insert your image into your HTML page.
Retrieve all images in JavaScript and store them in an array called document.images.
Iterate through the array of images to extract only the src paths.
You can utilize the data array for further processing or storage.

var images = document.images,
    data = [];
for (var i = 0, len = images.length; i < len; i++) {
  data.push(images[i].src);
  console.log(data[i]);
}
// Perform actions with the extracted image paths stored in the 'data' array

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%9710&w=150&h=200">

Answer 4

Here is a simple method that focuses on extracting the image src path rather than the blob content of the image. Hopefully, this will guide you in the right direction.

To achieve this, follow these steps:

Insert your image into your HTML page.
Retrieve all images in JavaScript and store them in an array called document.images.
Iterate through the array of images to extract only the src paths.
You can utilize the data array for further processing or storage.

var images = document.images,
    data = [];
for (var i = 0, len = images.length; i < len; i++) {
  data.push(images[i].src);
  console.log(data[i]);
}
// Perform actions with the extracted image paths stored in the 'data' array

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%9710&w=150&h=200">

JavaScript: Creating an array of images from a directory

Answer №1

Answer №2

Similar questions

Making a REST call with values containing an apostrophe

I possess a pair of UI tabs. Whenever a button located outside the tab is clicked, I am required to activate a distinct tab

Error: The JS Exception has not been handled, as it is stating that 'undefined' is not an object when evaluating 'global.performance.now' in react-native-tvOS

What is the best way to implement a user-customizable dynamic URL that incorporates API-generated content in a NextJS and React application?

Tips for passing the id using jQuery in an AJAX request to execute a delete action

Steps to resolve eslint error in cases of using the node: protocol for importing Node.js built-in modules

The jssor slider cannot be initialized when it is loaded through ajax requests

having trouble loading marker in react leaflet within next.js

Incorporating graphics into a React component

Can you help me transform this javascript code into a JSON format?

Setting up Socket.io results in numerous transport polling GET requests being initiated

Tips for keeping images stationary while expanding on hover

Troubleshooting Event Tracking Problems with Brave Browser on PostHog

Is there a way to add text to HTML code using CKEditor?

Concealing scroll bars while still maintaining the ability to scroll by using overflow:scroll

Stripping quotation marks from CSV information using Javascript

Unable to locate element in Internet Explorer when using frame switching within Selenium

The error message "Adyencheckout is not a constructor" is popping up in my

What is the process for creating a symbolic link from a project's node_modules directory?

The callback function does not get invoked when using JSONP