We Keep Coding

Array sum returns NaN

I have an array with three values, and 1 seperate value all acquired from a form.
I am trying to multiply the top number (3) with the others (12, 3 and 31) and add those up.
This is what i tried:
HTML:
<p>Aantal sets: <span id="dynamicSet"></span></p>
<table id="resultTable" cellpadding="1" cellspacing="1" border="1">
<tr>
<th scope="col"></th>
<th scope="col">Hoeveelheid</th>
<th scope="col">Gewicht x KG</th>
</tr>
<tr>
<td>1</td>
<td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
<td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
</tr>
<tr>
<td>2</td>
<td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
<td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
</tr>
<tr>
<td>3</td>
<td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
<td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
</tr>
</table>
And my JS:
var HoeveelheidArr=[];
var total = 0;
const setAmount = document.getElementById("dynamicSet").innerHTML;
function getData(){
$('#resultTable .HoeveelheidField > input ').each(function() {
HoeveelheidArr.push($(this).val());
});
console.log(HoeveelheidArr);
HoeveelheidArr.forEach(function getReps (value) {
console.log(value);
for(var i = 0; i < HoeveelheidArr.length; i++){
total += value[i] * setAmount;
}
});
console.log(total);
}
However as you may see in the picture i keep getting Not a Number back from the console. Despite the console showing all of them appear as ints? Do you see what I do wrong? I also tried:
parseInt(value[i])

Your setAmount variable is a string from innerHTML.
Use parseInt() on both variables:
total += parseInt(value[i]) * parseInt(setAmount);
Update
After a deeper review, you got a couple of other problems.
Your setAmount variable is "", because it's not set in the HTML.
You are looping through the HoeveelheidArr twice
You should use value instead of value[i]
I made a working example:
var HoeveelheidArr = [];
var total = 0;
const setAmount = document.getElementById("dynamicSet").innerHTML || 0;
function getData() {
HoeveelheidArr = [];
total = 0;
$('#resultTable .HoeveelheidField > input').each(function() {
HoeveelheidArr.push($(this).val() || 0);
});
console.log("HoeveelheidArr:", HoeveelheidArr);
for (var i = 0; i < HoeveelheidArr.length; i++) {
console.log("setAmount:", setAmount);
total += parseInt(HoeveelheidArr[i]) * parseInt(setAmount);
}
console.log("Total:", total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Aantal sets: <span id="dynamicSet">1</span></p>
<table id="resultTable" cellpadding="1" cellspacing="1" border="1">
<tr>
<th scope="col"></th>
<th scope="col">Hoeveelheid</th>
<th scope="col">Gewicht x KG</th>
</tr>
<tr>
<td>1</td>
<td class="HoeveelheidField">
<INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
</td>
<td class="GewichtField">
<INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
</td>
</tr>
<tr>
<td>2</td>
<td class="HoeveelheidField">
<INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
</td>
<td class="GewichtField">
<INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
</td>
</tr>
<tr>
<td>3</td>
<td class="HoeveelheidField">
<INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
</td>
<td class="GewichtField">
<INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
</td>
</tr>
</table>
<button onclick="getData()">Test</button>

why are you using value[i] value is not an array it's just a number.
console.log([value[i]);
the value[1] and value[2] is undefined that why you are getting NaN
If you tell me what do you want to do through this code, I can correct it

How to get avg values from input boxes with list of records using javascript?

Im a beginner of js... I want to show a list of students. With this, ppl can edit directly 2 values of grade in input box, and avg grade is auto caculate and inport to 3rd input box. I could do with 1 ppl, but 2 or more I dont know how to do.
Could anyone help me?
This is my code: https://jsfiddle.net/sxxfrppo/
JS:
$(document).ready(function() {
$('[id^=grade]').on('change', function() {
var grade = 0;
$('[id^=grade]').each(function(index) {
grade += parseFloat($(this).val() ? $(this).val() : 0);
});
var avggrade = $('#avg').val(grade.toFixed(2)/2);
});
});

Element.id should be unique in doucment. Substitute duplicate ids beginning with grade, and avg with classNames at html. Use [class*=grade] selector to select all elements where grade is included in className, $(this).closest("tr") to select parent element where change event occurs.
You can also replace ternary $(this).val() ? $(this).val() : 0 with +this).value where + operator converts string .value of input element to number.
$(document).ready(function() {
var grades = $("[class*=grade]")
grades.on("change", function() {
var grade = 0;
var tr = $(this).closest("tr");
$(grades, tr).each(function(index) {
grade += +this.value;
});
var avggrade = $(".avg", tr).val(grade.toFixed(2) / 2);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover">
<thead class="">
<tr>
<th width="40" class="text-center">
#
</th>
<th>
Name
</th>
<th>
Grade 1
</th>
<th>
Grade 2
</th>
<th>
AVG
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>
Luna
</td>
<td>
<input class="form-control text-right grade1" type="number" min="0" max="10" step="0.01" name="grade1" value="" />
</td>
<td>
<input class="form-control text-right grade2" type="number" min="0" max="10" step="0.01" name="grade2" value="" />
</td>
<td>
<input class="form-control text-right avg" type="number" min="0" max="10" step="0.01" name="avg" value="" />
</td>
</tr>
<tr>
<td></td>
<td>
John
</td>
<td>
<input class="form-control text-right grade1" type="number" min="0" max="10" step="0.01" name="grade1" value="" />
</td>
<td>
<input class="form-control text-right grade2" type="number" min="0" max="10" step="0.01" name="grade2" value="" />
</td>
<td>
<input class="form-control text-right avg" type="number" min="0" max="10" step="0.01" name="avg" value="" />
</td>
</tr>
</tbody>
</table>
jsfiddle https://jsfiddle.net/sxxfrppo/1/

Using so many id's makes it quite complicated. It will only get a lot harder when the number of rows are a lot more.
To make your code flexible, you should be using a class, and some basic jQuery selector functions like closest and find.
We can assign a class "grade" to all grade input boxes and a class "avg" to the average input box.
Refer to this: https://jsfiddle.net/czvf7L9f/9/
<tbody>
<tr>
<td></td>
<td>
Luna
</td>
<td>
<input class="form-control text-right grade" type="number" min="0" max="10" step="0.01" name="grade1" value="" /> <!-- Add grade class -->
</td>
<td>
<input class="form-control text-right grade" type="number" min="0" max="10" step="0.01" name="grade2" value="" /> <!-- Add grade class -->
</td>
<td>
<input class="form-control text-right avg" type="number" min="0" max="10" step="0.01" name="avg" value="" /> <!-- Add avg class -->
</td>
</tr>
<tr>
<td></td>
<td>
John
</td>
<td>
<input class="form-control text-right grade" type="number" min="0" max="10" step="0.01" name="grade1" value="" /> <!-- Add grade class -->
</td>
<td>
<input class="form-control text-right grade" type="number" min="0" max="10" step="0.01" name="grade2" value="" /> <!-- Add grade class -->
</td>
<td>
<input class="form-control text-right avg" type="number" min="0" max="10" step="0.01" name="avg" value="" /> <!-- Add avg class -->
</td>
</tr>
$(function(){
$(".grade").on("change", function() {
var no_of_boxes = 0;
var total = 0;
$(this).closest('tr').find('.grade').each(function() {
if ($(this).val()) {
no_of_boxes++;
total += parseFloat($(this).val())
}
});
var avg = parseFloat(total/no_of_boxes);
$(this).closest('tr').find('.avg').val(avg);
});
});

Multiple instances of same calculator in Javascript

I am new to Javascript and trying to create an on-line score tracker for a card game I play called Hand and Foot. The rules are this, 3 teams play 4 games, the team with the most points at the end wins. I have created a calculator for 1 person for 1 game, but when I duplicate it for the 11 more instances I need, the calculations stop working which I believe has to do with the getElementById not registering with the multiple instances in the html. I would be grateful suggestions on a more elegant way to create instances of this calculator on the same page without having to change the IDs of each field for each play and each game. check out my code Fiddle
<div class="P1G1">
<h1>Game 1</h1>
<form id="calcP1G1">
<h2>Neccessary Piles</h2>
<table>
<td>Clean</td>
<td align="center">
<input id="necCleanP1G1" type="checkbox" class="addon" value="500">
</td>
<td>Dirty</td>
<td align="center">
<input id="necDirtyP1G1" type="checkbox" class="addon" value="300">
</td>
<td>Sevens</td>
<td align="center">
<input id="necSevenP1G1" type="checkbox" class="addon" value="5000">
</td>
<td>Fives</td>
<td align="center">
<input id="necFiveP1G1" type="checkbox" class="addon" value="3000">
</td>
<td>Wilds</td>
<td align="center">
<input id="necWildP1G1" type="checkbox" class="addon" value="2500">
</td>
<td id="necTotalP1G1" style="display:none"></td>
</table>
<hr>
<table>
<tr>
<th class="pile-header">Clean Piles</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="cleanP1G1" type="text" value="0" oninput="calculate()" class="form-control" />
</td>
<td class="result-number">
<input id="resultCleanP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<th class="pile-header">Dirty Piles</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="dirtyP1G1" type="text" oninput="calculate()" value="0" class="form-control" />
</td>
<td class="result-number">
<input id="resultDirtyP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<th class="pile-header">Red 3s</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="redThreeP1G1" oninput="calculate()" value="0" class="form-control" />
</td>
<td class="result-number">
<input id="resultRedThreeP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<th class="pile-header">Card Count</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="cardsP1G1" oninput="calculate()" value="0" class="form-control" />
</td>
<td class="result-number">
<input id="resultCardP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<td class="pile-header">Total</td>
<td class="result-number">
<input id="resultTotalP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
</table>
</form>
</div>
Javascript
function updateTotal() {
var add = 0;
var form = document.getElementById("calcP1G1");
var checkboxes = form.getElementsByClassName('addon');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
add += parseInt(checkboxes[i].value, 10);
}
}
var amount = document.getElementById("necTotalP1G1").innerHTML = add;
}
document.getElementById("calcP1G1").addEventListener('change', updateTotal);
// Run it once at startup
updateTotal();
function calculate() {
var topCards = document.getElementById("necTotalP1G1").innerHTML;
var cleanBox = document.getElementById("cleanP1G1").value;
var totalClean = document.getElementById("resultCleanP1G1");
var resultClean = cleanBox * 500;
totalClean.value = resultClean;
//---------------------//
var dirtyBox = document.getElementById("dirtyP1G1").value;
var totalDirty = document.getElementById("resultDirtyP1G1");
var resultDirty = dirtyBox * 300;
totalDirty.value = resultDirty;
//---------------------//
var redThreeBox = document.getElementById("redThreeP1G1").value;
var totalRedThree = document.getElementById("resultRedThreeP1G1");
var resultRedThree = redThreeBox * 100;
totalRedThree.value = resultRedThree;
//---------------------//
var cardBox = document.getElementById("cardsP1G1").value;
var totalCard = cardBox;
document.getElementById("resultCardP1G1").value = totalCard;
//---------------------//
var total = parseInt(resultDirty) + parseInt(resultClean) + parseInt(resultRedThree) + parseInt(totalCard) + parseInt(topCards);
document.getElementById("resultTotalP1G1").value = total;
}
document.getElementById("calcP1G1").addEventListener('change', calculate);
// Run it once at startup
calculate();

Why is a value in my Form not being passed to the Google code?

I have a Google SideBar populated from a HTML file. This has a button that when pressed passes a number of values from the Form to the Google Apps Script that then deals with the data before passing it to a Google Sheet.
Everything works fine except for 1 thing:
The slide bar that I have created does not pass the value along with all of the other aspects.
Can anyone explain why?
I have an extensive amount of code so what you will see is only the relevant cut down required amount.
HTML:
<form id="form1">
<br>
<table width="100%">
<tr>
<td><p>Action Description: </p></td>
<td colspan="3"> <textarea id="description" name="description" rows="15" cols="22" required> </textarea> </td>
</tr>
<tr>
<td><p>Current Completion Percentage: </p></td>
<td>
<input type="range" min="0" max="100" value="0" id="percent" step="10" onchange="outputUpdate(value)" list="perstep">
<datalist id="perstep">
<option>0</option>
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
<option>60</option>
<option>70</option>
<option>80</option>
<option>90</option>
<option>1000</option>
</datalist>
</td>
<td>
<p><output for="form1" id="level">0</output>%</p>
</td>
</tr>
<tr>
<td><p>Assigned To: </p></td>
<td colspan="3"> <input id="assignedto" name="assignedto" type="text" required /> </td>
</tr>
<tr>
<td><p>Action Number: </p></td>
<td colspan="3"> <input id="actionnum" name="actionnum" type="number" /> </td>
</tr>
</table>
<br>
<hr>
<table width="100%">
<tr>
<td align="center" colspan="3" height="40">
<input id="date" name="date" type="date" required />
<br>
</td>
</tr>
<tr>
<td>
<input onclick="formSubmit()" type="button" value="Submit" />
</td>
<td>
<input onclick="google.script.host.close()" type="button" value="Close" /><br>
</td>
<td>
<input onclick="clearAll()" type="button" value="Clear All" name="clear" /><br>
</td>
</tr>
</table>
</form>
Google .gs Code:
function getValuesFromForm(form1){
var ss = SpreadsheetApp.getActiveSpreadsheet(),
sheet = ss.getSheetByName('Action Plan'),
sheet2 = ss.getSheetByName('Problem Details'),
description = form1.description,
percent = form1.percent,
assignedto = form1.assignedto,
actionnum = form1.actionnum,
date = form1.date,
oldNum = sheet2.getRange(11, 1).getValue(),
today1 = Utilities.formatDate(new Date(),"GMT","dd/MM/yyyy"),
lastCol = sheet.getLastColumn(),
lastRow = sheet.getLastRow(),
datecheck = sheet.getRange(1,lastCol).getValue();
if(description == "" || assignedto == "" || date == ""){
SpreadsheetApp.getUi().alert('Please ensure you have completed the minimal required fields');
} else {
if(datecheck == Utilities.formatDate(new Date(),"GMT","dd/MM/yyyy")) {
sheet.appendRow([oldNum +1, description, percent + " %", assignedto,date]);
sheet.getRange(lastRow +1,lastCol).setValue("New Action");
var head = sheet.getRange(1,1,1,lastCol);
head.setBackground("#b4a7d6");
head.setFontColor("white");
head.setFontWeight("bold");
head.setFontSize(12);
sheet2.getRange(11, 1).setValue(oldNum + 1);
} else {
sheet.getRange(1,lastCol + 1).setValue(today1);
sheet.appendRow([oldNum +1, description, percent + " %", assignedto,date]);
sheet.getRange(lastRow +1,lastCol +1).setValue("New Action");
var head = sheet.getRange(1,1,1,lastCol + 1);
head.setBackground("#b4a7d6");
head.setFontColor("white");
head.setFontWeight("bold");
head.setFontSize(12);
sheet2.getRange(11, 1).setValue(oldNum + 1);
}
}
}
All I get at the moment is "unspecified".
Any help will be appreciated.

The element that creates the slide bar, <input type="range" min="0" max="100" value="0" id="percent" step="10" onchange="outputUpdate(value)" list="perstep">, lacks a name attribute, so it never gives any contribution to the submitted data. So add a name attribute with a suitable value.

Currency Converter Not Converting

The Currency converter up top works, but the table based one is a dead duck.
I need a value to be entered at Enter Amount of US Dollars and to be displayed in the corresponding value fields.
Here's the code:
<html>
<head>
<title>Convert US Dollars to Euros 2</title>
</head>
<body>
<form>
<table border="1">
<tbody>
<tr>
<th colspan="3">Monetary Exchange Rates
</th>
</tr>
<tr>
<th>Currency
</th>
<th>Rate
</th>
<th>Value
</th>
</tr>
<tr>
<td>British Pound
</td>
<td><input type="text" style="text-align: right;"
name="bp" value="0.62905" size="12" disabled="true" />
</td>
<td><input type="text" id="BP" value=""></td>
</tr>
<tr>
<td>Canadian Dollar
</td>
<td><input type="text" style="text-align: right;"
name="cd" value="0.98928" size="12" disabled="true" />
</td>
<td><input type="text" id="CD" value=""></td>
</tr>
<tr>
<td>Euro
</td>
<td><input type="text" style="text-align: right;"
name="eu" value="0.79759" size="12" disabled="true" />
</td>
<td><input type="text" id="EU" value=""></td>
</tr>
<tr>
<td>Japanese Yen
</td>
<td><input type="text" style="text-align: right;"
name="jy" value="78.5461" size="12" disabled="true" />
</td>
<td><input type="text" id="JY" value=""></td>
</tr>
<tr>
<td>Mexican Peso
</td>
<td><input type="text" style="text-align: right;"
name="mp" value="13.0729" size="12" disabled="true" />
</td>
<td><input type="text" id="MP" value=""> <!--
td-->
</td>
</tr>
<tr>
<td colspan="2"><b>Enter Amount of U.S. Dollars</b>
</td>
<td>
<input type="text" id="amount" name="amount" size="10" value="1" />
</td>
</tr></tbody>
</table> <br />
<input type="button" value="Calculate" onclick="calculate();">
<input type="reset" value="Reset" />
</form>
<script type="text/javascript">
var BP = '0.62905';
var CD = '0.98928';
var EU = '0.79759';
var JY = '78.5431';
var MP = '13.0729';
function calculate() {
var amount = parseFloat(document.getElementById("amount").value);
// var e = document.getElementById("select");
var select = e.options[e.selectedIndex].value;
var select = document.getElementById("select");
var result = document.getElementById("result");
if(select.options[select.selectedIndex].value=="BP")
if (select.value === "USD to EUR") {
result.value = (amount * 0.7003).toFixed(2);
}
if (select.value === "EUR to USD") {
result.value = (amount * 1.4283).toFixed(2);
}
if (select.value === "0.62905") {
result.value = (amount * 0.62905).toFixed(2);
}
}
</script>
</body>
</html>
Any help would be greatly appreciated.

ID's should be unique, you cannot use same ID multiple times, and your select value does not work, change:
var select = document.getElementById("select");
to
var e = document.getElementById("select");
var select = e.options[e.selectedIndex].value;

Having dropped the select, the script you're looking for is:
<script type="text/javascript">
var BP = '0.62905';
var CD = '0.98928';
var EU = '0.79759';
var JY = '78.5431';
var MP = '13.0729';
function calculate() {
var amount = parseFloat(document.getElementById("amount").value);
document.getElementById("BP").value = (amount * BP).toFixed(2);
document.getElementById("CD").value = (amount * CD).toFixed(2);
document.getElementById("EU").value = (amount * EU).toFixed(2);
document.getElementById("JY").value = (amount * JY).toFixed(2);
document.getElementById("MP").value = (amount * MP).toFixed(2);
}
</script>
We wouldn't want to list those out explicitly like that for anything large-scale; we'd build a list and iterate through it. But I think writing it out this way answers your immediate question better without muddying the waters for you.

Try this code
if(select.options[select.selectedIndex].value=="your value")