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);
})