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

Running two blocks of scripts (utilizing lab.js as a loading manager)

Idiosyncratic TypeScript behavior: Extending a class with comparable namespace structure

To optimize your bundling process, include the leaflet.css file from the node_modules/leaflet directory using webpack

Is there a way to use the property of an object to perform a merge sort, rather than relying on an Array?

Promise.all does not wait for the inner Promise.all to complete before continuing

Incorporating JSON data into an HTML table

Experiencing difficulties when trying to pan and zoom the data obtained from d3.json within a line chart

What could be the reason behind Next.js attempting to import a non-existent stylesheet?

The createElement function in Vue.js does not always return a fully formed component

Are personalized URLs necessary for jump anchor links?

The concatenation of Ajax results appears to append to the existing data

Using XSLT with JavaScript

Angular factory transforming service

Ways to remove the address bar from a mobile browser like Chrome or an Android browser

Can a website accurately identify my operating system and browser version even if my browser settings have been altered?

In order to add value, it is necessary to insert it into the text box in HTML without using the "on

The alignment of flexbox within a list item is not positioned at the top as expected

What is the method to ensure an element is displayed in Selenium WebDriver?

Maintain text while transitioning to another page

The Gulp task is stuck in an endless cycle