We Keep Coding

Loading default text string to a table by javascript

I’ve made a form where I want the users to be able to add books (title, author, isbn).
<fieldset>
<legend>Bokdata</legend>
<label for="txtBookTitle">Tittel</label>
<input id="txtBookTitle" type="text" value="">
<label for="txtBookAuthor">Forfatter</label>
<input id="txtBookAuthor" type="text" value="">
<label for="txtBookISBN">ISBN</label>
<input id="txtBookISBN" type="text" value="">
<p>
<button onclick="addBookClick()">Legg til</button>
</p>
</fieldset>
The books will appear in this table:
<table border="2">
<thead>
<tr>
<th colspan="3">
Min bokliste
</th>
</tr>
<tr>
<th>Tittel</th>
<th>Forfatter</th>
<th>ISBN</th>
</tr>
</thead>
<tbody id="tblBodyList">
</tbody>
<tfoot id="tblSummary">
</tfoot>
</table>
Adding books by using the input-fields is done by this function:
function addBookClick(){
//Input fra skjemaet
var txtBookTitle = document.getElementById("txtBookTitle").value;
var txtBookAuthor = document.getElementById("txtBookAuthor").value;
var txtBookISBN = document.getElementById("txtBookISBN").value;
// Lag html-tabell
// 0 = tabell 1
var table = document.getElementsByTagName("table")[0];
// Legg til ny rad nederst i tabellen. (0) = øverste rad i tabellen.
var newRow = table.insertRow(table.rows.length);
// Legg til celler i tabellen
var cel1 = newRow.insertCell(0);
var cel2 = newRow.insertCell(1);
var cel3 = newRow.insertCell(2);
// Legg til values i cellene
cel1.innerHTML = txtBookTitle;
cel2.innerHTML = txtBookAuthor;
cel3.innerHTML = txtBookISBN;
}
I’m trying to insert some text into a table without html, but by javascript instead. The easiest would of course be to write the text in the table, but this is a school assignment, and I’m not allowed to do that. Getting help is allowed. I hope I’m close to something, but I could really use some advice. I’ve tried the last two days to get a grip on this:
var txtBookTitle = document.getElementById("txtBookTitle");
var txtBookAuthor = document.getElementById("txtBookAuthor");
var txtBookISBN = document.getElementById("txtBookISBN");
var tblBodyList = document.getElementById("tblBodyList");
var books = [];
var defaultBooks =
"Judo Unleashed,Neil Ohlenkamp,0-07-147534-6\n"+
"Kodokan Judo,Jigoro Kano,0-87011-681-9\n"+
"Olympic Judo,Neil Adams,0-7207-1735-3";
var book = {
title: "txtBookTitle",
author: "txtBookAuthor",
ISBN: "txtBookISBN"
};
function createBook(title, author, ISBN){
var Book = {};
Book.title = title;
Book.author = author;
Book.ISBN = ISBN;
books.push(Book);
return Book
}
var judo = "";
var kodokan = "";
var olympic = "";
function loadDefaultBooks(){
judo = createBook("Judo Unleashed", "Neil Ohlenkamp", "0-07-147534-6");
kodokan = createBook("Kodokan Judo", "Jigoro Kano", "0-87011-681-9");
olympic = createBook("Olympic Judo" , "Neil Adams" , "0-7207-1735-3");
listBooks();
}

In your case you are not calling loadDefaultBooks. Also the function createBook is not making any sense. You can use the same function addBookClick and pass argument.
This line var txtBookTitle = a || document.getElementById("txtBookTitle").value; when a has a value consider that value, other on click of button a will be undefined. In that case consider the value from the input text
function addBookClick(a, b, c) {
//Input fra skjemaet
var txtBookTitle = a || document.getElementById("txtBookTitle").value;
var txtBookAuthor = b || document.getElementById("txtBookAuthor").value;
var txtBookISBN = c || document.getElementById("txtBookISBN").value;
// Lag html-tabell
// 0 = tabell 1
var table = document.getElementsByTagName("table")[0];
// Legg til ny rad nederst i tabellen. (0) = øverste rad i tabellen.
var newRow = table.insertRow(table.rows.length);
// Legg til celler i tabellen
var cel1 = newRow.insertCell(0);
var cel2 = newRow.insertCell(1);
var cel3 = newRow.insertCell(2);
// Legg til values i cellene
cel1.innerHTML = txtBookTitle;
cel2.innerHTML = txtBookAuthor;
cel3.innerHTML = txtBookISBN;
}
function loadDefaultBooks() {
addBookClick("Judo Unleashed", "Neil Ohlenkamp", "0-07-147534-6");
addBookClick("Kodokan Judo", "Jigoro Kano", "0-87011-681-9");
addBookClick("Olympic Judo", "Neil Adams", "0-7207-1735-3");
}
loadDefaultBooks()
<fieldset>
<legend>Bokdata</legend>
<label for="txtBookTitle">Tittel</label>
<input id="txtBookTitle" type="text" value="">
<label for="txtBookAuthor">Forfatter</label>
<input id="txtBookAuthor" type="text" value="">
<label for="txtBookISBN">ISBN</label>
<input id="txtBookISBN" type="text" value="">
<p>
<button onclick="addBookClick()">Legg til</button>
</p>
</fieldset>
<table border="2">
<thead>
<tr>
<th colspan="3">
Min bokliste
</th>
</tr>
<tr>
<th>Tittel</th>
<th>Forfatter</th>
<th>ISBN</th>
</tr>
</thead>
<tbody id="tblBodyList">
</tbody>
<tfoot id="tblSummary">
</tfoot>
</table>

JavaScript GPA calculator isn't reading user inputs

I'm a beginner to JavaScript. Here I can't figure out why my code isn't reading the values which I input, even-though I can't find out any errors in my code. Any helpful suggestions to edit my code to fix the error?
function gpacalc() {
//define valid grades and their values
var gr = new Array(6);
var cr = new Array(6);
var ingr = new Array(5);
var incr = new Array(5);
// define valid grades and their values
var grcount = 11;
gr[0] = "A+";
cr[0] = 4;
gr[1] = "A";
cr[1] = 4;
gr[2] = "A-";
cr[2] = 3.70;
gr[3] = "B+";
cr[3] = 3.30;
gr[4] = "B";
cr[4] = 3;
gr[5] = "B-";
cr[5] = 2.70;
gr[6] = "C+";
cr[6] = 2.30;
gr[7] = "C";
cr[7] = 2;
gr[8] = "C-";
cr[8] = 1.70;
gr[9] = "D";
cr[9] = 1;
gr[10] = "D-";
cr[10] = 0.70;
// retrieve user input
ingr[0] = document.GPACalcForm.GR1.value;
ingr[1] = document.GPACalcForm.GR2.value;
ingr[2] = document.GPACalcForm.GR3.value;
ingr[3] = document.GPACalcForm.GR4.value;
ingr[4] = document.GPACalcForm.GR5.value;
incr[0] = document.GPACalcForm.CR1.value;
incr[1] = document.GPACalcForm.CR2.value;
incr[2] = document.GPACalcForm.CR3.value;
incr[3] = document.GPACalcForm.CR4.value;
incr[4] = document.GPACalcForm.CR5.value;
// Calculate GPA
var allgr = 0;
var allcr = 0;
var gpa = 0;
for (var x = 0; x < 5; x++) {
if (ingr[x] == "")
break;
alert("Error: You did not enter a numeric credits value for subject. If the subject is worth 0 credits, then enter the number 0 in the field.");
var validgrcheck = 0;
for (var xx = 0; xx < grcount; xx++) {
if (ingr[x] == gr[xx]) {
allgr = allgr + (parseInt(incr[x], 10) * cr[xx]);
allcr = allcr + parseInt(incr[x], 10);
validgrcheck = 1;
break;
}
}
if (validgrcheck == 0) {
alert("Error: Could not recognize the grade entered for subject " + eval(x + 1) + ". Please use standard college grades in the form of A+, A, B+ ... D-");
return 0;
}
}
if (allcr == 0) {
alert("Error:You did not enter any credit values. GPA = N/A");
return 0;
}
gpa = allgr / allcr;
alert("GPA = " + gpa);
return 0;
}
<center>
<form name="GPACalcForm">
<table border="2" bgcolor="#bb8fce" cellpadding="5" cellspacing="2">
<TH> </TH>
<TH>Grade</TH>
<TH>Credits</TH>
<TR>
<TD>IT 201</TD>
<TD><input type="text" size="5" name="GR1" align="top" maxlength="5"></TD>
<TD><input type="text" size="5" name="CR1" align="top" maxlength="5"></TD>
</TR>
<TR>
<TD>IT 202</TD>
<TD><input type="text" size="5" name="GR2" align="top" maxlength="5"></TD>
<TD><input type="text" size="5" name="CR2" align="top" maxlength="5"></TD>
</TR>
<TR>
<TD>IT 203</TD>
<TD><input type="text" size="5" name="GR3" align="top" maxlength="5"></TD>
<TD><input type="text" size="5" name="CR3" align="top" maxlength="5"></TD>
</TR>
<TR>
<TD>IT 204</TD>
<TD><input type="text" size="5" name="GR4" align="top" maxlength="5"></TD>
<TD><input type="text" size="5" name="CR4" align="top" maxlength="5"></TD>
</TR>
<TR>
<TD>IT 205</TD>
<TD><input type="text" size="5" name="GR5" align="top" maxlength="5"></TD>
<TD><input type="text" size="5" name="CR5" align="top" maxlength="5"></TD>
</TR>
<TR>
<TR align="center">
<TD colspan="3">
<input type="button" value="Calculate" name="CalcButton" OnClick="gpacalc()">
</TD>
</TR>
</table>
</form>
<br/>
<p> </p>
</center>
<br/>
I'm a beginner to JavaScript. Here I can't figure out why my code isn't reading the values which I input, even-though I can figure out any errors in my code. Any helpful suggestions to edit my code to fix the error?

function gpacalc()
{
//define valid grades and their values
var gr = new Array(6);
var cr = new Array(6);
var ingr = new Array(5);
var incr = new Array(5);
// define valid grades and their values
var grcount = 11;
gr[0] = "A+";
cr[0] = 4;
gr[1] = "A";
cr[1] = 4;
gr[2] = "A-";
cr[2] = 3.70;
gr[3] = "B+";
cr[3] = 3.30;
gr[4] = "B";
cr[4] = 3;
gr[5] = "B-";
cr[5] = 2.70;
gr[6] = "C+";
cr[6] = 2.30;
gr[7] = "C";
cr[7] = 2;
gr[8] = "C-";
cr[8] = 1.70;
gr[9] = "D";
cr[9] = 1;
gr[10] = "D-";
cr[10] = 0.70;
// retrieve user input
ingr[0] = document.GPACalcForm.GR1.value;
console.log(ingr[0]);
ingr[1] = document.GPACalcForm.GR2.value;
ingr[2] = document.GPACalcForm.GR3.value;
ingr[3] = document.GPACalcForm.GR4.value;
ingr[4] = document.GPACalcForm.GR5.value;
incr[0] = document.GPACalcForm.CR1.value;
incr[1] = document.GPACalcForm.CR2.value;
incr[2] = document.GPACalcForm.CR3.value;
incr[3] = document.GPACalcForm.CR4.value;
incr[4] = document.GPACalcForm.CR5.value;
// Calculate GPA
var allgr = 0;
var allcr = 0;
var gpa = 0;
for (var x = 0; x < 5; x++)
{
if (ingr[x] == "") {
alert("Error: You did not enter a numeric credits value for subject. If the subject is worth 0 credits, then enter the number 0 in the field.");
break;
}
var validgrcheck = 0;
for (var xx = 0; xx < grcount; xx++)
{
if (ingr[x] == gr[xx])
{
allgr = allgr + (parseInt(incr[x],10) * cr[xx]);
allcr = allcr + parseInt(incr[x],10);
validgrcheck = 1;
break;
}
}
console.log(validgrcheck);
if (validgrcheck == 0)
{
alert("Error: Could not recognize the grade entered for subject " + eval(x + 1) + ". Please use standard college grades in the form of A+, A, B+ ... D-");
return 0;
}
}
if (allcr == 0)
{
alert("Error:You did not enter any credit values. GPA = N/A");
return 0;
}
gpa = allgr / allcr;
alert("GPA = " + gpa);
return 0;
}
<center>
<form name = "GPACalcForm">
<table border = "2" bgcolor = #bb8fce cellpadding = "5" cellspacing = "2">
<TH> </TH>
<TH>Grade</TH>
<TH>Credits</TH>
<TR>
<TD>IT 201</TD>
<TD><input type = "text" size = "5" name = "GR1" align = "top" maxlength = "5"></TD>
<TD><input type = "text" size = "5" name = "CR1" align = "top" maxlength = "5"></TD>
</TR>
<TR>
<TD>IT 202</TD>
<TD><input type = "text" size = "5" name = "GR2" align = "top" maxlength = "5"></TD>
<TD><input type = "text" size = "5" name = "CR2" align = "top" maxlength = "5"></TD>
</TR>
<TR>
<TD>IT 203</TD>
<TD><input type = "text" size = "5" name = "GR3" align = "top" maxlength = "5"></TD>
<TD><input type = "text" size = "5" name = "CR3" align = "top" maxlength = "5"></TD>
</TR>
<TR>
<TD>IT 204</TD>
<TD><input type = "text" size = "5" name = "GR4" align = "top" maxlength = "5"></TD>
<TD><input type = "text" size = "5" name = "CR4" align = "top" maxlength = "5"></TD>
</TR>
<TR>
<TD>IT 205</TD>
<TD><input type = "text" size = "5" name = "GR5" align = "top" maxlength = "5"></TD>
<TD><input type = "text" size = "5" name = "CR5" align = "top" maxlength = "5"></TD>
</TR>
<TR>
<TR align = "center">
<TD colspan = "3">
<input type = "button" value = "Calculate" name = "CalcButton" OnClick = "gpacalc()">
</TD>
</TR>
</table>
</form>
<br/>
<p> </p>
</center>
<br/>
I have made the following change in your code :-
if (ingr[x] == "")
break;
alert("Error: You did not enter a numeric credits value for subject. If the subject is worth 0 credits, then enter the number 0 in the field.");
to
if (ingr[x] == "") {
alert("Error: You did not enter a numeric credits value for subject. If the subject is worth 0 credits, then enter the number 0 in the field.");
break;
}

Dynamically change the color or text based on value with Javascript

Hey guys looking for some assistance with changing the color of text based on value. If the value is zero or negative I want it to be red, and if the value is + I want it to be green. Below is just a little bit of code from the full html but I think these are the key parts. Here is a JSFiddle As you can see the table is dynamic. As you input data into the starting amount it will automatically calculate it for the ending amount. The starting amount adds to the bill amount which produces the total amount number. I am also not sure if the event "onchange" is correct. Thank you for your input and advise in advanced.
<p><b>Starting Amount: $ <input id="money" type="number" onkeyup="calc()"></b></p>
<table>
<tr>
<th>Bill Ammount</th>
</tr>
<tr>
<td><input type="number" class="billAmt" id="billAmt" onkeyup="calc()"> </td>
</tr>
</table>
<input type="hidden" id="total" name="total" value="0">
<p><b>Ending Amount: $ <span id="totalAmt" onchange="colorChange(this)">0</span></b></p>
<script type="text/Javascript">
var myElement = document.getElementById('totalAmt');
function colorChange() {
if('myElement' > 0) {
totalAmt.style.color = 'green';
} else {
totalAmt.style.color = 'red';
}
}
function calc() {
var money = parseInt(document.querySelector('#money').value) || 0;
var bills = document.querySelectorAll('table tr input.billAmt') ;
var billTotal = 0;
for (i = 0; i < bills.length; i++) {
billTotal += parseInt(bills[i].value) || 0;
}
totalAmt.innerHTML = money + billTotal;
}
</script>

You can reach the desired result using just one function. Instead of checking the DOM element's innerHTML or textContext to get the amount, just refer to the variables holding it.
var myElement = document.getElementById('totalAmt');
function calc() {
var money = parseInt(document.querySelector('#money').value) || 0;
var bills = document.querySelectorAll('table tr input.billAmt');
var billTotal = 0;
for (i = 0; i < bills.length; i++) {
billTotal += parseInt(bills[i].value) || 0;
}
totalAmt.innerHTML = money + billTotal;
myElement.style.color = money + billTotal <= 0 ? 'red' : 'green';
}
<p><b>Starting Amount: $ <input id="money" type="number" onkeyup="calc()"></b></p>
<table>
<tr>
<th>Bill Ammount</th>
</tr>
<tr>
<td><input type="number" class="billAmt" id="billAmt" onkeyup="calc()"></td>
</tr>
</table>
<input type="hidden" id="total" name="total" value="0">
<p><b>Ending Amount: $ <span id="totalAmt">0</span></b></p>

use myElement.innerHTML instead of myElement in the if condition and invoke the changeColor function at last of calc
var myElement = document.getElementById('totalAmt');
function colorChange() {
if (myElement.innerHTML <= 0) {
totalAmt.style.color = 'red';
} else {
totalAmt.style.color = 'green';
}
}
function calc() {
var money = parseInt(document.querySelector('#money').value) || 0;
var bills = document.querySelectorAll('table tr input.billAmt');
var billTotal = 0;
for (i = 0; i < bills.length; i++) {
billTotal += parseInt(bills[i].value) || 0;
}
totalAmt.innerHTML = money + billTotal;
colorChange();
}
<p><b>Starting Amount: $ <input id="money" type="number" onkeyup="calc()"></b></p>
<table>
<tr>
<th>Bill Ammount</th>
</tr>
<tr>
<td><input type="number" class="billAmt" id="billAmt" onkeyup="calc()"></td>
</tr>
</table>
<input type="hidden" id="total" name="total" value="0">
<p><b>Ending Amount: $ <span id="totalAmt">0</span></b></p>

A couple issues with your original code:
1 - you were checking if the string myElement was greater than zero, instead of the innerHTML of the element you selected.
2 - using innerHTML() to change the contents of an element doesn't fire an onchange event. In my code, I call your colorChange function at the end of the calc function, so if you decide to add another field to it (tax or something), it will be called after the total is calculated.
function colorChange() {
var myElement = document.getElementById('totalAmt');
if (myElement.innerHTML > 0) {
totalAmt.style.color = 'green';
} else {
totalAmt.style.color = 'red';
}
}
function calc() {
var money = parseInt(document.querySelector('#money').value) || 0;
var bills = document.querySelectorAll('table tr input.billAmt');
var billTotal = 0;
for (i = 0; i < bills.length; i++) {
billTotal += parseInt(bills[i].value) || 0;
}
totalAmt.innerHTML = money + billTotal;
colorChange()
}
<p><b>Starting Amount: $ <input id="money" type="number" onkeyup="calc()"></b></p>
<table>
<tr>
<th>Bill Ammount</th>
</tr>
<tr>
<td><input type="number" class="billAmt" id="billAmt" onkeyup="calc()"> </td>
</tr>
</table>
<input type="hidden" id="total" name="total" value="0">
<p><b>Ending Amount: $ <span id="totalAmt">0</span></b></p>

Javascript Range, Variance, and Standard Deviation Functions

So, I've been recently tasked to do a few calculations and to build a custom JS statistics library. The only 3 things I have left are to create functions for the range, variance, and standard deviation. What I'm doing here is passing my array (x) into the js functions, but they keep coming up blank. Am I doing something wrong?
function findSum(x)
{
var sum = 0;
for(i = 0; i < x.length; i++)
{
sum = sum + x[i];
}
return sum;
};
function findMean(x)
{
return findSum(x) / x.length;
};
function findMedian(x)
{
x.sort( function(a,b) {return a - b;} );
var half = Math.floor(x.length/2);
if(x.length % 2)
return x[half];
else
return (x[half-1] + x[half]) / 2.0;
}
// Ascending functions for sort
function ascNum(a, b) { return a - b; }
function clip(arg, min, max) {
return Math.max(min, Math.min(arg, max));
};
function findMode(x)
{
var arrLen = x.length;
var _arr = x.slice().sort(ascNum);
var count = 1;
var maxCount = 0;
var numMaxCount = 0;
var mode_arr = [];
var i;
for (i = 0; i < arrLen; i++) {
if (_arr[i] === _arr[i + 1]) {
count++;
} else {
if (count > maxCount) {
mode_arr = [_arr[i]];
maxCount = count;
numMaxCount = 0;
}
// are there multiple max counts
else if (count === maxCount) {
mode_arr.push(_arr[i]);
numMaxCount++;
}
// resetting count for new value in array
count = 1;
}
}
return numMaxCount === 0 ? mode_arr[0] : mode_arr;
};
function findRange(x)
{
x.sort( function (a, b) {return a-b;} );
}
function findVariance(x) {
var mean = findMean(x);
return findMean(array.map(findSum(sum)) {
return Math.pow(sum - mean, 2);
}));
},
function findStandardDeviation(x)
{
return Math.sqrt(findVariance(x));
};
The HTML code:
<html>
<head>
<h1>Statistical Calculations</h1>
<title>Calculating Stats</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src='Stats.js'></script>
<script language="JavaScript">
function addNumber()
{
var input = document.getElementById('input').value;
var list = document.getElementById('list');
var option = document.createElement('OPTION');
list.options.add(option);
option.text = input;
}
function getStatistics()
{
var list = new Array();
var select = document.getElementById('list');
for(i = 0; i < select.options.length; i++)
{
list[i] = parseInt(select.options[i].text);
}
document.getElementById('summation').value =findSum(list);
document.getElementById('mean').value = findMean(list);
document.getElementById('median').value = findMedian(list);
document.getElementById('mode').value = findMode(list);
document.getElementById('variance').value = findVariance(list);
document.getElementById('standardDev').value = findStandardDeviation(list);
document.getElementById('range').value = findRange(list);
document.getElementById('max').value = findMax(list);
document.getElementById('min').value = findMin(list);
}
</script>
</head>
<body>
<table>
<tr>
<td>Input Number:</td><td><input type='text' id='input'></td>
</tr>
<tr>
<td colpsan='2'><input type='button' value='Add Number' onClick='addNumber()'></td>
</tr>
<tr>
<td colspan='2'>
<select id='list' size='5'>
</select>
</td>
</tr>
<tr>
<td colpsan='2'><input type='button' value='Calculate!' onClick='getStatistics()'></td>
</tr>
<tr>
<td>Summation:</td><td><input type='text' id='summation' readonly></td>
</tr>
<tr>
<td>Mean:</td><td><input type='text' id='mean' readonly></td>
</tr>
<tr>
<td>Median:</td><td><input type='text' id='median' readonly> </td>
</tr>
<tr>
<td>Mode:</td><td><input type='text' id='mode' readonly></td>
</tr>
<tr>
<td>Max:</td><td><input type='text' id='max' readonly></td>
</tr>
<tr>
<td>Min:</td><td><input type='text' id='min' readonly></td>
</tr>
<tr>
<td>Range:</td><td><input type='text' id='range' readonly></td>
</tr>
<tr>
<td>Variance:</td><td><input type='text' id='variance' readonly></td>
</tr>
<tr>
<td>Standard Deviation:</td><td><input type='text' id='standardDev' readonly></td>
</tr>
</table>
</body>
</html>
The last 3 seem to do absolutely nothing, and I've been bashing my head in for the last few days trying to figure it out. If anyone could help sort my functions out into working order, it'd be greatly appreciated! I'm sure that the array has been passing into the functions correctly, seeing as the first 4 functions obviously worked.

Adding up inputs doesn't change javascript

I am trying to add up 3 input elements of type number. This doesn't work for some reason. When I take out the if statements, it works, but only after I change the first one (score1). When I change the others, nothing happens. Thanks.
function getTotal() {
var score1 = document.getElementById("score1");
var score2 = document.getElementById("score2");
var score3 = document.getElementById("score3");
var sc1 = parseInt(score1.value);
var sc2 = parseInt(score2.value);
var sc3 = parseInt(score3.value);
if (isNan(sc1)) {
sc1 = 0;
}
if (isNan(sc2)) {
sc2 = 0;
}
if (isNan(sc3)) {
sc3 = 0;
}
var total = sc1 + sc2 + sc3;
document.getElementById("totalScore").innerHTML = total;
}
function assign() {
var score1 = document.getElementbyId("score1");
var score2 = document.getElementbyId("score2");
var score3 = document.getElementbyId("score3");
score1.onchange = getTotal;
score2.onchange = getTotal;
score3.onchange = getTotal;
}
<!DOCTYPE html>
<html>
<head>
<script src="getTotal.js" type="text/javascript"></script>
</head>
<body>
<header>
<tbody>
<tr>
<td>
Total:
<output id="total" class="totalScore"></output>
</td>
</tr>
</tbody>
</header>
<table>
<tbody>
<td>Score 1</td>
<td><input type="number" id="score1"/></td>
<td>Score 2</td>
<td><input type="number" id="score2" /></td>
<td>Score 3</td>
<td><input type="number" id="score3" /></td>
</tbody>
</table>
<script type="text/javascript">assign();</script>
</body>
</html>

Spelling mistake.
var score1 = document.getElementbyId("score1");
var score2 = document.getElementbyId("score2");
var score3 = document.getElementbyId("score3");
If you check your console you will see the error Uncaught TypeError: undefined is not a function on the line where you are calling score1. The selector is document.getElement*By*Id, you were writing by lowercase..

Your <output> has an id attribute with the value is "total" whereas your class attribute' value is "totalscore". Consider changing the id value to "totalscore" or change getElementById's value to"score"