I make mini app to find factorial. When i click button and get number in js it is not showing any thing.
This is my script.js
function factorial() {
let number = document.getElementById("number")
console.log(number);
for (let i = number - 1; i >= 1; i++) {
number = i * number
console.log(number);
}
console.log(number);
return number;
}
this is my index.html
<input type="text" name="number" class="number" id="number">
<button onclick="factorial()" class="btn btn-primary " style="padding-right: 160px;padding-left: 160px">Find</button>
Like this for example:
function factorial() {
let number = document.getElementById("number").value
console.log(number);
for (let i = number - 1; i >= 1; i--) {
number = i * number
}
document.getElementById("result").innerHTML = number
}<input type="text" name="number" class="number" id="number">
<button onclick="factorial()" class="btn btn-primary " style="padding-right: 160px;padding-left: 160px">Find</button>
<h3 id="result"></h3>There is a property called .value. This will return the inner value of inputs (You can try it). After you achieved the value of the input, then you can run your statement.
Read about .textContent here.
Read about .querySelector() here.
Tip: Don't ever use onclick(). No one uses it anymore, use .addEventListener() instead.
function factorial() {
// Edited here
let number = document.getElementById("number").value;
console.log(number);
for (let i = number - 1; i >= 1; i++) {
number = i * number
console.log(number);
}
// As you wanted to put the result in the html file
document.querySelector('h1').textContent += number;
}<input type="text" name="number" class="number" id="number">
<button onclick="factorial()" class="btn btn-primary " style="padding-right: 160px;padding-left: 160px">Find</button>
<h1>Result: </h1>