Poem randomizer won't run

Hello! I am trying to make a randomizer for my poems. I want people that visit my website to press a button that will randomly bring them to a poem. This was the best article I could find to help me (https://www.freecodecamp.org/news/creating-a-bare-bones-quote-generator-with-javascript-and-html-for-absolute-beginners-5264e1725f08/), but it won’t operate. Please help me. Also, if you have a better idea, I am completely open to any and all suggestions.

This is the HTML:

<!DOCTYPE html>

<html>
    
    <head>
        
        <title>
            
            MM
            
        </title>
    
    </head>

    <body>
    
        <h1> Whesh.</h1>
        
        <div id="poemDisplay">
        
            <button onclick="newPoem()">
        
                NEW CONTENT
            
            </button>
        
        </div>
        
        <script src="Poems.js">
        
        </script>
        
    </body>

</html>

Here is the JavaScript format:

var poems = [
    "LOW BUDGET LIFE. A 0.99 cent life where love apparently comes a dime a dozen. Diligently I stand against the enemy aforementioned as myself. Mystified to a degree above 90 I wish to melt in your arms but you have an army waiting to take me down.. Only death awaits me.. I'm just wish I could live my life loving you but can I even do that? A disease. Im beat. my feet hurt and I barely eat... Watch me as I deteriorate to the beat in this low budget lifestyle.",
    "TOXIC MASCULINITY. We grow to not understand the woes of our own. We fear self expression and hide in our tough little shells that don’t speak. A kiss on the lips can instantly change your sexuality if told about. So you never speak of it and you go about each day holding the secret because consequences of telling would be too grave. But see you hid it from the person you love most and now that you’ve told them too late you’ve dug your own grave. Speak your truth little one for you are big now and have no need to hide under your bed when it storms."
];

function newPoem {
    var randomNumber = Math.floor(Math.random() * (poems.length));
    document.getElementById('poemDisplay').innerHTML = poems[randomNumber]
}

Try playing with .textContent instead of .innerHTML as it doesn’t look like you’re trying to generate any new HTML, but rather an item from your ‘poems’ array.

I’ve made something similar with quotes. Feel free to take a peek at mine if you’d like to get some ideas.

https://codepen.io/jr4y/pen/wvGrWgb

Thank you! It worked. Do you know if there is a way for me to separate the poems into stanzas?

Like This:

A 0.99 cent life where love apparently comes a dime a dozen.

Diligently I stand against the enemy aforementioned as myself.

Mystified to a degree above 90

I wish to melt in your arms but you have an army waiting to take me down…

Only death awaits me…

I’m just wish I could live my life loving you but can I even do that?

A disease. I’m beat. my feet hurt and I barely eat…

Watch me as I deteriorate to the beat in this low budget lifestyle.

just because it is a poem, not use it to forse line breaks in other cases, but you can add <br> where you want the line break in the string

also I suggest you make a paragraph in which to display the poem, as the current setup overwrite the button when the poem is displayed

I tried putting the
tag within the JavaScript text like this:

“A 0.99 cent life where love apparently comes a dime a dozen.
Diligently I stand against the enemy aforementioned as myself.
Mystified to a degree above 90
I wish to melt in your arms but you have an army waiting to take me down…
Only death awaits me…
I’m just wish I could live my life loving you but can I even do that?
A disease. Im beat. my feet hurt and I barely eat…
Watch me as I deteriorate to the beat in this low budget lifestyle.”

but nothing changed.

The break tags worked in my response, though. So, my response looks like what I was going for.

can you give the link to your project?

also

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Here is a picture of the code in Brackets. I don’t know how to properly send a file or type in this text editor.

I tried to place the <br> tag within the poem in JavaScript to create stanzas, but this picture was the result.

<p>

<span id="poem">“A test of faith and time is always most difficult when you haven’t studied.” </span>

<span id="title">Testing</span>

</p>

I even incased this portion in <p> tags, as you suggested, but nothing happened.

a span is an inline element, I don’t suggest using it like

inside the div you should have a p element in which the text is added
and the button to have new content

and, sorry, the screenshots are not of much use, I can’t debug from there

you should also probably use innerHTML for the p element to have the br have effect

<!DOCTYPE html>

<html>
    
    <head>
        
        <link rel="Stylesheet" type="text/css" href="poems.css">
        
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <title>
            
            MoonlitMonolith
            
        </title>
    
    </head>

<body>
        
    <main>
            
        <div class="container">
              
            <div class="quote-section">
                
                <div id="poem"><p>"A test of faith and time is always most difficult when you haven't studied."</p>

                </div>

                <div id="title">Testing

                </div>
                
            </div>
            
            <button type="button" class="btn btn-primary" id="button">
                  
                Generate Poem
                  
            </button>
              
        </div>  
        
        <script>
(function () {
const poems = [
    {
      poem:
        "A 0.99 cent life where love apparently comes a dime a dozen. <br> Diligently I stand against the enemy aforementioned as myself. <br> Mystified to a degree above 90 <br> I wish to melt in your arms but you have an army waiting to take me down.. <br> Only death awaits me.. <br> I'm just wish I could live my life loving you but can I even do that? <br> A disease. Im beat. my feet hurt and I barely eat... <br> Watch me as I deteriorate to the beat in this low budget lifestyle.",
      title:
        "LOW BUDGET LIFE."
    },
    {
      poem:
        "We grow to not understand the woes of our own. We fear self expression and hide in our tough little shells that don’t speak. A kiss on the lips can instantly change your sexuality if told about. So you never speak of it and you go about each day holding the secret because consequences of telling would be too grave. But see you hid it from the person you love most and now that you’ve told them too late you’ve dug your own grave. Speak your truth little one for you are big now and have no need to hide under your bed when it storms.",
      title:
        " TOXIC MASCULINITY."
    }
  ];

  const btn = document.getElementById("button")
  
  btn.addEventListener("click", function() {
    let random = Math.floor(Math.random() * poems.length);
    
    document.getElementById("poem").innerHTML = poems[random].poem;
    document.getElementById("title").innerHTML = poems[random].title;

  });
})();


// document.getElementById("myBtn").addEventListener("click", function() {
//   document.getElementById("demo").innerHTML = "Hello World";
// });

(function () {
const poems = [
    {
      poem:
        "A 0.99 cent life where love apparently comes a dime a dozen. <br> Diligently I stand against the enemy aforementioned as myself. <br> Mystified to a degree above 90 <br> I wish to melt in your arms but you have an army waiting to take me down.. <br> Only death awaits me.. <br> I'm just wish I could live my life loving you but can I even do that? <br> A disease. Im beat. my feet hurt and I barely eat... <br> Watch me as I deteriorate to the beat in this low budget lifestyle.",
      title:
        "LOW BUDGET LIFE."
    },
    {
      poem:
        "We grow to not understand the woes of our own. We fear self expression and hide in our tough little shells that don’t speak. A kiss on the lips can instantly change your sexuality if told about. So you never speak of it and you go about each day holding the secret because consequences of telling would be too grave. But see you hid it from the person you love most and now that you’ve told them too late you’ve dug your own grave. Speak your truth little one for you are big now and have no need to hide under your bed when it storms.",
      title:
        " TOXIC MASCULINITY."
    }
  ];

  const btn = document.getElementById("button")
  
  btn.addEventListener("click", function() {
    let random = Math.floor(Math.random() * poems.length);
    
    document.getElementById("poem").textContent = poems[random].poem;
    document.getElementById("title").textContent = poems[random].title;

  });
})();


// document.getElementById("myBtn").addEventListener("click", function() {
//   document.getElementById("demo").innerHTML = "Hello World";
// });


        </script>
        
    </main>
        
</body>
    
</html>

I made the corrections, but it’s still happening. I will try anything you suggest.

Wait. I realized I accidentally added the scripting twice. I deleted the copy, tried it again and it worked! THANK YOU, THANK YOU for being so patient with me. I have learned a lot. My next goal is to tweak the formatting and spacing a bit and add the rest of the poems.

I suggest you make your #poem and #title elements, p elements

Good job!

Can anyone suggest a way how not to generate same poem twice or more consecutively?

for that you will need sone sort of state handler that keeps tracks of the last how many you want to keep track to avoid repetition

1 Like

Any links, videos or documentation?

it can just be an array in which you store the indexes of last 2-3 quotes

state is used in react, I don’t have documentation for just javascript

1 Like