The code i have written doesnt show results on input percentage-CodePudding

Hi im trying to calculate the percentage of 2 inputs but its not showing results can anyone tell me whats the problem

var Shots = document.getElementById("shots").value;
var Makes = document.getElementById("makes").value;

var results = (Makes / Shots) * 100;

function perqindja() {
    document.getElementById("answer").innerHTML = results;
};

<h2>Calculate your shots</h2>
<p>Type the number of shots taken:</p>
<input type="number" name="Shots" id="shots">
<p>Type the number of shots made:</p>           
<input type="number" name="Makes" id="makes">
<button onclick="Calculate()">Calculate</button>
<p>The shot percentage:<span id="answer"></span></p>

CodePudding user response：

You should define the variable inside the function so that it could store the input value after user click the button. Also, you doesn't define the Calculate(). I remove the perqindja() since I don't find it user in the code.

function Calculate() {
        var Shots = document.getElementById("shots").value;
var Makes = document.getElementById("makes").value;

var results = (Makes / Shots) * 100;

    document.getElementById("answer").innerHTML = results;
};

<p>Type the number of shots taken:</p>
<input type="number" name="Shots" id="shots">
<p>Type the number of shots made:</p>           
<input type="number" name="Makes" id="makes">
<button onclick="Calculate()">Calculate</button>
<p>The shot percentage:<span id="answer"></span></p>

CodePudding user response：

The first problem is that the function Calculate is not defined. By the way, in javascript it is a good practice to give function lower case names. Second, you need to pass values to the calculate function.

Everything should work once you fix these 2 issues.

CodePudding user response：

Your functions name is ‘perqindja()’ but you try to call ‘ Calculate()’ function on click in your html