I am not really sure what is happening but I want to write a program that puts commas in a number you input, but when I run it and input a number the output is blank. Can anyone help???
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js" defer></script>
</head>
<body>
<h1>Enter your number below:</h1>
<input type="text" placeholder="Right here" id="number">
<button id="submitButton">Add commas</button><br>
<h1 id="numberWithCommas">0</h1>
</body>
</html>
JavaScript:
const number = document.querySelector("#number").value;
let answerElement = document.querySelector("#numberWithCommas")
const button = document.querySelector("#submitButton");
button.addEventListener("click", () => {
answerElement.textContent = number.toLocaleString();
})
I am not really sure what is happening so I can't tell you much. Sorry.
let answerElement = document.getElementById('numberWithCommas');
const button = document.getElementById('submitButton');
button.addEventListener("click", () => {
const number = document.getElementById('number').value;
answerElement.textContent = Number(number).toLocaleString();
})You need to use Number(x) for it to work. Also, the variable number should be defined after the button press, each time.