CODEWITHSUNDEEP
javascripthtml
nisyedlah
nisyedlah

Reputation: 103

Finding the total or average from four input fields and displaying the value in another input field

I'm trying to use JS to get the sum or the average of four numbers from an input field and then displaying that in another text field. There's a radio button to choose if it's the total or average that is to be displayed.

Here is my html for the form:

<form name="calculate">

Mark: <input type="number" name="number" id="num1"><br>
Mark: <input type="number" name="number" id="num2"><br>
Mark: <input type="number" name="number" id="num3"><br>
Mark: <input type="number" name="number" id="num4"><br>

<input type="radio" id="numTotal" name="choice" value="total">Find total</input>
<input type="radio" id="numAvg" name="choice" value="average">Find average</input>
<br>

<input type="submit" form="calculate" value="Submit" onclick="calculate();">
<input type="reset" form="calculate" value="Reset">
<br>
Result: <input type="text" name="result" id="result" value="" disabled>

</form>

And down here is my JS code:

function calculate(){

var arr = document.getElementsByName("number");
var tot = 0;
var av = 0;

for(var i = 0; i < arr.length; i++) {
    if(parseInt(arr[i].value)){
            tot += parseInt(arr[i].value);
    }
}

av = tot/arr.length;

if(document.getElementById("numTotal").checked) {
    document.calculate.getElementbyId("result").value = tot;
}

if(document.getElementById("numAvg").checked) {
    document.getElementbyId("result").value = av;
}

}

After running this, the result input field doesn't show the input. Is the error in my script or in the html or both?

Upvotes: 0

Views: 2170

Answers (2)

Dmitriy
Dmitriy

Reputation: 3765

<script type="text/javascript">
    function calculateFunc() {

        var arr = document.getElementsByName("number");
        var tot = 0;
        var av = 0;

        for (var i = 0; i < arr.length; i++) {
            if (parseInt(arr[i].value)) {
                tot += parseInt(arr[i].value);
            }
        }

        av = tot / arr.length;

        if (document.getElementById("numTotal").checked) {
            document.getElementById("result").value = tot;
        }

        if (document.getElementById("numAvg").checked) {
            document.getElementById("result").value = av;
        }

        return false;
    }
</script>

<div class="form">
<form name="calculate">

Mark: <input type="number" name="number" id="num1"><br>
Mark: <input type="number" name="number" id="num2"><br>
Mark: <input type="number" name="number" id="num3"><br>
Mark: <input type="number" name="number" id="num4"><br>

<input type="radio" id="numTotal" name="choice" value="total">Find total</input>
<input type="radio" id="numAvg" name="choice" value="average">Find average</input>
<br>
<br>
Result: <input type="text" name="result" id="result" value="" disabled>

</form>

<input type="submit" value="Submit" onclick="calculateFunc();">
<input type="reset" value="Reset">
</div>

This is work for me in Chrome :)

Upvotes: 1

Dmitriy
Dmitriy

Reputation: 3765

document.calculate.getElementbyId("result").value = tot;

if(document.getElementById("numTotal").checked) {
    document.calculate.getElementbyId("result").value = tot;
}

if(document.getElementById("numAvg").checked) {
    document.getElementbyId("result").value = av;
}

need to replace

 document.getElementbyId("result").value = tot;

 if(document.getElementById("numTotal").checked) {
     document.calculate.getElementById("result").value = tot;
 }

 if(document.getElementById("numAvg").checked) {
     document.getElementById("result").value = av;
 }

Upvotes: 0

Related Questions