How do I combine this function with html?

Question

I created a function in js that lets me choose a random book from a list.

function randomIntFromInterval(min, max) { // min and max included 
  return Math.floor(Math.random() * (max - min + 1) + min)
}


const rndInt = randomIntFromInterval(1 , 27)
  

switch(rndInt){
  case 1:
    console.log('Beze mnie jesteś nikim. Przemoc w polskich domach');
    break;
  case 2:
    console.log('Frankenstein')
    break;
  case 3:
    console.log('The house on the Mango Street')
    break;
  case 4:
    console.log('These Ghosts Are Family')
    break;
  case 5:
    console.log('The Catcher in the Rye')
    break;
  case 6:
    console.log('Norwegian Wood')
    break;
  case 7:
    console.log('1984')
    break;
  case 8:
    console.log('No Longer Human')
    break;
  case 9:
    console.log('Winter in Sokcho')
    break;
  case 10:
    console.log('Belonging')
    break;
  case 11:
    console.log('Strange Bedfellows')
    break;
  case 12:
    console.log('Circe')
    break;
  case 13:
    console.log('Red, White & Royal Blue')
    break;
  case 14:
    console.log('Kim Jiyoung, Born 1982')
    break;
  case 15:
    console.log('Girl, WOmen, Other')
    break;
  case 16:
    console.log('Aristotle 1')
    break;
  case 17:
    console.log('They Both Die at the End')
    break;
  case 18:
    console.log('Ucieczka od bezradnosci')
    break;
  case 19:
    console.log('Grown Ups')
    break;
  case 20:
    console.log('Men Explain Things to Me')
    break;
  case 21:
    console.log('Klara and the Sun')
    break;
  case 22:
    console.log('Komodo')
    break;
  case 23:
    console.log('The Mind of a Murderer');
    break;
  case 24:
    console.log('Czula przewodniczka')
    break;
  case 25:
    console.log('Whats mine and yours')
    break;
  case 26:
    console.log('The Japanese Devil')
    break;
  case 27:
    console.log('The 7 Husbands of Evelynn Hugo')
    break;
}

so it works and in the terminal I can see the titles of the books, but I can't quite put it as a function in HTML. I wanted to make a simple page where you can click a button and there will be a little field where the title would pop up. So far I created this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="book gen/book generator.css">
</head>
<body>
    <div class="introduction">
        <h1>Rain's book randomizer 0.1v</h1>
            <p>Just click the button down below and computer will choose a book for you</p>
                <button onclick="console.log(rndInt)" type="button">Click me!</button>
            </div>

            <script>
                function randomIntFromInterval(min, max) { // min and max included 
  return Math.floor(Math.random() * (max - min + 1) + min)
}


const rndInt = randomIntFromInterval(1 , 27)
  

switch(rndInt){
  case 1:
    console.log('Beze mnie jesteś nikim. Przemoc w polskich domach');
    break;
  case 2:
    console.log('Frankenstein')
    break;
  case 3:
    console.log('The house on the Mango Street')
    break;
  case 4:
    console.log('These Ghosts Are Family')
    break;
  case 5:
    console.log('The Catcher in the Rye')
    break;
  case 6:
    console.log('Norwegian Wood')
    break;
  case 7:
    console.log('1984')
    break;
  case 8:
    console.log('No Longer Human')
    break;
  case 9:
    console.log('Winter in Sokcho')
    break;
  case 10:
    console.log('Belonging')
    break;
  case 11:
    console.log('Strange Bedfellows')
    break;
  case 12:
    console.log('Circe')
    break;
  case 13:
    console.log('Red, White & Royal Blue')
    break;
  case 14:
    console.log('Kim Jiyoung, Born 1982')
    break;
  case 15:
    console.log('Girl, WOmen, Other')
    break;
  case 16:
    console.log('Aristotle 1')
    break;
  case 17:
    console.log('They Both Die at the End')
    break;
  case 18:
    console.log('Ucieczka od bezradnosci')
    break;
  case 19:
    console.log('Grown Ups')
    break;
  case 20:
    console.log('Men Explain Things to Me')
    break;
  case 21:
    console.log('Klara and the Sun')
    break;
  case 22:
    console.log('Komodo')
    break;
  case 23:
    console.log('The Mind of a Murderer');
    break;
  case 24:
    console.log('Czula przewodniczka')
    break;
  case 25:
    console.log('Whats mine and yours')
    break;
  case 26:
    console.log('The Japanese Devil')
    break;
  case 27:
    console.log('The 7 Husbands of Evelynn Hugo')
    break;
}
            </script>
    

</body>
</html>

any ideas ?

Familiarize yourself with the [DOM API](//developer.mozilla.org/docs/Web/API/Document_Object_Model) and with [events](//developer.mozilla.org/docs/Web/Guide/Events). Also, see [Getting a random value from a JavaScript array](/q/4550505/4642212). — Sebastian Simon, Feb 21 '22 at 18:39
Either make popup with DOM element or handle poppup with `display: block` and `display: none` — Faheem azaz Bhanej, Feb 21 '22 at 18:41

score 1 · Accepted Answer · answered Feb 21 '22 at 18:43

First, your button needs to call a function - not console.log - for example:

<button onclick="pickBook()" type="button">Click me!</button>

Then you need that function. There are many ways to do this, but an easy way would be to set your books as an array and then use the function to pick a random element from the array and use innerHTML to display it.

The element on the page to show the picked book:

<div id='theBook'></div>

The book array:

let books = [
    'Beze mnie jesteś nikim. Przemoc w polskich domach',
    'Frankenstein',
    'The house on the Mango Street',
    'These Ghosts Are Family',
    'The Catcher in the Rye',
    'Norwegian Wood',
    '1984',
    'No Longer Human',
    'Winter in Sokcho',
    'Belonging',
    'Strange Bedfellows',
    'Circe',
    'Red, White & Royal Blue',
    'Kim Jiyoung, Born 1982',
    'Girl, WOmen, Other',
    'Aristotle 1',
    'They Both Die at the End',
    'Ucieczka od bezradnosci',
    'Grown Ups',
    'Men Explain Things to Me',
    'Klara and the Sun',
    'Komodo',
    'The Mind of a Murderer',
    'Czula przewodniczka',
    'Whats mine and yours',
    'The Japanese Devil',
    'The 7 Husbands of Evelynn Hugo'];

And the function:

function pickBook() {
  const rndInt = randomIntFromInterval(0 , books.length-1)
  let book = books[rndInt];
  document.querySelector('#theBook').innerHTML = book;
}

It worked perfectly, I forgot to delete the console.log() when I was just messing around with the code. I will look over the code many times to fully understand the use of .querySelector since I am a complete beginner. I was hoping it would work with the switch statement and I could be proud of myself of figuring out this one on my own but I guess not today haha — Mikolaszko, Feb 21 '22 at 18:54

How do I combine this function with html?

1 Answers1