Hello,
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:
<!DOCTYPE HTML>
<html>
<head>
<title>Quote Machine</title>
<meta name="viewport" charset="utf-8" content="width=device-width,initial-scale=1.0"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
</head>
<body>
<div class="wrapper" id="quote-box">
<textarea rows="5" cols="30" class="quote" type="text" id="yourquote" placeholder="Write your quote"></textarea>
<br>
<input class="quote" id="yourauthor" type="text" placeholder="Write the name of the author"/>
<br>
<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="twitter.com/intent/tweet"><i class="fab fa-twitter"></i></a></span>
<button id="new-quote">New quote</button>
</div>
</body>
</html>
and JS:
<script>
function quoteHandler(){
if(e.keycode == 13){
var quoteInput = document.getElementById("text");
var quoteField = document.getElementById("myquote");
quoteField.innerHTML = quoteInput.value;
}
if(e.keycode==13){
var authorInput = document.getElementById("author");
var authorField = document.getElementById("myauthor");
authorField.innerHTML = authorInput.value;
}
}
document.addEventListener("keyup", quoteHandler);
</script>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36
Challenge: Front End Development Libraries Projects - Build a Random Quote Machine
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.
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.
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)
