Choose an array containing a random set of n elements and place them into a designated element

Question

Choose an array containing a random set of n elements and place them into a designated element

I am working on a project where I have a collection of books embedded as iframe elements. My goal is to select three random books from this list and display them within a pre-defined div. However, despite my attempts to use the shuffle method, I am encountering issues with displaying or randomizing the elements.

Below is an example of the code snippet I am currently working with:

Javascript

   function getRandomBooks(arr, count) {

   var arr = [ // List of embedded book iframes
   '<iframe type="text/html" width="150" height="200" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.com/kp/card?asin=B00ARFNQ54&asin=B00ARFNQ54&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_wpdGxbH9ZAXX9&hideShare=true" ></iframe>',
   ... (remaining array entries omitted for brevity)

   ];    

   var insertDiv = document.getElementsByClassName("bookFrame"); // Target div for inserting elements

   var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
   while (i-- > min) {
       index = Math.floor((i + 1) * Math.random());
       temp = shuffled[index];
       shuffled[index] = shuffled[i];
       shuffled[i] = temp;
   }

   var selectedBooks = shuffled.slice(min, 3);
   insertDiv.innerHTML(selectedBooks); // Insert 3 randomly selected books into the designated div

   alert(getRandomBooks(arr, 3)); // Test call 

   };

HTML

<p class="center bookFrame">

<!-- Random books will be inserted here -->

</p>

javascript arrays sorting random

Answer 1

Answer №1

There seems to be a number of mistakes in this code.

To start, the

alert( randomBooks(arr, 3)); // Checking

is placed within the function randomBooks itself, meaning it will never be triggered.

Additionally, using

insertDiv.innerHTML(returnedValue);

is incorrect as 'innerHTML' is not a function but a string. Furthermore, getElementsByClassName returns a list rather than a single element, so the correct syntax should be:

insertDiv[0].innerHTML = returnedValue;

It appears there may be more errors present since the code does not seem to have been executed yet. It would be beneficial to run the code and observe its behavior first.

A helpful suggestion: for testing purposes, instead of modifying the code with random calls and alerts, you can use the developer console (accessible by pressing F12 in Chrome) to call randomBooks() directly and view its output.

Answer 2

There seems to be a number of mistakes in this code.

To start, the

alert( randomBooks(arr, 3)); // Checking

is placed within the function randomBooks itself, meaning it will never be triggered.

Additionally, using

insertDiv.innerHTML(returnedValue);

is incorrect as 'innerHTML' is not a function but a string. Furthermore, getElementsByClassName returns a list rather than a single element, so the correct syntax should be:

insertDiv[0].innerHTML = returnedValue;

It appears there may be more errors present since the code does not seem to have been executed yet. It would be beneficial to run the code and observe its behavior first.

A helpful suggestion: for testing purposes, instead of modifying the code with random calls and alerts, you can use the developer console (accessible by pressing F12 in Chrome) to call randomBooks() directly and view its output.

Answer 3

Answer №2

There could have been several reasons why things weren't working as expected. It seems that there were multiple minor errors in the code.

The randomBooks() method was supposed to accept an argument named arr, but it appears that you replaced it with your own array. Perhaps you intended to pass the array of books into the randomizer function, which I have done in my example.

Another issue is that getElementsByClassName() returns an array. You may need to extract the first element from the array or consider using querySelector() if you specifically require the first matching element.

Lastly, assigning directly to el.innerHTML is not correct. It seems like you meant to use it similar to jQuery's $el.html() method.

function addBooks(target, bookIds, count) {
  // -----------------------------
  // A classic array shuffler (inplace).
  // -----------------------------
  function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = array[i];
      array[i] = array[j];
      array[j] = temp;
    }
    return array;
  }
  // -----------------------------

  // -----------------------------
  // Get 3 random books.
  // -----------------------------
  shuffleArray(bookIds);
  var selected = bookIds.slice(0, 3);
  // -----------------------------
  
  // -----------------------------
  // Construct some HTML for the 3 books.
  // -----------------------------
  var html = selected.map(function(bookId){
    var retval = '<iframe type="text/html" frameborder="0" allowfullscreen src="https://read.amazon.com/kp/card?asin=' + bookId + '&asin=' + bookId + '&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_wpdGxbH9ZAXX9&hideShare=true" ></iframe>';
    return retval;
  });
  // -----------------------------

  // -----------------------------
  // inject 3 random book elements
  // -----------------------------
  document.querySelector(target).innerHTML = html;
  // -----------------------------
};

var bookIds = [
  'B00ARFNQ54',
  'B00AFH1TBC',
  'B005GSYZRA',
  'B00ARFNQ54',
  'B00AFH1TBC',
  'B005GSYZRA'
];

addBooks(".bookFrame", bookIds, 3);

iframe { width: 150px; height: 200px; max-width:100%; }

<p class="center bookFrame"><!-- Insert books here --></p>

Answer 4

There could have been several reasons why things weren't working as expected. It seems that there were multiple minor errors in the code.

The randomBooks() method was supposed to accept an argument named arr, but it appears that you replaced it with your own array. Perhaps you intended to pass the array of books into the randomizer function, which I have done in my example.

Another issue is that getElementsByClassName() returns an array. You may need to extract the first element from the array or consider using querySelector() if you specifically require the first matching element.

Lastly, assigning directly to el.innerHTML is not correct. It seems like you meant to use it similar to jQuery's $el.html() method.

function addBooks(target, bookIds, count) {
  // -----------------------------
  // A classic array shuffler (inplace).
  // -----------------------------
  function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = array[i];
      array[i] = array[j];
      array[j] = temp;
    }
    return array;
  }
  // -----------------------------

  // -----------------------------
  // Get 3 random books.
  // -----------------------------
  shuffleArray(bookIds);
  var selected = bookIds.slice(0, 3);
  // -----------------------------
  
  // -----------------------------
  // Construct some HTML for the 3 books.
  // -----------------------------
  var html = selected.map(function(bookId){
    var retval = '<iframe type="text/html" frameborder="0" allowfullscreen src="https://read.amazon.com/kp/card?asin=' + bookId + '&asin=' + bookId + '&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_wpdGxbH9ZAXX9&hideShare=true" ></iframe>';
    return retval;
  });
  // -----------------------------

  // -----------------------------
  // inject 3 random book elements
  // -----------------------------
  document.querySelector(target).innerHTML = html;
  // -----------------------------
};

var bookIds = [
  'B00ARFNQ54',
  'B00AFH1TBC',
  'B005GSYZRA',
  'B00ARFNQ54',
  'B00AFH1TBC',
  'B005GSYZRA'
];

addBooks(".bookFrame", bookIds, 3);

iframe { width: 150px; height: 200px; max-width:100%; }

<p class="center bookFrame"><!-- Insert books here --></p>

Choose an array containing a random set of n elements and place them into a designated element

Answer №1

Answer №2

Similar questions

Encountered Runtime Issue of TypeError: undefined cannot be iterated (unable to access property Symbol(Symbol.iterator))

Implementing a watcher property in JavaScript to dynamically add a class to an element

Issues with $.getjson and trouble with storing JSON data

How can we arrange a two-dimensional array in descending order of string length using the first string in the sub-array as the basis for

"Encountered an unexpected token in Javascript - jsp error

Using JSDoc, consider a Plain Old JavaScript Object (POJO) as an instance

Implementing a feature in React where the active class is applied only to the next element upon clicking

Problem with vueJS List Transition not being triggered

Connect the input field to a dictionary

mention the element to display on the pagination

express.js does not properly support the app.get functionality

Looking to replace a background image using javascript?

Is there a way in Selenium to determine the type of tag associated with the element we are trying to locate?

Heroku experiences unexpected surge in memory consumption while using Puppeteer

How to align scrolling images with their scroll origin - a step by step guide

What is the best way to implement collision detection using raycasting?

The memory allocation of stl::vector is inconsistent

How can arrays be merged while preserving their original order?

What could be causing the "Failed prop type" error when dealing with nested cloned children, despite the parent having the correct initial values

Expression enclosed in double quotes within a JavaScript string