No output on clicking <button> linked to javascript

March 19, 2024

Following is the code: I cannot find the mistake

<!DOCTYPE html>
<html>
<head>
  <title>Party Sequence</title>
</head>
<body>

<label for="inputN">Enter the value of n:</label>
<input type="number" id="inputN" min="1" step="1" value="1">
<button onclick="result2(number)">Calculate</button>
<p id="result"></p>

<script>
  number=document.getElementById("inputN").value;
    function result2(number)
    {
      return (number-1)**(number-2);
      document.getElementById("result").innerHTML="Result: "+ result2(number);
    }
</script>

</body>
</html>

I tried removing the (number) argument of function yet shows nothing on clicking the button.

>Solution :

I’ve checked your code, it seems like you are trying to perform button click action using Javascript, and I noticed that you are trying to access "number" variable from Javascript on HTML. But we are unable to use javascript variables directly on HTML, So we can directly define the number on the javascript result2() function instead of passing arguments, and also you have to put the return on last.
the code might look like,

<!DOCTYPE html>
<html>
<head>
  <title>Party Sequence</title>
</head>
<body>

<label for="inputN">Enter the value of n:</label>
<input type="number" id="inputN" min="1" step="1" value="1">
<button onclick="result2()">Calculate</button>
<p id="result"></p>

<script>
  function result2() {
    var number = document.getElementById("inputN").value;
    var result = (number - 1) ** (number - 2);
    document.getElementById("result").innerHTML = "Result: " + result;
    return result
  }
</script>

</body>
</html>