Cant Get Answer Back In answer Box NAN is being shown

Question

it does not returns prpoer answer it returnes NAN in Answer

 <html>
    <head>
    
    <script type="text/javascript">
    function pro(n,p)
    {
    var number=parseInt(n); 
    var powe=parseInt(p); 
    for(var i=1;i<powe;i++)
    {
     number*=number;
    }
    document.getElementById("answer").value=number;
    } 
    </script>
    </head>

<body> 
<form name="F" > 
Enter Number <input type="text" name="num" id="num"/> 
Enter Power <select name="powe" id="powe"> 
  <option value="2" >square</option> 
  <option value="3" >cube</option> 
</select> 
Answer<input type="text" name="Answer" id="answer" /> 
<input type="button" onClick="pro(num,powe)" value="Calculate" />
</form>
</body>
</html>

Never use the comments to add code to your question. Just edit the question and add the code. — Scott Marcus, Mar 22 '19 at 21:09

Scott Marcus · Answer 1 · 2019-03-22T21:45:33.697

The issue is this: onClick="pro(num,powe)". Instead of the values for num and powe being gotten from the input elements and passed into the pro function, the actual element references (which are not numbers) are being passed.

To solve this problem, you'll need to get the values of the elements. But, before you just make a quick edit to your code, don't use inline HTML event attributes (onclick) in the first place. Instead, separate your JavaScript from your HTML and set up event handlers using modern standards with .addEventListener() as shown below.

Also (FYI):

Since you aren't actually submitting form data anywhere, you don't need a <form> element.
It's not necessary to use parseInt with p.value because that value is coming from your select and you've already set those at whole numbers.
Don't bother with self-terminating tags (<input />) as you gain nothing from using them.
If you are expecting only numeric input, it's better to use input type=number which restricts the user input to numbers. Making this change also saves you from worrying about parseInt on the input number being misinterpreted as other bases than 10.
Since you don't want the user to be able to change the result of the operation, it's better to display it in a non-editable element, like a span.
It's a good idea to move your <script> element to just before the closing body tag because, by the time the parser reaches that point, all your HTML elements will have been parsed into memory.

<html>
  <head>
  </head>
  <body> 
     <div>    
       Enter Number <input type="number" name="num" id="num"> 
     </div>
     <div>
       Enter Power 
       <select name="powe" id="powe"> 
         <option value="2">square</option> 
         <option value="3">cube</option> 
       </select> 
     </div>
     <div>
       Answer <span id="answer"></span>
     </div>
     <div>
       <input type="button" value="Calculate">
     </div>
  <script>
  
    // Get references to the inputs, the answer container and the button
    let inputNum = document.getElementById("num");
    let power = document.getElementById("powe");
    let answer = document.getElementById("answer");
    let btn = document.querySelector("input[type='button']");
    
    // Set up the click event handler for the button
    btn.addEventListener("click", function(){
      // Now you need to get the input values and pass them 
      // to the function that will act with them
      pro(inputNum.value, power.value);
    });
    
    function pro(n,p) {
      var number = parseInt(n); 
      for(var i = 1; i < p; i++) {
        number *= number;
      }
      answer.textContent = number;
    } 
 </script>
</body>
</html>

score -1 · Answer 2 · answered Mar 22 '19 at 21:19

-1

Try

document.getElementById("answer").innerHTML = number

answered Mar 22 '19 at 21:19

jass

343
3
15

Cant Get Answer Back In answer Box NAN is being shown

2 Answers2