Utilizing JavaScript for manipulating arrays and displaying images

Question

Utilizing JavaScript for manipulating arrays and displaying images

After asking this question previously without a satisfactory solution, I am hoping to provide better clarification. Imagine having an array with 3 items and it lands on 0 - a code is set up to display this in a div. Now, I want the image to be shown right next to the displayed array. For instance, if the array consists of BMW, Civic, and Mercedes, and a random number generator selects 1 (BMW), the word will appear in the div and a BMW logo should appear next to it. The same goes for Civic and Mercedes, each having their respective logos displayed alongside their names. Additionally, I would like to add IDs so that CSS background images can be easily added according to the picture's design.

javascript html css

Answer 1

Answer №1

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Car Selector</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

  <ul id="carList">


  </ul>

  <button id="getRandomCar">Get Random Car</button>


</body>
  <script>
    $(document).ready( function(){
    var vehicles = [{
     brand : 'Toyota',
     logo : 'toyota-logo.png',
     model : 'Camry',
    },
    {
     brand : 'Ford',
     logo : 'ford-logo.png',
     model : 'Mustang',
    },
    {
     brand : 'Chevrolet',
     logo : 'chevy-logo.png',
     model : 'Silverado',
    }];

function randomNumGen(limit) {
  return Math.round(Math.random()*limit); 
}

function displayRandomCar() {
  $('#getRandomCar').click( function() {

    var carIndex = randomNumGen(vehicles.length - 1);
    console.log(carIndex);
    var template = '<li>';
    template += 'Brand: ' + vehicles[carIndex].brand + '</br>';
    template += 'Logo: ' + vehicles[carIndex].logo + '</br>';
    template += 'Model: ' + vehicles[carIndex].model + '</br>';

    $('#carList').html(template);

  } );
}
        displayRandomCar();
    });
  </script>
</html>

For more details, visit this link.

An array of objects (vehicles) has been created to store different car information.

The script generates a random number to select a car from the vehicles array and displays its details in the DOM.

Answer 2

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Car Selector</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

  <ul id="carList">


  </ul>

  <button id="getRandomCar">Get Random Car</button>


</body>
  <script>
    $(document).ready( function(){
    var vehicles = [{
     brand : 'Toyota',
     logo : 'toyota-logo.png',
     model : 'Camry',
    },
    {
     brand : 'Ford',
     logo : 'ford-logo.png',
     model : 'Mustang',
    },
    {
     brand : 'Chevrolet',
     logo : 'chevy-logo.png',
     model : 'Silverado',
    }];

function randomNumGen(limit) {
  return Math.round(Math.random()*limit); 
}

function displayRandomCar() {
  $('#getRandomCar').click( function() {

    var carIndex = randomNumGen(vehicles.length - 1);
    console.log(carIndex);
    var template = '<li>';
    template += 'Brand: ' + vehicles[carIndex].brand + '</br>';
    template += 'Logo: ' + vehicles[carIndex].logo + '</br>';
    template += 'Model: ' + vehicles[carIndex].model + '</br>';

    $('#carList').html(template);

  } );
}
        displayRandomCar();
    });
  </script>
</html>

For more details, visit this link.

An array of objects (vehicles) has been created to store different car information.

The script generates a random number to select a car from the vehicles array and displays its details in the DOM.

Utilizing JavaScript for manipulating arrays and displaying images

Answer №1

Similar questions

Can you explain the contrast between onsubmit="submitForm();" and onsubmit="return submitForm();"?

Issues with displaying HTML video content

Is it possible to compare every element in an array with one another using an asynchronous process in NodeJS?

The battle between Iteration and Recursion: Determining the position of a point in a sequence based

extraction of information from an object within an array

How can I use JavaScript to disable a table row and then save the selected option in a MySQL database?

Troubleshooting: jQuery click event not functioning correctly with if-else statement

How to center an image vertically inside a link using CSS

Prevent a <span> element from affecting the linking functionality of an <a> tag

Configuring Jest unit testing with Quasar-Framework version 0.15

Implementing a React app mounting functionality upon clicking an HTML button

What is the process of importing an HTML template into a Vue.js project?

Unbinding or undoing an 'onclick' event when another 'onclick' event is triggered

Encase React black box block components and incorporate DOM event listeners

How do you set a background image for the color of the font?

How can I retrieve and showcase the size of each file, including images, CSS, and JS, present on a website?

What is the process of importing an IIFE-based JavaScript module into an Angular TypeScript application?

Exploring the functions of JointJS within a Node.js environment

What is the best way to click on a specific webElement in a group of webElements using Python Selenium?

New properties are not being successfully added to Passport Profiles