How are html id attributes passed as an argument to a separate JavaScript file? -


i'm still new programming. i've followed tutorial javascript calculator online, , in tutorial html id attributes passed along separate javascript file. file passed such:

<script src="logic.js"></script> 

here example:

var box = document.getelementbyid('display');  function addtoscreen(x){   box.value += x;  if (x == 'c') {   box.value = ' ';   } } 

where box variable empty field in calculator integers , operations entered (the 'c' button clear calculator). function addtoscreen has parameter x, , x gets input such number 9, entered following input:

<input type ="button" value="9" id="keys" onclick="addtoscreen('9')"> 

i'm trying understand how these passed more, i'm playing them. have made separate html , javascript file, , there 3 input fields user input numbers into, , button click average 3 numbers:

<form> <input type="number" id="first"> <br> <input type="number" id="second"><br> <input type="number" id="third"><br>  result:  <input type="text" id="avgresult" disabled="true"> <br> <input type="button" value="average" onclick="average()"><br> </form>  <script src="logic.js"></script> 

and javascript file named logic.js has:

ar avgresult = document.getelementbyid("avgresult");  function average(a, b, c) {   = number(document.getelementbyid("first"));   b = number(document.getelementbyid("second"));   c = number(document.getelementbyid("third"));   avgresult.value = ((a + b + c) / 3); } 

whatever combination of numbers enter results in nan. thought useful use number() method convert string number (i had input tag's attribute set "text", opposed "number".

any advice or direction pointing helpful. thank you!

issue:

document.getelementbyid() returns dom element. means trying convert dom element number, that's why result nan (not number).

solution:

what need value of element. document.getelementbyid("...").value solve issue.

p.s.

  1. your average function doesn't need arguments.
  2. put let before variables (a, b, , c) correctly initialize them.
  3. don't use <br> tags new lines, use css instead.

if have questions please put them below.


Comments

Popular posts from this blog

scala - 'wrong top statement declaration' when using slick in IntelliJ -

c# - DevExpress.Wpf.Grid.InfiniteGridSizeException was unhandled -

PySide and Qt Properties: Connecting signals from Python to QML -