What is the best way to link text to an image using JavaScript?

Question

What is the best way to link text to an image using JavaScript?

I have a query that I need some assistance with. I've developed a random image generator which is working fine so far:

var randPics = document.querySelector("#randPics");
var getPics = document.querySelector(".getPics");


getPics.addEventListener("click", function(){ 
//array to store images for the random image generator
var picsGallery = new Array();
    picsGallery = ["https://static2.jetpens.com/images/a/000/026/26648.jpg?mark64=aHR0cDovL3d3dy5qZXRwZW5zLmNvbS9pbWFnZXMvYXNzZXRzL3dhdGVybWFyay5wbmc&markalign64=dG9wLHJpZ2h0&markscale=19&s=938428f6eca690069a86f66d0754444b",
"http://assets.sajiansedap.com/media/article_image/cover/large/25505-cara-memilih-nanas-yang-matang.jpg",
 "https://cdn.shopify.com/s/files/1/1030/8703/products/epal-hijau-green-apple-each-sebiji_1024x1024.jpg?v=1487817043"]
 
 //generate random no to select the random images
var rnd = Math.floor(Math.random() * picsGallery.length);
//change the pics locations of the source
  randPics.src=picsGallery[rnd]
  });

#randPics{
width: 300px;
height: 300px;
align-content: center;
}

<body>
<p>Display a random image each time the buttons is clicked!</p>
<p> You get a <span id="text"></span>  </p>

<button class="getPics"> Click ! </button>
<br>
<img id="randPics" src="https://d30y9cdsu7xlg0.cloudfront.net/png/45447-200.png">

</body>

Upon clicking the button, a random image from the array will be displayed. However, I am facing an issue with associating text with the images. For example, when the user clicks the button and gets an image of a pen, the text should change to:

You get a

should change to

You get a pen.

Your insights would be greatly appreciated!

javascript html css random

Answer 1

Answer №1

To begin, it is essential to store the text in a designated location and then establish a connection between the text and images. One way to achieve this is by storing the text along with corresponding images in an object array instead of solely having an array of image URLs. Additionally, there is no need to declare the array within the event handler function; it can be defined once and accessed within the function since it resides in the scope. Here's an example:

var randPics = document.querySelector("#randPics");
var getPics = document.querySelector(".getPics");
var textElem = document.querySelector("#text");

//array for storing images for random image generation
var picsGallery = [{img: "https://static2.jetpens.com/images/a/000/026/26648.jpg?mark64=aHR0cDovL3d3dy5qZXRwZW5zLmNvbS9pbWFnZXMvYXNzZXRzL3dhdGVybWFyay5wbmc&markalign64=dG9wLHJpZ2h0&markscale=19&s=938428f6eca690069a86f66d0754444b", text:'pen'},
{img: "http://assets.sajiansedap.com/media/article_image/cover/large/25505-cara-memilih-nanas-yang-matang.jpg", text:'pineapple'},
 {img: "https://cdn.shopify.com/s/files/1/1030/8703/products/epal-hijau-green-apple-each-sebiji_1024x1024.jpg?v=1487817043", text:'apple'}];

getPics.addEventListener("click", function(){ 
   
 //generate random number to select a random image
var rnd = Math.floor(Math.random() * picsGallery.length);
//change the source of the displayed image
  randPics.src=picsGallery[rnd].img;
  text.innerHTML = picsGallery[rnd].text;
  });

#randPics{
width: 300px;
height: 300px;
align-content: center;
}

<body>
<p>Display a random image each time the button is clicked!</p>
<p> You get a <span id="text"></span>  </p>

<button class="getPics"> Click ! </button>
<br>
<img id="randPics" src="https://d30y9cdsu7xlg0.cloudfront.net/png/45447-200.png">

</body>

Answer 2

To begin, it is essential to store the text in a designated location and then establish a connection between the text and images. One way to achieve this is by storing the text along with corresponding images in an object array instead of solely having an array of image URLs. Additionally, there is no need to declare the array within the event handler function; it can be defined once and accessed within the function since it resides in the scope. Here's an example:

var randPics = document.querySelector("#randPics");
var getPics = document.querySelector(".getPics");
var textElem = document.querySelector("#text");

//array for storing images for random image generation
var picsGallery = [{img: "https://static2.jetpens.com/images/a/000/026/26648.jpg?mark64=aHR0cDovL3d3dy5qZXRwZW5zLmNvbS9pbWFnZXMvYXNzZXRzL3dhdGVybWFyay5wbmc&markalign64=dG9wLHJpZ2h0&markscale=19&s=938428f6eca690069a86f66d0754444b", text:'pen'},
{img: "http://assets.sajiansedap.com/media/article_image/cover/large/25505-cara-memilih-nanas-yang-matang.jpg", text:'pineapple'},
 {img: "https://cdn.shopify.com/s/files/1/1030/8703/products/epal-hijau-green-apple-each-sebiji_1024x1024.jpg?v=1487817043", text:'apple'}];

getPics.addEventListener("click", function(){ 
   
 //generate random number to select a random image
var rnd = Math.floor(Math.random() * picsGallery.length);
//change the source of the displayed image
  randPics.src=picsGallery[rnd].img;
  text.innerHTML = picsGallery[rnd].text;
  });

#randPics{
width: 300px;
height: 300px;
align-content: center;
}

<body>
<p>Display a random image each time the button is clicked!</p>
<p> You get a <span id="text"></span>  </p>

<button class="getPics"> Click ! </button>
<br>
<img id="randPics" src="https://d30y9cdsu7xlg0.cloudfront.net/png/45447-200.png">

</body>

Answer 3

Answer №2

Declare the array picsGallery outside of the event handler.

Create an array with two elements for each element in the picsGallery array. Assign the value of picsGallery[rnd][0] to .src of <img>, and picsGallery[rnd][1] to the .textContent of #text

var randPics = document.querySelector("#randPics");
var getPics = document.querySelector(".getPics");
var text = document.querySelector("#text");

var picsGallery = [
  ["https://static2.jetpens.com/images/a/000/026/26648.jpg?mark64=aHR0cDovL3d3dy5qZXRwZW5zLmNvbS9pbWFnZXMvYXNzZXRzL3dhdGVybWFyay5wbmc&markalign64=dG9wLHJpZ2h0&markscale=19&s=938428f6eca690069a86f66d0754444b", "pen"],
  ["http://assets.sajiansedap.com/media/article_image/cover/large/25505-cara-memilih-nanas-yang-matang.jpg", "pineapple"],
  ["https://cdn.shopify.com/s/files/1/1030/8703/products/epal-hijau-green-apple-each-sebiji_1024x1024.jpg?v=1487817043", "apple"]
];

getPics.addEventListener("click", function() {
  var rnd = Math.floor(Math.random() * picsGallery.length);
  //change the pics locations of the source
  randPics.src = picsGallery[rnd][0];
  text.textContent = picsGallery[rnd][1];
});

#randPics {
  width: 300px;
  height: 300px;
  align-content: center;
}

<body>
  <p>Display a random image each time the buttons is clicked!</p>
  <p> You get a <span id="text"></span> </p>

  <button class="getPics"> Click ! </button>
  <br>
  <img id="randPics" src="https://d30y9cdsu7xlg0.cloudfront.net/png/45447-200.png">

</body>

Answer 4

Declare the array picsGallery outside of the event handler.

Create an array with two elements for each element in the picsGallery array. Assign the value of picsGallery[rnd][0] to .src of <img>, and picsGallery[rnd][1] to the .textContent of #text

var randPics = document.querySelector("#randPics");
var getPics = document.querySelector(".getPics");
var text = document.querySelector("#text");

var picsGallery = [
  ["https://static2.jetpens.com/images/a/000/026/26648.jpg?mark64=aHR0cDovL3d3dy5qZXRwZW5zLmNvbS9pbWFnZXMvYXNzZXRzL3dhdGVybWFyay5wbmc&markalign64=dG9wLHJpZ2h0&markscale=19&s=938428f6eca690069a86f66d0754444b", "pen"],
  ["http://assets.sajiansedap.com/media/article_image/cover/large/25505-cara-memilih-nanas-yang-matang.jpg", "pineapple"],
  ["https://cdn.shopify.com/s/files/1/1030/8703/products/epal-hijau-green-apple-each-sebiji_1024x1024.jpg?v=1487817043", "apple"]
];

getPics.addEventListener("click", function() {
  var rnd = Math.floor(Math.random() * picsGallery.length);
  //change the pics locations of the source
  randPics.src = picsGallery[rnd][0];
  text.textContent = picsGallery[rnd][1];
});

#randPics {
  width: 300px;
  height: 300px;
  align-content: center;
}

<body>
  <p>Display a random image each time the buttons is clicked!</p>
  <p> You get a <span id="text"></span> </p>

  <button class="getPics"> Click ! </button>
  <br>
  <img id="randPics" src="https://d30y9cdsu7xlg0.cloudfront.net/png/45447-200.png">

</body>

Answer 5

Answer №3

I have made some adjustments to your code by linking all images with text and organizing them within a JavaScript object instead of an array. Other than that, the code remains mostly the same as what you originally wrote.

<!DOCTYPE html>
<html>
<head>
  <title></title>
<style type="text/css">

    #randPics{
      width: 300px;
      height: 300px;
      align-content: center;
    }

</style>
</head>
<body>
    <body>
    <p>Display a random image each time the buttons is clicked!</p>
    <p> You get a <span id="text"></span>  </p>

    <button class="getPics"> Click ! </button>
    <br>
    <img id="randPics" src="https://d30y9cdsu7xlg0.cloudfront.net/png/45447-200.png">

<script>
    var randPics = document.querySelector("#randPics");
    var getPics = document.querySelector(".getPics");


    getPics.addEventListener("click", function(){ 
    //object to store images for the random image generator
    var picsGallery =  {"bar": "https://static2.jetpens.com/images/a/000/026/26648.jpg?mark64=aHR0cDovL3d3dy5qZXRwZW5zLmNvbS9pbWFnZXMvYXNzZXRzL3dhdGVybWFyay5wbmc&markalign64=dG9wLHJpZ2h0&markscale=19&s=938428f6eca690069a86f66d0754444b", "foo":
    "http://assets.sajiansedap.com/media/article_image/cover/large/25505-cara-memilih-nanas-yang-matang.jpg",
     "tux":"https://cdn.shopify.com/s/files/1...;

Answer 6

I have made some adjustments to your code by linking all images with text and organizing them within a JavaScript object instead of an array. Other than that, the code remains mostly the same as what you originally wrote.

<!DOCTYPE html>
<html>
<head>
  <title></title>
<style type="text/css">

    #randPics{
      width: 300px;
      height: 300px;
      align-content: center;
    }

</style>
</head>
<body>
    <body>
    <p>Display a random image each time the buttons is clicked!</p>
    <p> You get a <span id="text"></span>  </p>

    <button class="getPics"> Click ! </button>
    <br>
    <img id="randPics" src="https://d30y9cdsu7xlg0.cloudfront.net/png/45447-200.png">

<script>
    var randPics = document.querySelector("#randPics");
    var getPics = document.querySelector(".getPics");


    getPics.addEventListener("click", function(){ 
    //object to store images for the random image generator
    var picsGallery =  {"bar": "https://static2.jetpens.com/images/a/000/026/26648.jpg?mark64=aHR0cDovL3d3dy5qZXRwZW5zLmNvbS9pbWFnZXMvYXNzZXRzL3dhdGVybWFyay5wbmc&markalign64=dG9wLHJpZ2h0&markscale=19&s=938428f6eca690069a86f66d0754444b", "foo":
    "http://assets.sajiansedap.com/media/article_image/cover/large/25505-cara-memilih-nanas-yang-matang.jpg",
     "tux":"https://cdn.shopify.com/s/files/1...;

Answer 7

Answer №4

Let's start by simplifying things before delving into computer vision and related topics:

To establish a connection between two data sets, the key lies in having a relationship. The datasets we are working with consist of:

Text: Descriptive information about the subject.
Link: Reference to an image that represents the subject.

At times, details about the subject (like a green apple) can be inferred from the link itself. However, identifying a pattern in these links or utilizing a dictionary is crucial for effective parsing.

An uncomplicated approach would involve replacing the array of links with an array of objects featuring 2 distinct keys:

Text
Link

Selecting a random entry from this modified array grants immediate access to both the text and corresponding link. This method is not only streamlined but also allows for seamless addition of more fields as needed.

Answer 8

Let's start by simplifying things before delving into computer vision and related topics:

To establish a connection between two data sets, the key lies in having a relationship. The datasets we are working with consist of:

Text: Descriptive information about the subject.
Link: Reference to an image that represents the subject.

At times, details about the subject (like a green apple) can be inferred from the link itself. However, identifying a pattern in these links or utilizing a dictionary is crucial for effective parsing.

An uncomplicated approach would involve replacing the array of links with an array of objects featuring 2 distinct keys:

Text
Link

Selecting a random entry from this modified array grants immediate access to both the text and corresponding link. This method is not only streamlined but also allows for seamless addition of more fields as needed.

What is the best way to link text to an image using JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Connecting an HTML button to a Python script

Whenever I try to relocate my HTML file that references three.js, the three.js library seems to malfunction and stop

Executing a Jquery AJAX request to generate an authorization code

Utilizing a RESTful approach for ajax requests is effective, but there seems to be a

Display a progress bar in an application to visualize the loading of database records

Creating a CSS layout that expands a container to fill the entire height of its grandparent element

Searching for a file sequence using Regular Expressions in JavaScript

Mapping drop-downs based on the length of a JSON array

Enhancing the appearance of a Select element

What causes the .getJSON function to return a MIME type error when trying to access the API

Using onchange within an onchange event will not function as intended

Tips for managing the number of items returned in a dataProvider using AS3

Having trouble with Instafeed JS loading?

Ways to insert text into an SVG file

"Building dynamic web applications using node.js and express.js with routes for

The image on my background is getting distorted on Chrome

The Ajax function effortlessly receives the returned value and smoothly transitions to the error handling stage

How to incorporate Vue3 into Django using CDN without the need for a NodeJs bundler?

Encountering connection drops while using AJAX and PHP for Comet implementation on an Apache server

Struggling to manage App navigation using Capacitor event listener (appUrlOpen) in the context of Nuxt, Vue.js, and Vue-Router