Front End Development Libraries Projects - Build a Random Quote Machine

I am trying to build a quote machine. everything is almost set up, but I have added JavaScript code to change the default quote and author when a user types something in there. but it does not work when I test it in my project. could someone tell me what is happening?
here is my html and JS code:

    <title>Quote Machine</title>
    <meta name="viewport" charset="utf-8" content="width=device-width,initial-scale=1.0"/>
    <link rel="stylesheet" href="" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <div class="wrapper" id="quote-box">
      <textarea rows="5" cols="30" class="quote" type="text" id="yourquote" placeholder="Write your quote"></textarea>
    <input class="quote" id="yourauthor" type="text" placeholder="Write the name of the author"/>
      <p><span id="text">“If you resist change, you resist life.” </span></p>
      <p><span id="author">(Sadhguru)</span></p>
  <span><a target="a_blank" id="tweet-quote" href=""><i class="fab fa-twitter"></i></a></span>
    <button id="new-quote">New quote</button>

and JS:

function quoteHandler(){
  if(e.keycode == 13){
    var quoteInput = document.getElementById("text");
    var quoteField = document.getElementById("myquote");
    quoteField.innerHTML = quoteInput.value;
    var authorInput = document.getElementById("author");
    var authorField = document.getElementById("myauthor");
    authorField.innerHTML = authorInput.value;
document.addEventListener("keyup", quoteHandler);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge: Front End Development Libraries Projects - Build a Random Quote Machine

Link to the challenge:

I have no idea why my code does not appear here.
I put it here but when I click on “post”, the code disappears.

I’ve edited your code for readability. 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 (').

sure thanks. But did you also answer my question?bcuz, if so, I can not see it.

I wasn’t trying to answer your question. Just show you how to post code on the forum.

1 Like

could someone please tell me why my JS code wont work?

what is the JS code supposed to be doing?

Also I opened developer tools when looking at your code and noticed this error:
index.html:25 Uncaught ReferenceError: e is not defined
at HTMLDocument.quoteHandler (index.html:25:11)

Edit: I put the script tag at the bottom of the body element. Not sure if that is where you had it (couldn’t tell exactly where you were placing it from the code above)

Thank you. I had not put script in my html code, it is somehow strange on codepen, bcuz it has 3 sections separated and I wrote my JS codes right in JS column.
anyway, the code in JavaScript should work as below:
when a user type anything in the quote box or author box the default quote and author which I wrote in the page should be changed to what the user types.

can you share the link to the codepen then?
You should probably fix the uncaught reference error also

this is the link to the result page:

and this is the link to my codes:

try to fix the exceptions on the page.
(right - click and choose Inspect in Chrome or developer tools in Firefox to review the errors that the page is generating)

Oh ok. Thank. I will.

btw, you can also use the Analyze HTML, Analyze CSS and Analyze JS menu options in codepen to help you find errors.

1 Like

all 3 say “we could not find any error”.
but still JS does not work as expected.

as soon as I type something I see an uncaughtexception

ReferenceError: e is not defined
at HTMLDocument.quoteHandler

1 Like

Oh, for me it does not show any errors. but you know what e is? I wrote:
e.keycode ==13.

This ReferenceError is shown in the developer tools in the browser (open your dev tools and watch it as you type)

If you look up the error in google you can see it means that it means that ‘e’ references something unknown.
Who has defined e so you can use it?

Oh I learned it in CS50 course. but now I changed it to event.key. can you please check it now?

Your Codepen has JS code in the HTML section and in the JS section. Pick one section or the other to put the code you want to use but not both.

The JS section shows you using event.keycode.

I think you need to add a console.log(event) before your if statement, so you see exactly what you are checking against.

I deleted the code in JS section. Do you say that now event.key is fine?