HTML not changing from JavaScript script

Question

I am trying to make a basic Average Calculator in HTML and JavaScript. I have the input field and buttons in HTML and the averaging and Reset functions in JavaScript. I cannot find where my problem is.

HTML Code:

<section class="script">
  <script src="avg.js"></script>
  <input type="number" id="inputVal" placeholder="Input Value..."></number><br>
  <button id="Btn_Avg" onclick="AddFunc(inputVal.Value)">Average</button>
  <button id="Btn_Rst" onclick="ResetFunc()">Reset</button>
  <p>Average: </p><p id="average">OK</p>
</section>

JavaScript script (avg.js):

global var count = 0;
global var total = 0;
global var avg = 0;
global var result = document.getElementById("average");
result.textContent = 0;

function AddFunc(value){
  total += value;
  count += 1;
  avg = total / count;
  result.innerHTML = '' + avg;
}

function ResetFunc() {
  total = 0;
  count = 0;
  avg = 0;
  result.innerHTML = '0';
}

Evan Winter · Accepted Answer · 2019-03-06 02:36:20Z

1

Well, for one, it should be inputVal.value (lowercase value). That should correctly pass the input value to your function. But your question doesn't really describe what issue you're running into, so I'm not sure that answers your question.

Also I don't think global is a valid keyword for JavaScript.

answered Mar 6, 2019 at 2:36

Evan Winter

3732 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maheer Ali · Accepted Answer · 2019-03-06 02:37:56Z

The problem is in this part onclick="AddFunc(inputVal.Value)". This will not pass value of inputVal to the function. You should store the <input> element in a variable and access its value using small vi.e value

var count = 0;
var total = 0;
var avg = 0;
var result = document.getElementById("average");
var input = document.getElementById('inputVal')
result.textContent = 0;

function AddFunc(e){
  let value = Number(input.value);
  total += value;
  count += 1;
  avg = total / count;
  result.innerHTML = '' + avg;
}

function ResetFunc() {
  total = 0;
  count = 0;
  avg = 0;
  result.innerHTML = '0';
}

<input type="number" id="inputVal" placeholder="Input Value..."></number><br>
  <button id="Btn_Avg" onclick="AddFunc(event)">Average</button>
  <button id="Btn_Rst" onclick="ResetFunc()">Reset</button>
  <p>Average: </p><p id="average">OK</p>

Collectives™ on Stack Overflow

HTML not changing from JavaScript script

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related