Develop Reference

Why does a variable with .substring() not reflect css styling?

Using pure javascript, I am trying to create a price-validating function that when used, validates prices entered into a form. There are 4 requirements to my validation:
Input must be a number and cannot be empty
If a decimal is entered, there must at least be 1 pre- and post-decimal character
Price entered must be a number that is between $1 and $99.99 (both inclusive)
Price entered must not have whitespaces in between
and here is my code:
function formCheck() {
var success = true; //default, assumes client enters all fields correctly so "process.html" will load
var msgBox = document.getElementById('divMessage'); //feedback div
//Price Variables
var movPrice = document.getElementById('txtPrice');
var priceFdBk1 = '<ul><li> Please enter <b>numbers</b> only. </li></ul>';
var priceFdBk2 =
'<ul><li> You entered a decimal point. Please enter a <b>number</b> both before and after the decimal place. </li></ul>';
var priceFdBk3 = '<ul><li> Please enter a movie price between $1.00 to $99.99 (up to 2 decimal places). </li></ul>';
var priceFdBk4 = '<ul><li> Please do not leave a space when entering the movie price. </li></ul>';
//Price Validation
function priceCheck(price, fdBk1, fdBk2, fdBk3, fdBk4) {
//arguments = price and feedbacks if errors are made
var price_clean = price.value.trim(); //price entered by client without whitespace
var price_len = price_clean.length; //number of characters in price entered
//If there is a $ sign, remove it first
var dollarSensor = price_clean.charAt(0);
if (dollarSensor == '$') {
price_clean = price_clean.substring(1);
}
//If there is a decimal point, obtain pre- and post-decimal characters
if (price_clean.indexOf('.') > -1) {
var deciSensor = 1; //remember that input has a decimal
var intValue = price_clean.split('.')[0]; //obtain pre-decimal characters)
var decimalValue = price_clean.split('.')[1]; //obtain post-decimal characters
var postCounter = 0;
for (var j = 0; j < decimalValue.length; j++) {
//count number of decimal places
postCounter += 1;
}
}
//Filter 1: Input must be a number and cannot be empty
if (isNaN(price_clean) || price_clean == '') {
msgBox.innerHTML = fdBk1;
price.className = 'yellow';
success = false;
}
//Filter 2: If a decimal is entered, there must at least be 1 pre- and post-decimal character
else if ((deciSensor == 1 && intValue == '') || (deciSensor == 1 && decimalValue == '')) {
//if client did not enter a number before and after the decimal point
msgBox.innerHTML = fdBk2;
price.className = 'yellow';
success = false;
}
//Filter 3: Price entered must be a number that is between $1 and $99.99 (both inclusive)
else if (price_clean < 1 || price_clean > 99.99 || postCounter > 2) {
msgBox.innerHTML = fdBk3; //message in feedback div
price.className = 'yellow';
success = false; //prevent loading of "process.html" since selected movie is invalid
} else {
price.className = 'transparent';
}
//Filter 4: Price entered must not have whitespaces in between
for (var i = 0; i < price_len; i++) {
oneDigit = price_clean.charAt(i);
if (oneDigit == ' ') {
//if the price float character has a whitespace
msgBox.innerHTML = fdBk4; //message in feedback div
price.className = 'yellow'; //highlight error in client's input
success = false; //prevent loading of "process.html" since selected movie is invalid
} else if (oneDigit == '') {
//if the price float character has no whitespace
price.className = 'transparent'; //remove highlight from client's input
}
}
}
priceCheck(movPrice, priceFdBk1, priceFdBk2, priceFdBk3, priceFdBk4);
return success;
}
.yellow {
background-color: yellow;
}
.transparent {
background-color: transparent;
}
h1 {
color: #7157ff;
}
hr {
display: block;
border: 0;
border-top: 3px solid #f90;
padding: 0;
}
textarea {
width: 70%;
}
#div_main {
font-family: Sans-serif;
margin: auto;
margin-top: 30px;
width: 500px;
}
#div_left {
width: 150px;
display: inline-block;
float: left;
}
#div_left p {
margin-bottom: 19px;
}
#div_right {
width: 350px;
display: inline-block;
float: right;
}
.clear {
clear: both;
}
<div id="div_main">
<h1>
Add Movie
</h1>
<hr>
<form action="process.html" method="POST">
<div id="div_left">
<p>Price* ($):</p>
</div>
<div id="div_right">
<p><input type="text" id="txtPrice" name="txtPrice"></p>
</div>
<input type="submit" id="btnSubmit" onclick="return formCheck()">
</form>
<div id="divMessage">
*denotes compulsary fields.
</div>
</div>
The code works fine but has 1 issue, which I suspect comes from this line:
price_clean = price_clean.substring(1)
Specifically, whenever I enter a "$" sign into the form, my code will remove the "$" sign and validate the input as usual. However, when the input is invalid, it no longer highlights the input box in yellow.
May I know what is going on and how can this be fixed using vanilla javascript? Thank you

Your issue is that you're adding the yellow highlight, but then removing it in your final for loop, this is due to your final for loop using price_len, which is calculated before you remove the $. As a result, your for loop is doing one additional iteration, and so .charAt(i) tries to access an index not in your string giving you an empty string. To fix this, you can calculate the length after you've removed the additional $:
function formCheck() {
var success = true; //default, assumes client enters all fields correctly so "process.html" will load
var msgBox = document.getElementById('divMessage'); //feedback div
//Price Variables
var movPrice = document.getElementById('txtPrice');
var priceFdBk1 = '<ul><li> Please enter <b>numbers</b> only. </li></ul>';
var priceFdBk2 =
'<ul><li> You entered a decimal point. Please enter a <b>number</b> both before and after the decimal place. </li></ul>';
var priceFdBk3 = '<ul><li> Please enter a movie price between $1.00 to $99.99 (up to 2 decimal places). </li></ul>';
var priceFdBk4 = '<ul><li> Please do not leave a space when entering the movie price. </li></ul>';
//Price Validation
function priceCheck(price, fdBk1, fdBk2, fdBk3, fdBk4) {
//arguments = price and feedbacks if errors are made
var price_clean = price.value.trim(); //price entered by client without whitespace
//If there is a $ sign, remove it first
var dollarSensor = price_clean.charAt(0);
if (dollarSensor == '$') {
price_clean = price_clean.substring(1);
}
var price_len = price_clean.length; //number of characters in price entered
//If there is a decimal point, obtain pre- and post-decimal characters
if (price_clean.indexOf('.') > -1) {
var deciSensor = 1; //remember that input has a decimal
var intValue = price_clean.split('.')[0]; //obtain pre-decimal characters)
var decimalValue = price_clean.split('.')[1]; //obtain post-decimal characters
var postCounter = 0;
for (var j = 0; j < decimalValue.length; j++) {
//count number of decimal places
postCounter += 1;
}
}
//Filter 1: Input must be a number and cannot be empty
if (isNaN(price_clean) || price_clean == '') {
msgBox.innerHTML = fdBk1;
price.className = 'yellow';
success = false;
}
//Filter 2: If a decimal is entered, there must at least be 1 pre- and post-decimal character
else if ((deciSensor == 1 && intValue == '') || (deciSensor == 1 && decimalValue == '')) {
//if client did not enter a number before and after the decimal point
msgBox.innerHTML = fdBk2;
price.className = 'yellow';
success = false;
}
//Filter 3: Price entered must be a number that is between $1 and $99.99 (both inclusive)
else if (price_clean < 1 || price_clean > 99.99 || postCounter > 2) {
msgBox.innerHTML = fdBk3; //message in feedback div
price.className = 'yellow';
success = false; //prevent loading of "process.html" since selected movie is invalid
} else {
price.className = 'transparent';
}
//Filter 4: Price entered must not have whitespaces in between
for (var i = 0; i < price_len; i++) {
oneDigit = price_clean.charAt(i);
if (oneDigit == ' ') {
//if the price float character has a whitespace
msgBox.innerHTML = fdBk4; //message in feedback div
price.className = 'yellow'; //highlight error in client's input
success = false; //prevent loading of "process.html" since selected movie is invalid
} else if (oneDigit == '') {
//if the price float character has no whitespace
price.className = 'transparent'; //remove highlight from client's input
}
}
}
priceCheck(movPrice, priceFdBk1, priceFdBk2, priceFdBk3, priceFdBk4);
return success;
}
.yellow {
background-color: yellow;
}
.transparent {
background-color: transparent;
}
h1 {
color: #7157ff;
}
hr {
display: block;
border: 0;
border-top: 3px solid #f90;
padding: 0;
}
textarea {
width: 70%;
}
#div_main {
font-family: Sans-serif;
margin: auto;
margin-top: 30px;
width: 500px;
}
#div_left {
width: 150px;
display: inline-block;
float: left;
}
#div_left p {
margin-bottom: 19px;
}
#div_right {
width: 350px;
display: inline-block;
float: right;
}
.clear {
clear: both;
}
<div id="div_main">
<h1>
Add Movie
</h1>
<hr>
<form action="process.html" method="POST">
<div id="div_left">
<p>Price* ($):</p>
</div>
<div id="div_right">
<p><input type="text" id="txtPrice" name="txtPrice"></p>
</div>
<input type="submit" id="btnSubmit" onclick="return formCheck()">
</form>
<div id="divMessage">
*denotes compulsary fields.
</div>
</div>
There are however a few improvements you can consider making to your code though:
Use const or let instead of var (to help with minimizing scoping issues)
Update your code to use classList.toggle() to remove/add your highlight class
Consider using regular expressions or HTML5 validation with custom validation messages using setCustomValidity()
Use DOM2 event hanlders by using .addEventListener() with e.preventDefault() instead of DOM0 (onxyz) HTML attributes

A small fix to your code, you've set price_len before removing leading $
const price_len = price_clean.length;
for(var i=0; i<price_len; i++){
...
}
<html>
<head>
<style>
.yellow{
background-color:yellow
}
.transparent{
background-color: transparent;
}
h1 {
color: #7157ff;
}
hr {
display: block;
border: 0;
border-top: 3px solid #f90;
padding: 0;
}
textarea {
width: 70%;
}
#div_main {
font-family: Sans-serif;
margin: auto;
margin-top: 30px;
width: 500px;
}
#div_left {
width: 150px;
display: inline-block;
float: left;
}
#div_left p {
margin-bottom: 19px;
}
#div_right {
width: 350px;
display: inline-block;
float: right;
}
.clear {
clear: both;
}
</style>
<script language="javascript">
function formCheck(){
var success=true; //default, assumes client enters all fields correctly so "process.html" will load
var msgBox = document.getElementById("divMessage"); //feedback div
//Price Variables
var movPrice = document.getElementById("txtPrice");
var priceFdBk1 = "<ul><li> Please enter <b>numbers</b> only. </li></ul>"
var priceFdBk2 = "<ul><li> You entered a decimal point. Please enter a <b>number</b> both before and after the decimal place. </li></ul>"
var priceFdBk3 = "<ul><li> Please enter a movie price between $1.00 to $99.99 (up to 2 decimal places). </li></ul>"
var priceFdBk4 = "<ul><li> Please do not leave a space when entering the movie price. </li></ul>"
//Price Validation
function priceCheck(price,fdBk1,fdBk2,fdBk3,fdBk4){ //arguments = price and feedbacks if errors are made
var price_clean = price.value.trim(); //price entered by client without whitespace
//var price_len = price_clean.length; //number of characters in price entered
//If there is a $ sign, remove it first
var dollarSensor = price_clean.charAt(0);
if (dollarSensor=="$"){
price_clean = price_clean.substring(1);
}
//If there is a decimal point, obtain pre- and post-decimal characters
if (price_clean.indexOf('.')>-1){
var deciSensor=1 //remember that input has a decimal
var intValue = price_clean.split(".")[0]; //obtain pre-decimal characters)
var decimalValue = price_clean.split(".")[1]; //obtain post-decimal characters
var postCounter=0
for (var j=0;j<decimalValue.length;j++){ //count number of decimal places
postCounter+=1;
}
}
//Filter 1: Input must be a number and cannot be empty
if (isNaN(price_clean)||price_clean==""){
msgBox.innerHTML = fdBk1;
price.className="yellow";
success=false;
}
//Filter 2: If a decimal is entered, there must at least be 1 pre- and post-decimal character
else if (deciSensor==1 && intValue==""||deciSensor==1 && decimalValue==""){ //if client did not enter a number before and after the decimal point
msgBox.innerHTML = fdBk2;
price.className="yellow";
success=false;
}
//Filter 3: Price entered must be a number that is between $1 and $99.99 (both inclusive)
else if (price_clean<1||price_clean>99.99||postCounter>2){
msgBox.innerHTML = fdBk3; //message in feedback div
price.className="yellow";
success=false; //prevent loading of "process.html" since selected movie is invalid
}
else{
price.className="transparent";
}
//Filter 4: Price entered must not have whitespaces in between
const price_len = price_clean.length;
for(var i=0; i<price_len; i++){
oneDigit = price_clean.charAt(i);
if (oneDigit==" "){ //if the price float character has a whitespace
msgBox.innerHTML= fdBk4; //message in feedback div
price.className="yellow"; //highlight error in client's input
success=false; //prevent loading of "process.html" since selected movie is invalid
}
else if (oneDigit==""){ //if the price float character has no whitespace
price.className="transparent"; //remove highlight from client's input
}
}
}
priceCheck(movPrice,priceFdBk1,priceFdBk2,priceFdBk3,priceFdBk4)
return success;
}
</script>
</head>
<body>
<div id="div_main">
<h1>
Add Movie
</h1>
<hr>
<form action="process.html" method="POST">
<div id="div_left">
<p>Price* ($):</p>
</div>
<div id="div_right">
<p><input type="text" id="txtPrice" name="txtPrice"></p>
</div>
<input type="submit" id="btnSubmit" onclick="return formCheck()">
</form>
<div id="divMessage">
*denotes compulsary fields.
</div>
</div>
</body>
</html>

Display slider when you hover over array elements and give value to the array elements

I have done the part where you have to generate the array elements when you enter them from textbox, what I struggle with now is to display a slider on hover over each array element and give the array element a value, also what I struggle with is to delete each generated array element individually, my delete function deletes the entire array on click not just the single element I click.
Here is how it should look like:
enter image description here
Here is my code so far:
let names = [];
let nameInput = document.getElementById("name");
let messageBox = document.getElementById("display");
function insert ( ) {
names.push( nameInput.value );
clearAndShow();
}
function remove()
{
var element = document.getElementById("display");
element.parentNode.removeChild(element);
}
function clearAndShow () {
let printd=""
nameInput.value = "";
messageBox.innerHTML = "";
names.forEach(function(element){
if(element != ''){
var _span = document.createElement('span');
_span.style.borderStyle = "solid"
_span.style.borderColor = "blue"
_span.style.width = '50px'
_span.style.marginLeft = "5px"
_span.appendChild(document.createTextNode(element))
messageBox.appendChild(_span)
printd +="''" + element + "''" + "," + " ";
document.getElementById("labelprint").innerHTML=(printd)
}
})
}
h3 {
color: rgb(0, 174, 255);
}
.container {
border: solid 2px;
display: block;
margin-left: 200px;
margin-right: 200px;
margin-top: 50px;
}
<div class="container">
<form>
<h1>Enter Search</h1>
<input id="name" type="text" />
<input type="button" value="Search" onclick="insert()" />
</form>
<br/>
<div onclick="remove(this)" id="display"></div>
<br/>
<label >You have Selected: </label>
<h3 id="labelprint"></h3>
</div>

I am not being rude I just got confused on how you stated your message but what I think you are saying is to do this:
var names = [];
var nameInput = document.getElementById("name");
var messageBox = document.getElementById("display");
function insert ( ) {
names.push( nameInput.value );
// add value to array val: names[names.length - 1] = PutValueHere
clearAndShow();
}
function remove(this){
document.getElementById("display").parentNode.firstChild.remove(); // If you want it to remove the last child with the id 'display' then do .parentNode.lastChild.remove()
//if you are trying to remove the last val in the array do this: names.splice(names.length-1,1) for the first do this names.splice(0,1)
}
function clearAndShow () {
var printd=""
nameInput.value = "";
messageBox.innerHTML = "";
names.forEach(function(element){
if(element != ''){
var _span = document.createElement('span');
_span.id = '_spanId'
$('_spanId').css('border-style',solid');
$('_spanId').css('border-color',blue');
$('_spanId').css('width',50+'px');
$('_spanId').css('margin-left',5+'px');
_span[0].appendChild(document.createTextNode(element))
messageBox[0].appendChild(_span)
printd += "''" + element + "'', ";
document.getElementById("labelprint").innerHTML = printd
}
})
}

I have tried to implement something that i hope it's close to what are you looking for:
HTML:
<div class="container">
<form>
<h1>Add new slider</h1>
<input id="sliderName" type="text" />
<input type="button" value="Add" onclick="insertSlider()" />
</form>
<div id="display"></div>
</div>
CSS:
h3 {
color: rgb(0, 174, 255);
}
.container {
border: solid 2px;
display: block;
margin-left: 200px;
margin-right: 200px;
margin-top: 50px;
}
JS:
let messageBox = document.getElementById("display");
function deleteFn(id) {
const element = document.getElementById(id)
if(element) element.outerHTML="";
}
function onChangeSlideId(id){
const elementSlide = document.getElementById('slider-'+id+'')
if(elementSlide){
const value = elementSlide.value
const elementSlideText = document.getElementById('slider-value-'+id+'')
elementSlideText.innerText = '('+value+')'
}
}
function insertSlider(){
const name = document.getElementById("sliderName")
const nameValue = name.value
const newLabel = document.createElement('label')
newLabel.setAttribute('for',nameValue)
newLabel.innerText = nameValue
const newSlider = document.createElement('input')
newSlider.setAttribute('id','slider-'+nameValue+'')
newSlider.setAttribute('type','range')
newSlider.setAttribute('name',nameValue)
newSlider.setAttribute('onchange','onChangeSlideId("'+nameValue+'")')
const sliderValue = document.createElement('span')
sliderValue.setAttribute('id','slider-value-'+nameValue+'')
sliderValue.innerText = '('+newSlider.value+')'
const newContainer = document.createElement('div')
newContainer.setAttribute('id',nameValue)
newContainer.setAttribute('style','display: grid')
newContainer.appendChild(newSlider)
newContainer.appendChild(newLabel)
newContainer.appendChild(sliderValue)
const newDeleteButton = document.createElement('input')
newDeleteButton.setAttribute('type', 'button')
newDeleteButton.setAttribute('value', 'Delete ' + nameValue + '')
newDeleteButton.setAttribute('onclick', 'deleteFn("'+nameValue+'")')
newContainer.appendChild(newDeleteButton)
messageBox.appendChild(newContainer)
}
You can try it by yourself in this codepen

Want to remove previously appended table

When I Click on submit button after clicking on the links it appends perfectly but when I hit the button again it doesn't remove previously appended table.
I want to clear the previously created table when user clicks on the cross button and then print the table again or else overwrite the table but instead it is not removing the table and prints a new one.Image Part OneImage Part TwoImage Part ThreeImage Part Four
//variables
var order1 = document.getElementById('one').innerText;
var order2 = document.getElementById('two').innerText;
var order3 = document.getElementById('three').innerText;
var order4 = document.getElementById('four').innerText;
var temp = 0;
var orders_list = []; //Array
//Object Orientation To Create Order And Then Add It In Array
function orders(name) {
this.name = name;
if (orders_list[temp] == null) {
orders_list.push(name);
}
temp++;
}
//Main Function Which Creates Orders
function order_maker(order_name) {
var order = new orders("." + order_name);
}
//To Append Child Each Time Submit Buton Is Pressed And Check the Loop
function loop(argument) {
var i = 0;
while (i < orders_list.length) {
var temporary = document.createElement("table");
var orders_temp_list = orders_list[i];
temporary.innerHTML = "<tr><td>" + orders_list[i] + "</td><td onclick='remove(" + i + ")'>×</td></tr>";
document.body.appendChild(temporary);
//This Block Is That I was Checking
if (argument == "f") {
temporary.innerHTML = " ";
}
if (argument == "t") {
console.log("Done");
}
i++;
}
}
//To Remove The Specific Element User Want To Delete
function remove(id) {
orders_list.splice(id, id);
loop("t");
}
a {
margin: 20px;
padding: 30px;
}
table {
border: 3px solid #242424;
}
tr,
td {
padding: 20px;
}
<!DOCTYPE html>
<head></head>
<body>
Cake1
Cake2
Cake3
Cake4
<form>
<input placeholder="name">
<input placeholder="email">
<input placeholder="order">
</form>
<p id="para"></p>
<button onclick="loop('t')">Click</button>
</body>

Update your remove function as function remove(el) { el.closest('table').remove(); }.
Update parameter in html as "</td><td onclick='remove(this)'>×</td></tr>".
And add orders_list = []; in the end of loop function.
Try it below.
//variables
var order1 = document.getElementById('one').innerText;
var order2 = document.getElementById('two').innerText;
var order3 = document.getElementById('three').innerText;
var order4 = document.getElementById('four').innerText;
var temp = 0;
var orders_list = []; //Array
//Object Orientation To Create Order And Then Add It In Array
function orders(name) {
this.name = name;
if (orders_list[temp] == null) {
orders_list.push(name);
}
temp++;
}
//Main Function Which Creates Orders
function order_maker(order_name) {
var order = new orders("." + order_name);
}
//To Append Child Each Time Submit Buton Is Pressed And Check the Loop
function loop(argument) {
var i = 0;
while (i < orders_list.length) {
var temporary = document.createElement("table");
var orders_temp_list = orders_list[i];
temporary.innerHTML = "<tr><td>" + orders_list[i] + "</td><td onclick='remove(this)'>×</td></tr>";
document.body.appendChild(temporary);
//This Block Is That I was Checking
if (argument == "f") {
temporary.innerHTML = " ";
}
if (argument == "t") {
console.log("Done");
}
i++;
}
orders_list = [];
}
//To Remove The Specific Element User Want To Delete
function remove(el) {
el.closest('table').remove();
}
a {
margin: 20px;
padding: 30px;
}
table {
border: 3px solid #242424;
}
tr,
td {
padding: 20px;
}
<!DOCTYPE html>
<head></head>
<body>
Cake1
Cake2
Cake3
Cake4
<form>
<input placeholder="name">
<input placeholder="email">
<input placeholder="order">
</form>
<p id="para"></p>
<button onclick="loop('t')">Click</button>
</body>

Using <label> <input> <br> in for loop

I'd like to ask on how to add label, input, and br in for loop please. I'm trying to create an application to calculate score/GPA with for loop. Basically, if I enter 4 then 4 boxes of test scores will show up for me to enter (the default value is 150) - and the maximum I can go is 5.
I'm having problem putting label, input, and br in the for loop - the code is fine and it ran, but you obviously see that I'm not using label, input, and br tags.
How may I add these in please?
For example, if I enter 3 in the number of exams, then setupInputBox() will generate three label, three input and three br elements.
I attached my codes below.
Thank you so much!
// define a function so that in js code, $ can be used to replace document.getElementById
var $ = function(id) {
return document.getElementById(id);
};
var numInputs = 1; //default setting, showing one test score input box
//define setupInputBox function to add more test score inputs boxes
var setupInputBox = function() {
$('testInputs').innerHTML = "";
$('scoreTotal').value = "";
$('scoreAvg').value = "";
$('scoreFinal').value = "";
numInputs = $('numscores').value;
numInputs = parseInt(numInputs);
// convert inputs into integer numerical value
//step-1.1: Add a condition in if() statement
//if user input for number of test scores is valid and in the range 1 to 5
if (Number.isInteger(numInputs) && numInputs >= 1 && numInputs <= 5) {
var mainDiv = document.getElementById("testInputs");
for (var i = 0; i < numInputs; i++) {
//Step-1.2.1: create new <label>, <input>, and <br> elements (use createElement() method)
var lbl = document.createElement('label');
var inp = document.createElement("input");
var br = document.createElement("br");
//Step-1.2.2: create text content node for each new <label> element ( use createTextNode() method )
lbl.append(document.createTextNode("Test-" + (i + 1)));
//Step-1.3.1: add for attribute to each new <label> element ( use setAttribute() method)
lbl.setAttribute("for", "score" + (i + 1));
//Step-1.3.2: add id, type, and value attributes to new <input> elements ( use setAttribute() method)
inp.setAttribute("id", "score" + (i + 1));
inp.setAttribute("value", "150");
inp.setAttribute("type", "number");
//Step-1.4: append each new <label>, <input>, and <br> elements to the <div> element with id=”testInputs”.
mainDiv.append(lbl, inp, br);
}
}
};
//whenever user changes selection on number of test scores to consider, setupInputBox function will be executed again
$('numscores').oninput = setupInputBox;
//define processEntries function to get user inputted test scores, do input validation, and caculate total and average points and
//determine the final letter grade. Display all results on web page.
var processEntries = function() {
$('scoreTotal').value = "";
$('scoreAvg').value = "";
$('scoreFinal').value = "";
var score = []; //define an array to hold test scores
var message = ""; //define a variable for containing and displaying error message
var totalscore = 0,
avgScore, finalScore;
var isValid = true;
for (var i = 0; i < numInputs; i++) //
{
$("score" + (i + 1)).className = "";
//step 2.1: add js code to read in each user inputted test score(s) from input test score boxes on the web page.
var test = document.getElementById("score" + (i + 1));
var testScore = parseFloat(test.value);
//step 2.2: add js code to validate each test score to make sure all inputted test scores are numerical values
//between 0 and 150 (i.e., no less than 0 and no greater than 150 points).
if (!Number.isNaN(testScore) && testScore >= 0 && testScore <= 150) {
//if a test score is valid, add that test score to the score array.
score.push(testScore);
} else {
isValid = false;
//if a test score is invalid, generate error message, and add that error messge to message string.
message += "Test-" + (i + 1) + " score input is invalid. Should be a number between 0 and 150.\n"
test.setAttribute("class", "error");
}
}
console.log(score); //print out score array in console
console.log(message); //print out message string in console
if (isValid) {
//step2.3: add js so that when all inputted test scores are valid, compute total points, average points (with zero decimal place), and
//final letter grade, and display them in the input boxes in the <div> element with id=’result’ on the web page.
for (var j = 0; j < numInputs; j++) {
totalscore += score[j];
}
totalscore = totalscore.toFixed(1);
avgScore = totalscore / numInputs;
avgScore = avgScore.toFixed(1);
var scoreTotal = document.getElementById('scoreTotal');
scoreTotal.value = totalscore.toString();
var scoreAvg = document.getElementById('scoreAvg');
scoreAvg.value = avgScore.toString();
avgScore = parseFloat(avgScore);
if (avgScore <= 150 && avgScore >= 120)
finalScore = "A";
else if (avgScore < 120 && avgScore >= 100)
finalScore = "B";
else if (avgScore < 100 && avgScore >= 80)
finalScore = "C";
else if (avgScore < 80 && avgScore >= 60)
finalScore = "D";
else if (avgScore < 60)
finalScore = "F";
var scoreFinal = document.getElementById("scoreFinal")
scoreFinal.value = finalScore
} else {
//If not all inputted test scores are valid, then create an alert box to display an error message
alert(message);
}
}; //end of processEntries function
//each time when calculate button is clicked, inputted test scores will be evaluated and
$("calculate").onclick = function() {
if (numInputs > 0 && numInputs < 6)
processEntries();
};
$("numscores").focus();
#import url(http://fonts.googleapis.com/css?family=Wellfleet);
body {
font-family: 'Wellfleet', Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 60%;
min-width: 600px;
border: 3px solid blue;
padding: 0 1em .5em;
}
h1 {
color: blue;
margin: .5em 0;
}
#teacher {
float: right;
margin: 0px 30px 0px 0px;
}
label {
float: left;
width: 10em;
text-align: right;
margin-bottom: .5em;
}
input {
width: 5em;
margin-left: 1em;
margin-bottom: .5em;
}
input.error {
background-color: yellow;
}
#s1 {
display: inline-block;
}
#s1 input {
vertical-align: center;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Score App</title>
<link rel="stylesheet" href="score.css">
</head>
<body>
<main>
<h2>The Test Scores App</h2>
<img src="teacher.png" id="teacher" alt="teacher" width="177" height="277">
<div id="s1">
<label for="numscores">How many tests you want to consider?</label>
<input type='number' id='numscores' min='1' max='10' value='1'>
</div>
<div id="testInputs">
<label for="score1">Test-1:</label>
<input type='number' id='score1' value='150' /><br>
</div>
<div id='result'>
<label for="scoreTotal">Total Points:</label>
<input type="number" id="scoreTotal" disabled><br>
<label for="scoreAvg">Avg Grade:</label>
<input type="number" id="scoreAvg" disabled><br>
<label for="scoreFinal">Final Letter Grade:</label>
<input type="text" id="scoreFinal" disabled><br>
<label> </label>
<input type="button" id="calculate" value="Calculate">
</div>
</main>
<script src="testScoreV2.js">
</script>
</body>
</html>

Use a template literal and you can make this a lot simpler
// define a function so that in js code, $ can be used to replace document.getElementById
var $ = function(id) {
return document.getElementById(id);
};
var numInputs = 1; //default setting, showing one test score input box
//define setupInputBox function to add more test score inputs boxes
var setupInputBox = function() {
$('testInputs').innerHTML = "";
$('scoreTotal').value = "";
$('scoreAvg').value = "";
$('scoreFinal').value = "";
//string to hold our new html
let newHTML = "";
numInputs = $('numscores').value;
numInputs = parseInt(numInputs);
// convert inputs into integer numerical value
//step-1.1: Add a condition in if() statement
//if user input for number of test scores is valid and in the range 1 to 5
if (Number.isInteger(numInputs) && numInputs >= 1 && numInputs <= 5) {
var mainDiv = document.getElementById("testInputs");
for (var i = 0; i < numInputs; i++) {
//Create new html using template literal
newHTML += `<label for='score${i+1}'>Test - ${i+1}</label><input type='number' value='150' id='score${i+1}'><br>`;
}
//Update the div
mainDiv.innerHTML += newHTML;
}
};
//whenever user changes selection on number of test scores to consider, setupInputBox function will be executed again
$('numscores').oninput = setupInputBox;
//define processEntries function to get user inputted test scores, do input validation, and caculate total and average points and
//determine the final letter grade. Display all results on web page.
var processEntries = function() {
$('scoreTotal').value = "";
$('scoreAvg').value = "";
$('scoreFinal').value = "";
var score = []; //define an array to hold test scores
var message = ""; //define a variable for containing and displaying error message
var totalscore = 0,
avgScore, finalScore;
var isValid = true;
for (var i = 0; i < numInputs; i++) //
{
$("score" + (i + 1)).className = "";
//step 2.1: add js code to read in each user inputted test score(s) from input test score boxes on the web page.
var test = document.getElementById("score" + (i + 1));
var testScore = parseFloat(test.value);
//step 2.2: add js code to validate each test score to make sure all inputted test scores are numerical values
//between 0 and 150 (i.e., no less than 0 and no greater than 150 points).
if (!Number.isNaN(testScore) && testScore >= 0 && testScore <= 150) {
//if a test score is valid, add that test score to the score array.
score.push(testScore);
} else {
isValid = false;
//if a test score is invalid, generate error message, and add that error messge to message string.
message += "Test-" + (i + 1) + " score input is invalid. Should be a number between 0 and 150.\n"
test.setAttribute("class", "error");
}
}
console.log(score); //print out score array in console
console.log(message); //print out message string in console
if (isValid) {
//step2.3: add js so that when all inputted test scores are valid, compute total points, average points (with zero decimal place), and
//final letter grade, and display them in the input boxes in the <div> element with id=’result’ on the web page.
for (var j = 0; j < numInputs; j++) {
totalscore += score[j];
}
totalscore = totalscore.toFixed(1);
avgScore = totalscore / numInputs;
avgScore = avgScore.toFixed(1);
var scoreTotal = document.getElementById('scoreTotal');
scoreTotal.value = totalscore.toString();
var scoreAvg = document.getElementById('scoreAvg');
scoreAvg.value = avgScore.toString();
avgScore = parseFloat(avgScore);
if (avgScore <= 150 && avgScore >= 120)
finalScore = "A";
else if (avgScore < 120 && avgScore >= 100)
finalScore = "B";
else if (avgScore < 100 && avgScore >= 80)
finalScore = "C";
else if (avgScore < 80 && avgScore >= 60)
finalScore = "D";
else if (avgScore < 60)
finalScore = "F";
var scoreFinal = document.getElementById("scoreFinal")
scoreFinal.value = finalScore
} else {
//If not all inputted test scores are valid, then create an alert box to display an error message
alert(message);
}
}; //end of processEntries function
//each time when calculate button is clicked, inputted test scores will be evaluated and
$("calculate").onclick = function() {
if (numInputs > 0 && numInputs < 6)
processEntries();
};
$("numscores").focus();
#import url(http://fonts.googleapis.com/css?family=Wellfleet);
body {
font-family: 'Wellfleet', Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 60%;
min-width: 600px;
border: 3px solid blue;
padding: 0 1em .5em;
}
h1 {
color: blue;
margin: .5em 0;
}
#teacher {
float: right;
margin: 0px 30px 0px 0px;
}
label {
float: left;
width: 10em;
text-align: right;
margin-bottom: .5em;
}
input {
width: 5em;
margin-left: 1em;
margin-bottom: .5em;
}
input.error {
background-color: yellow;
}
#s1 {
display: inline-block;
}
#s1 input {
vertical-align: center;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Score App</title>
<link rel="stylesheet" href="score.css">
</head>
<body>
<main>
<h2>The Test Scores App</h2>
<img src="teacher.png" id="teacher" alt="teacher" width="177" height="277">
<div id="s1">
<label for="numscores">How many tests you want to consider?</label>
<input type='number' id='numscores' min='1' max='10' value='1'>
</div>
<div id="testInputs">
<label for="score1">Test-1:</label>
<input type='number' id='score1' value='150' /><br>
</div>
<div id='result'>
<label for="scoreTotal">Total Points:</label>
<input type="number" id="scoreTotal" disabled><br>
<label for="scoreAvg">Avg Grade:</label>
<input type="number" id="scoreAvg" disabled><br>
<label for="scoreFinal">Final Letter Grade:</label>
<input type="text" id="scoreFinal" disabled><br>
<label> </label>
<input type="button" id="calculate" value="Calculate">
</div>
</main>
<script src="testScoreV2.js">
</script>
</body>
</html>

Validating a form

IM working on a simple form, and Im trying to validate the fields,
with below code I able to validate the field and add a message if the field is empty.
}

First you need to scan the page for labels:
var labels = document.getElementsByTagName('LABEL');
for (var i = 0; i < labels.length; i++) {
if (labels[i].htmlFor != '') {
var elem = document.getElementById(labels[i].htmlFor);
if (elem)
elem.label = labels[i];
}
}
Then you can simply use following in your IF-ELSE condition,
document.getElementById(id).label.classList.add('red-text');
and
document.getElementById(id).label.classList.remove('red-text');
I also added CSS class for the text to be red.
.red-text {
color: #ff0000;
}
Final code:
function validation(id) {
var labels = document.getElementsByTagName('LABEL');
for (var i = 0; i < labels.length; i++) {
if (labels[i].htmlFor != '') {
var elem = document.getElementById(labels[i].htmlFor);
if (elem)
elem.label = labels[i];
}
}
var value = document.getElementById(id).value;
if (value === "" || value == null) {
document.getElementById('Err' + id).innerHTML = "- Field Required";
document.getElementById(id).classList.add('class');
document.getElementById(id).label.classList.add('red-text');
} else {
document.getElementById('Err' + id).innerHTML = "";
document.getElementById(id).classList.remove('class');
document.getElementById(id).label.classList.remove('red-text');
}
}
.class {
background: #f97d7d;
color: #ff0000;
border: 1px solid #ff0000 !important;
}
.red-text {
color: #ff0000;
}
<label for="Name">* Name <span class="error" id="ErrName"></span></label>
<input type="text" name="Name" id="Name" onblur="validation('Name')">

Change your javascript code to following:
function validation(id) {
var value = document.getElementById(id).value;
if (value === "" || value == null) {
document.getElementById('Err' + id).innerHTML = "- Field Required";
document.getElementById(id).classList.add('class');
var label = findLabel(document.getElementById('Name'));
label.classList.add('class');
} else {
document.getElementById('Err' + id).innerHTML = "";
document.getElementById(id).classList.remove('class');
var label = findLabel(document.getElementById('Name'));
label.classList.remove('class');
}
}
function findLabel(el) {
var idVal = el.id;
labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
if (labels[i].htmlFor == idVal)
return labels[i];
}
}
.class
{
background: #f97d7d;
color: #ff0000;
border: 1px solid #ff0000 !important;
}
<label class="" for="Name">* Name <span class="error" id="ErrName"></span></label>
<input type="text" name="Name" id="Name" onblur="validation('Name')">
I've added a function findLable to get the label for that input, and using that, added error class to that label.

The span is defined as class "error" but you haven't defined that class.

I think it is better to bind blur and input events
the code:
Name.addEventListener('blur', function(){
if (!Name.value){
ErrName.innerHTML="Field Required";
this.classList.add('class');
ErrName.parentNode.style.color="red";
}
});
Name.addEventListener('input',function(){
if (Name.value.length && ErrName.innerHTML=="Field Required" ){
ErrName.innerHTML="";
this.classList.remove('class');
ErrName.parentNode.style.color="black";
}
});
a liddle fiddle