CODEWITHSUNDEEP
javascript
Path Parakh
Path Parakh

Reputation: 127

When i click button the value is not sending in js?

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>

Upvotes: 1

Views: 182

Answers (2)

Amini
Amini

Reputation: 1792

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>

Upvotes: 0

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23490

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>

Upvotes: 1

Related Questions