Click event listener not working properly

What I try to make here is to make the user input in the text form appear as a quote on the page. I tried to use the click event listener but the result is only happened only during the click happen and not maintain.

Here is my HTML code:

<!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">
    <link rel="stylesheet" href="new2.css">
    <title>QuotePersonalize</title>
</head>
<body>
    <div class="header" id="header">
        <h2 class="title" id="title">QuotePersonalize</h2>
    </div>
    <div class="body" id="body">
        <form class="user" id="user">
            <label for="quote">Enter your quote: </label>
            <input type="text" id="quote" value="quote"><br>
            <label for="author">Enter your name: </label>
            <input type="text" id="author" value="name">
            <button class="submit" id="submit" onclick="submission()">submit</button>
        </form>
    </div>
    <div class="res" id="res">
        <p class="result" id="result"></p>
    </div>
    <script type="text/javascript" src="new2.js"></script>
</body>
</html>```

//Here is my js file

const sub = document.getElementById('submit');
const quote = document.getElementById('quote').value;
const result = document.getElementById('result');
sub.addEventListener('click', e => {
    result.innerHTML = quote;
    console.log(result);
})

Where is this submission function?

I’ve copied your code in codepen, having bunch of errors in the console there:

Uncaught SyntaxError: Invalid or unexpected token 
 at https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-6eda6707-08ca-f43b-2f12-fa2c5cd72ec3:1
Uncaught ReferenceError: submission is not defined 
 at https://cdpn.io/cpe/boomboom/index.html?key=index.html-6eda6707-08ca-f43b-2f12-fa2c5cd72ec3:48
Uncaught SyntaxError: Invalid or unexpected token 
 at https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-2139e14a-05c8-2afb-5c87-c436d0255ef3:1
1 Like

where is your new2.js file
please share the same

1 Like

As @admit8490 points out, you reference a function named submission in your html for the button’s onclick attribute, but there is no such function named in the JavaScript code you posted.

You already added a click event listener on the button in your JavaScript code, so you can delete the onclick="submission()" anyway. To get the quote to show up when you click the button, you need to read about the Event.preventDefault() method to avoid submitting the form (which will just reload the page based on your current form code) before having a chance to display the quote.

1 Like

thank you very much for pointing out the error from my code. Really helps me to improve. :grinning:

@KeshavMaheshwari new2.js is the same as the js file mentioned at the bottom of the topic. :grinning:

Thank you for the solution given. I have no idea this method exists before. Really help me a lot.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.