I have 2 problems that i am not able to solve:
The code should show me a Alert if everything is correctly saved. I made that alert message, but if i add 10 elements and click save, i get 10 alerts.
Unable to add dynamical textfield after i press the Radio Button in the drop down. I did a lot of things, but whenever i implant it, indexedDB stops working.
Bonus question if somebody knows the answer to:
3. How can i save the Forms i made in the Forms tab, so i can search them later and put new info in?
var db;
function indexedDBOk() {
return "indexedDB" in window;
}
document.addEventListener("DOMContentLoaded", function() {
//No support? Go in the corner and pout.
if(!indexedDBOk) return;
var openRequest = indexedDB.open("idarticle_people4",1);
openRequest.onupgradeneeded = function(e) {
var thisDB = e.target.result;
if(!thisDB.objectStoreNames.contains("people")) {
thisDB.createObjectStore("people", {autoIncrement:true});
}
};
openRequest.onsuccess = function(e) {
db = e.target.result;
//Listen for add clicks
document.querySelector("#addButton").addEventListener("click", addPerson, false);
openRequest.onsuccess = function(e) {
alert('success: version 1 opened');
};
//Listen for get clicks
document.querySelector("#getButton").addEventListener("click", getPerson, false);
};
openRequest.onerror = function(e) {
}
},false);
function addPerson(e) {
//console.log(i);
var person= new Array(polje2);
for (n=0; n<i; n++) {
person.length=i;
var element='#element';
element+=n;
var unos='#unos';
unos+=n;
var provjera = document.querySelector(element).type;
var polje1 = document.querySelector(unos).innerHTML;
if (provjera=='checkbox') {
var polje2 = document.querySelector(element).checked
}
else {
polje2 = document.querySelector(element).value
}
if (polje2==='') {
alert ('Uspješno snimljeno');
}
//default for OS list is all, default for type is read
var transaction = db.transaction(["people"],"readwrite");
//Ask for the objectStore
var store = transaction.objectStore("people");
person[n]=
{pitanje: polje1, odgovor:polje2 };
}
//Perform the add
var request = store.add(person);
request.onerror = function(e) {
console.log("Error",e.target.error.
name);
//some type of error handler
};
request.onsuccess = function(e) {
console.log("Jej, uspjelo je");
}
}
function getPerson(e) {
var key = document.querySelector("#key").value;
if(key === "") return;
var transaction = db.transaction(["people"],"readonly");
var store = transaction.objectStore("people");
var request = store.get(Number(key));
request.onsuccess = function(e) {
var result = e.target.result;
if(result) {
var s = "<h2>Forma broj: "+key+"</h2><p>";
for(var j=0; j<result.length; j++) {
s+= (result[j].pitanje + ': ' + result[j].odgovor + "<br/>");
}
document.querySelector("#status").innerHTML = s;
}
else {
document.getElementById('element').style.visibility='visible'
}
}
}
// get allPeople
// Funkcija za pravljenje Elemenata
var i = 0;
var a = 1;
function mojaFunkcija() {
var type1 = document.getElementById('type1').value;
var type2 = document.getElementById('type2').value;
var question = document.getElementById('question').value;
var counter = 'Element';
counter+= a;
var prviElement=document.createElement('span');
prviElement.textContent= counter + ':' +' ';
document.body.appendChild(prviElement);
var pitanje= document.createElement('span');
var unos='unos';
unos += i;
pitanje.id=unos;
pitanje.textContent=question + ' ';
document.body.appendChild(pitanje);
var tip1 = document.createElement("input");
var element='element';
element += i;
tip1.id=element;
if (type1=='textbox') {
tip1.type=type2
} else {
tip1.type=type1
}
document.body.appendChild(tip1);
var linija1= document.createElement("br");
document.body.appendChild(linija1);
var linija2= document.createElement("br");
document.body.appendChild(linija2);
i++;
a++;
}
function AddTextBox(elm) {
var v = elm.value;
var iCounter = elm.id.replace('type1', '');
if (v == 'radio') {
var textbox = document.createElement('input');
textbox.type = 'text';
textbox.id = 'txtSecond' + iCounter;
elm.parentNode.insertBefore(textbox, elm.nextSibling);
} else {
//Ovaj kod ce da izbrise Textbox u slucaju da se izabere druga opcija.
var rmv = document.getElementById('txtSecond' + iCounter);
if (rmv != undefined) {
rmv.remove();
}
}
}
function modify_value()
{
var hidden_field = document.getElementById('test3');
hidden_field.value = 'testvalue';
}
/* Dropdown Button */
.dropbtn {
background-color: #A9A9A9;
color: white;
padding: 10px;
font-size: 16px;
text-align:center;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #696969;}
input{
text-align:left;
}
.hide {
visibility: hidden
}
.h1 {
font-size: 4em;
}
.h2 {
font-size: 2.5em;
}
/* Dropdown Button */
.dropbtn2 {
background-color: #A9A9A9;
color: white;
padding: 10px;
font-size: 16px;
text-align:center;
border: none;
cursor: pointer;
margin-left:580px;
}
/* Dropdown button on hover & focus */
.dropbtn2:hover, .dropbtn2:focus {
background-color: #696969;}
input{
text-align:left;
}
.kocka {
max-width: 291px;
max-height: 94px;
background-color: #91ceff;
border: 20px;
border-style:solid;
border-color:#91ceff;
}
.kocka2 {
max-width: 291px;
max-height: 94px;
background-color: #91ceff;
border: 20px;
border-style:solid;
border-color:#91ceff;
}
/* Dropdown button on hover & focus */
.kocka2:hover, .kocka2:focus {
background-color: #696969;}
input{
text-align:left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="pepo.css">
<meta charset="UTF-8">
<script src="basa.js"></script>
<title>OnlineForms</title>
</head>
<body>
<!--Ovaj kod je za Main Page-->
<Main class="kocka">
<div align="left">
<input type="button" class="dropbtn" value="Administration" onClick="window.location.reload();return false;"/>
<button class="dropbtn" id="getAllButton">Forms</button>
</div>
<br>
<div align="left">
<input type="number" id="key" class="dropbtn" Placeholder="Type the key value"/>
<button class="dropbtn" id="getButton"> Search </button>
<br>
<br>
</div>
</Main>
<!--Ovaj kod je za Elemente-->
<div id="element" class="hide">
<h1>Element <input type="text" class="dropbtn" id="question" value="" Placeholder="Type your question here"/>
<select title="ddmenu" class="dropbtn" id="type1">
<option selected disabled hidden value="Please select">Please select</option>
<option value="textbox">textbox</option>
<option value="checkbox">checkbox</option>
<option value="radio">radio button</option>
</select>
<select title="ddmenu" class="dropbtn" id="type2">
<option selected disabled hidden value="Please select">Please select</option>
<option value="none">none</option>
<option value="mandatory">mandatory</option>
<option value="number">numeric</option>
</select>
</h1>
<input type="button" id="adddugme" class="dropbtn2" value="Add" onclick="mojaFunkcija()"/>
<br>
<br>
<button id="addButton" class='dropbtn'>Save</button>
</div>
<br>
<br>
<div id="status"></div>
<br>
<div id="status2"></div>
</body>
</html>
Related
Hi I am trying to make a field required when option is selected like if option 1 is selected so field one will be required and if option 2 then field 2 and make field 1 not required so on. So far I have tried setAttribute, removeAttribute, getelemenybyid(..).required=true or false (proper camel cases are used in code). nothing seem to work.to better explain I have entered the code below. I am using this form as Camunda embedded form and scripts are java scripts. smaple below
<div class="form-group" >
<label for="AmendmentType" >Amendment Type: </label>
<select class="form-control" onchange="Optionselection(this);" cam-variable-name="AmendmentType" cam-variable-type="String" id = "AmendmentType" required>
<option onClick="Optionselection()" id="update" name="AmendmentType" value="Update a field">Update a field</option>
<option onClick="Optionselection()" id="DuplicateId" name="AmendmentType" value="Duplicate Tax Files (to be mande inactive)">Duplicate Tax Files (to be made inactive)</option>
</select>
</div>
function Optionselection(that) {
if (that.value == "Update a field") {
document.getElementById('ValueinSystem').required=true;
document.getElementById('duplicateID').required=false;
}
else if(that.value == "Duplicate Tax Files (to be mande inactive)") {
document.getElementById('ValueinSystem').required=flase;
document.getElementById('duplicateID').required=true;
}
as i said i tried the following nothing seems to work
function Optionselection(that) {
if (that.value == "Update a field") {
document.getElementById('ValueinSystem').setAttribute('required','');
document.getElementById('duplicateID').removeAttribute('required');
}
else if(that.value == "Duplicate Tax Files (to be mande inactive)") {
document.getElementById('duplicateID').setAttribute('required','');
document.getElementById('ValueinSystem').removeAttribute('required');
}
Selects and makes the respective input field required, to distinguish added some style
More on client side validation here .......
const carsNode = document.querySelector("#cars");
const merc = document.querySelector("#merc");
const audi = document.querySelector("#audi");
const form = document.querySelector("form");
const mercError = document.querySelector('#merc + span.error');
const audiError = document.querySelector('#audi + span.error');
const carError = document.querySelector('#cars + span.error');
let selectedCar;
cars.addEventListener('change', (e) => {
// we listen to change event for select
selectedCar = e.target.value;
switch (selectedCar) {
case "mercedes":
merc.required = true;
audi.required = false;
break;
case "audi":
merc.required = false;
audi.required = true;
break;
default:
merc.required = false;
audi.required = false;
break;
}
})
form.addEventListener('submit', function(event) {
// if the field's is valid, we let the form submit
if ((!merc.validity.valid && selectedCar === "mercedes") || (!audi.validity.valid && selectedCar === "audi") || !selectedCar) {
// If it isn't, we display an appropriate error message
showError();
// Then we prevent the form from being sent by canceling the event
event.preventDefault();
}
});
function showError() {
if (merc.validity.valueMissing && selectedCar === "mercedes") {
// If the field is empty,
// display the following error message.
mercError.textContent = 'You need to enter a Mercedes value';
carError.textContent = '';
audiError.textContent = '';
// Set the styling appropriately
mercError.className = 'error active';
audiError.classList.remove('error', 'active');
carError.classList.remove('error', 'active');
} else if (audi.validity.valueMissing && selectedCar === "audi") {
audiError.textContent = 'You need to enter an Audi value';
mercError.textContent = '';
carError.textContent = '';
// Set the styling appropriately
audiError.className = 'error active';
mercError.classList.remove('error', 'active');
carError.classList.remove('error', 'active');
} else {
mercError.classList.remove('error', 'active');
audiError.classList.remove('error', 'active');
carError.textContent = 'You need to select a car';
mercError.textContent = '';
audiError.textContent = '';
carError.className = 'error active';
}
}
input:required {
border: 1px dashed red;
}
body {
font: 1em sans-serif;
width: 200px;
padding: 0;
margin: 10px auto;
}
p * {
display: block;
}
/* This is our style for the invalid fields */
input:invalid {
border-color: #900;
background-color: #FDD;
}
input:focus:invalid {
outline: none;
}
/* This is the style of our error messages */
.error {
width: 100%;
padding: 0;
font-size: 80%;
color: white;
background-color: #900;
border-radius: 0 0 5px 5px;
box-sizing: border-box;
}
.error.active {
padding: 0.3em;
margin-top: 5px;
}
input {
-webkit-appearance: none;
appearance: none;
width: 100%;
border: 1px solid #333;
margin: 0;
font-family: inherit;
font-size: 90%;
box-sizing: border-box;
}
<div>
<form novalidate>
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="" selected>Select Car</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<span class="error" aria-live="polite"></span>
<br>
<br>
<label for="merc">Mercedes:</label>
<input type="text" id="merc" name="merc">
<span class="error" aria-live="polite"></span>
<br><br>
<label for="audi">Audi:</label>
<input type="text" id="audi" name="audi">
<span class="error" aria-live="polite"></span>
<br><br>
<button>Submit</button>
</form>
</div>
What I don't understand is why does my code not change the text of the label when the radio is selected?
This is what is suppose to happen:
Which when 'Fahrenheit to Celsius' is selected the first image should be true (the text of the first and second label should change)
When 'Celsius to Fahrenheit' is selected the second image should be true (the text of the first and second label should change)
What I'm guessing is my problem is with the if ($("input:to_celsius").val() == "true") statement but I don't quite know why it's wrong.
***Current error message:
{
"message": "Uncaught TypeError: Cannot set property 'onclick' of null",
"filename": "https://stacksnippets.net/js",
"lineno": 69,
"colno": 30
}
"use strict";
var $ = function(id) { return document.getElementById(id); };
var clearTextBoxes = function() {
$("#degrees_entered").value = "";
$("#degrees_computed").value = "";
};
window.onload = function() {
$("#to_celsius").onclick = toCelsius;
$("#to_fahrenheit").onclick = toFahrenheit;
$("#degrees_entered").focus();
};
// Change the text of label 1 and 2 when the radio 'Celsius to Fahrenheit' is selected and clears all other inputs
var toFahrenheit = function() {
if ($("#to_fahrenheit").val() == "true") {
$("#degree_labl_1").text("Enter C degrees");
$("#degree_label_2").text("Degrees Fahrenheit");
clearTextBoxes();
}
}
// Change the text of label 1 and 2 when the radio 'Fahrenheit to Celsius' is selected and clears all other inputs
var toCelsius = function() {
if ($("#to_celsius").val() == "true") {
$("#degree_labl_1").text("Enter F degrees");
$("#degree_label_2").text("Degrees Celsius");
clearTextBoxes();
}
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 450px;
border: 3px solid blue;
}
h1 {
color: blue;
margin: 0 0 .5em;
}
main {
padding: 1em 2em;
}
label {
float: left;
width: 10em;
margin-right: 1em;
}
input {
margin-bottom: .5em;
}
#convert {
width: 10em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Convert Temperatures</title>
<link rel="stylesheet" href="styles.css">
<script src="convert_temp.js"></script>
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<main>
<h1>Convert temperatures</h1>
<input type="radio" name="conversion_type" id="to_celsius" checked>Fahrenheit to Celsius<br>
<input type="radio" name="conversion_type" id="to_fahrenheit">Celsius to Fahrenheit<br><br>
<label id="degree_label_1">Enter F degrees:</label>
<input type="text" id="degrees_entered" ><br>
<label id="degree_label_2">Degrees Celsius:</label>
<input type="text" id="degrees_computed" disabled><br>
<label> </label>
<input type="button" id="convert" value="Convert" /><br>
</main>
</body>
</html>
There are multiple issues in your code.
Looks like you are trying to use jQuery here, but in your case you are overriding the jQuery $ function with a custom function. So in effect you are not using jQuery here by calling the $ function but using pure javascript selectors
var $ = function(id) {
return document.getElementById(id);
};
With a function declaration as above, you can select elements only by Id and the Id should not be prefixed with #
$("#degree_label_1") won't work here
$("degree_label_1") will work.
So I suggest changing the $ function declaration to something like below.
var $ = function(selector) {
return document.querySelector(selector);
};
Here I changed document.getElementById -> document.querySelector so that selectors are more flexible (You can use any css selectors like "#id", ".classname" etc)
As we are not using jQuery here, the below code will not work. In jQuery, its correct but there are syntax differences in accessing the dom in plain javascript
$("#to_fahrenheit").val() == "true"
One way to implement the same is..
Assign values to the radio button inputs
<input
type="radio"
name="conversion_type"
id="to_celsius"
value="f_to_c"
checked
/>Fahrenheit to Celsius<br />
<input
type="radio"
name="conversion_type"
id="to_fahrenheit"
value="c_to_f"
/>Celsius to Fahrenheit<br />
and check the value
$("#to_fahrenheit").value == "c_to_f"
Same applies to the below line. There's a typo as well (Missed an e in degree_label_1)
$("#degree_labl_1").text("Enter F degrees")
should be changed to
$("#degree_label_1").textContent = "Enter F degrees"
Complete code would look like below.
"use strict";
var $ = function(id) {
return document.querySelector(id);
};
var clearTextBoxes = function() {
$("#degrees_entered").value = "";
$("#degrees_computed").value = "";
};
window.onload = function() {
$("#to_celsius").onclick = toCelsius;
$("#to_fahrenheit").onclick = toFahrenheit;
$("#convert").onclick = convert;
$("#degrees_entered").focus();
};
// Change the text of label 1 and 2 when the radio 'Celsius to Fahrenheit' is selected and clears all other inputs
var toFahrenheit = function() {
if ($("#to_fahrenheit").value == "c_to_f") {
$("#degree_label_1").textContent = "Enter C degrees";
$("#degree_label_2").textContent = "Degrees Fahrenheit";
clearTextBoxes();
}
};
// Change the text of label 1 and 2 when the radio 'Fahrenheit to Celsius' is selected and clears all other inputs
var toCelsius = function() {
if ($("#to_celsius").value == "f_to_c") {
$("#degree_label_1").textContent = "Enter F degrees";
$("#degree_label_2").textContent = "Degrees Celsius";
clearTextBoxes();
}
};
var convert = function() {
var conversiontype = $(
'[name="conversion_type"]:checked'
).value;
var enteredValue = Number($("#degrees_entered").value);
if (conversiontype === "f_to_c") {
$("#degrees_computed").value = ((enteredValue - 32) * 5) / 9;
} else {
$("#degrees_computed").value = (enteredValue * 9) / 5 + 32;
}
};
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 450px;
border: 3px solid blue;
}
h1 {
color: blue;
margin: 0 0 0.5em;
}
main {
padding: 1em 2em;
}
label {
float: left;
width: 10em;
margin-right: 1em;
}
input {
margin-bottom: 0.5em;
}
#convert {
width: 10em;
}
<h1>Convert temperatures</h1>
<input
type="radio"
name="conversion_type"
id="to_celsius"
value="f_to_c"
checked
/>Fahrenheit to Celsius<br />
<input
type="radio"
name="conversion_type"
id="to_fahrenheit"
value="c_to_f"
/>Celsius to Fahrenheit<br /><br />
<label id="degree_label_1">Enter F degrees:</label>
<input type="text" id="degrees_entered" /><br />
<label id="degree_label_2">Degrees Celsius:</label>
<input type="text" id="degrees_computed" disabled /><br />
<label> </label>
<input type="button" id="convert" value="Convert" /><br />
If you want to use jQuery, you should remove below function declaration
var $ = function(id) {
return document.getElementById(id);
};
And modify your code as follows.
"use strict";
var clearTextBoxes = function() {
$("#degrees_entered").val("");
$("#degrees_computed").val("");
};
window.onload = function() {
$("#to_celsius").on("click", toCelsius);
$("#to_fahrenheit").on("click", toFahrenheit);
$("#convert").on("click", convert);
$("#degrees_entered").focus();
};
// Change the text of label 1 and 2 when the radio 'Celsius to Fahrenheit' is selected and clears all other inputs
var toFahrenheit = function() {
if ($("#to_fahrenheit").val() == "c_to_f") {
$("#degree_label_1").text("Enter C degrees");
$("#degree_label_2").text("Degrees Fahrenheit");
clearTextBoxes();
}
};
// Change the text of label 1 and 2 when the radio 'Fahrenheit to Celsius' is selected and clears all other inputs
var toCelsius = function() {
if ($("#to_celsius").val() == "f_to_c") {
$("#degree_label_1").text("Enter F degrees");
$("#degree_label_2").text("Degrees Celsius");
clearTextBoxes();
}
};
var convert = function() {
var conversiontype = $(
'[name="conversion_type"]:checked'
).val();
var enteredValue = Number($("#degrees_entered").val());
if (conversiontype === "f_to_c") {
$("#degrees_computed").val(((enteredValue - 32) * 5) / 9);
} else {
$("#degrees_computed").val((enteredValue * 9) / 5 + 32);
}
};
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 450px;
border: 3px solid blue;
}
h1 {
color: blue;
margin: 0 0 0.5em;
}
main {
padding: 1em 2em;
}
label {
float: left;
width: 10em;
margin-right: 1em;
}
input {
margin-bottom: 0.5em;
}
#convert {
width: 10em;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<h1>Convert temperatures</h1>
<input type="radio" name="conversion_type" id="to_celsius" value="f_to_c" checked />Fahrenheit to Celsius<br />
<input type="radio" name="conversion_type" id="to_fahrenheit" value="c_to_f" />Celsius to Fahrenheit<br /><br />
<label id="degree_label_1">Enter F degrees:</label>
<input type="text" id="degrees_entered" /><br />
<label id="degree_label_2">Degrees Celsius:</label>
<input type="text" id="degrees_computed" disabled /><br />
<label> </label>
<input type="button" id="convert" value="Convert" /><br />
I'm having an issue calculating the difference of two variables that should change depending on input values and number of inputs.
The jQuery works fine adding/subtracting buttons it's the peoplePaid() function that I've been dealing with.
I'm trying to write the difference (.difference) of paidTotal minus each input of pCheck.
So the first question is how do I get the value for difference (paidTotal - pCheck) to write to .difference for each input on the page.
And if I have to loop iy what may need to be done.
Thank you!
$(document).ready(function () {
var maxFields = 20;
var addButton = $('#plusOne');
var deleteButton = $('#minusOne');
var wrapper = $('#userNumbers');
var fieldInput = '<div><input type="text" name="persons" class="persons"/></div>';
var x = 1;
$(addButton).click(function () {
if (x < maxFields) {
x++;
$(wrapper).append(fieldInput);
}
});
$(deleteButton).click(function (e) {
e.preventDefault();
var myNode = document.getElementById("userNumbers");
i = myNode.childNodes.length - 1;
if (i >= 0) {
myNode.removeChild(myNode.childNodes[i]);
x--;
}
});
});
function peoplePaid() {
var checkTotal = parseFloat(document.getElementById('check').value);
var personsCheck = document.getElementsByClassName('persons');
var paidTotal = document.getElementById('paidTotal');
var serviceQuality = document.getElementById('serviceQuality').value;
var difference = document.getElementsByClassName('difference');
var pCheck = 0;
for (var i = 0; i < personsCheck.length; i += 1) {
pCheck += parseFloat(personsCheck[i].value);
}
paidTotal.innerHTML = (checkTotal * serviceQuality) - pCheck;
for (var i = 0; i < personsCheck.length; i += 1) {
checkDifference = parseFloat(paidTotal - pCheck).value;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Check Total</h3>
$ <input type="text" id="check" value="" />
<h3>Tip%</h3>
<select name="tip" id="serviceQuality">
<option disabled selected value="1">-- Choose an Option --</option>
<option value="1">0%</option>
<option value="1.06">6%</option>
<option value="1.15">15%</option>
<option value="1.2">20%</option>
<option value="1.3">30%</option>
</select>
<h3>Number of People: <span id="numberOfPeople"></span></h3>
<button type="button" onclick="plusOne()" id="plusOne">+</button>
<button type="button" onclick="minusOne()" id="minusOne">-</button>
<div>
<div id="userNumbers">
<input type="text" class="persons" name="person" />
<p class="difference">$</p>
</div>
</div>
<button onclick="peoplePaid()">Calculate</button>
<!--Paid Amount-->
<div>
<h3>Paid Amount: <span id="paidTotal"></span></h3>
</div>
Disscrepancies
There were some discrepancies that should be addressed:
(Major) There are two functions called by onclick event handlers:
<button type="button" onclick="plusOne()" id="plusOne">+</button>
<button type="button" onclick="minusOne()" id="minusOne">-</button>
First of all, a quick run of this Snippet logs errors about these functions not existing. Secondly, you should never use on-event handlers when using jQuery, it's like using paddle (on-event handlers) on a speed boat (event delegation using .on()).
(Minor) If you store jQuery Objects in variables, do not wrap those variables in $(...) because they already wrapped in $(...) when you declared them:
var addButton = $('#plusOne');
$(addButton).on('click',... // That is like doing this: $($('#plusOne'))
addButton.on('click',...... // This is the cleaner way or...
var $addButton = $('#plusOne');
$addButton.on('click'...... /* This is a common practice which serves as an obvious
reminder that the variable is a jQuery Object */
Plain JavaScript Array Methods
(Core) The solution is to collect all of the input.customer' by gathering the <input>s into a NodeList with .querySelctorAll() and then converting it into an array with Array.from():
var customers = Array.from(document.querySelectorAll('.customer'));
Next, use .map() to extract each of the <input>'s values, and then return them as an array:
var payments = customers.map(function(customer) {
return parseFloat(customer.value);
});
Finally, use .reduce() to add all of the values in the payments array into one number:
paidTotal = payments.reduce(function(total, number) {
return total + number;
});
Demo
var max = 20;
var count = 1;
var paidTotal = 0;
var customerQty = $('#totalCustomers');
var add = $('#add');
var group = $('.group');
var paid = `
<li>
<input type="number" class="customer" step='0.01'/>
<button type="button" class="remove">-</button>
</li>`;
add.on('click', function(e) {
if (count < max) {
count++;
group.append(paid);
} else {
return false;
}
customerQty.val(count);
});
group.on('click', '.remove', function() {
if (count > 0) {
count--;
var subtract = parseFloat($(this).prev('.customer').val()).toFixed(2);
var total = parseFloat($('#paidTotal').val()).toFixed(2);
var newTotal = parseFloat(total - subtract).toFixed(2);
$('#paidTotal').val(newTotal);
var due = parseFloat($('#balanceDue').val());
$('#balanceDue').val((due + parseFloat(subtract)).toFixed(2));
$(this).parent().remove();
} else {
return false;
}
customerQty.val(count);
});
$('#bill').on('input', totalPaid);
function totalPaid(e) {
var check = $('#check').val();
var tip = $('#tip').val();
var total = $('#paidTotal');
var due = $('#balanceDue');
var customers = Array.from(document.querySelectorAll('.customer'));
var payments = customers.map(function(customer) {
return parseFloat(customer.value);
});
//console.log('payments: '+payments);
paidTotal = payments.reduce(function(total, number) {
return total + number;
});
$('#amountDue').val(parseFloat(check * tip).toFixed(2));
//console.log('paidTotal: '+paidTotal);
total.val(parseFloat(paidTotal).toFixed(2));
due.val(parseFloat((check * tip) - total.val()).toFixed(2));
}
html {
font: 400 16px/1.5 Consolas;
}
body {
font-size: 1rem;
}
fieldset {
width: 490px;
}
button,
label,
select,
input,
output {
display: inline-block;
font: inherit;
line-height: 1.5;
}
label {
margin: 5px;
}
input {
width: 12ex;
text-align: center
}
button {
cursor: pointer;
}
output {
margin-left: -5px;
}
#totalCustomers {
font-size: 1.2rem;
color: blue;
}
#tip {
padding: 5px 0;
margin-left: -5px;
}
.tip {
margin-left: -2px;
}
.customers {
height: fit-content;
min-height: 60px;
}
.group {
margin: -8% 10px auto -25px;
padding-left: 1.5em;
width: 40%;
list-style-position: inside;
}
.group li {
padding-left: 0.1em;
}
.add {
transform: translate(105%, -15%);
}
/*
For debugging purposes only (Optional)
*/
.as-console-wrapper {
width: 250px;
min-height: 100%;
margin-left: 50%;
background: #000;
color: lime;
}
.as-console-row.as-console-row {
background: #000;
}
.as-console-row.as-console-row::after {
content: '';
padding: 0;
margin: 0;
border: 0;
width: 0;
}
<form id='bill'>
<fieldset class='total'>
<legend>Total Amount Due</legend>
$ <input type="number" id="check" value="" step='0.01' min='0.00'>
<label class='tip'>Tip%</label>
<select id="tip">
<option disabled selected value="">Pick</option>
<option value="1">0%</option>
<option value="1.06">6%</option>
<option value="1.15">15%</option>
<option value="1.2">20%</option>
<option value="1.3">30%</option>
</select>
<label>Amount Due: $
<output id="amountDue">0.00</output>
</label>
</fieldset>
<fieldset class='customers'>
<legend>Total Customers:
<output id="totalCustomers">1</output>
</legend>
<label class='add'> Add a Customer
<button type="button" id="add">+</button>
</label>
<ol class='group'>
<li>
<input type="number" class="customer" step='0.01' min='0.00' />
<button type="button" class="remove">-</button>
</li>
</ol>
</fieldset>
<fieldset class='grandTotal'>
<legend>Total Balance</legend>
<label>Paid Amount: $
<output id="paidTotal">0.00</output>
</label>
<br>
<label>Balance Due: $
<output id="balanceDue">0.00</output>
</label>
</fieldset>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I apologize for asking silly questions, but I have tried to mess with the CSS and changed very little. I am trying to get the label/dropdown (which says "withdrawal" by default to align with the others and also get rid of some of the space between the text areas so that it looks more like the screenshot provided by my instructor. I did manage to reduce some of the extra space between areas by reducing the pixels, but I am not certain how to get it to look exactly like the screenshot.
If anyone would please give suggestions, I would genuinely appreciate it.
var pad_left = function(text, width, pad) { //sets up text area formatting
var result = text.toString();
while (result.length < width) {
result = pad + result;
}
return result; // populates text area
}
var pad_right = function(text, width, pad) { // sets up text area formatting
var result = text.toString();
while (result.length < width) {
result = result + pad;
}
return result;
}
var getResults = function(results) { // actual calculation functions
if (results.length == 0) {
return "";
}
var balance = 2000; / /actual format of text area
var list = pad_right("Date", 12, " ");
list += pad_right("Amount", 12, " ");
list += pad_right("Running Balance", 15, " ") + "\n";
list += pad_right("", 11, "-") + " ";
list += pad_right("", 11, "-") + " ";
list += pad_right("", 15, "-") + "\n";
for (var i = 0; i < results.length; i++) { // loop to calculate balances
var trans = results[i];
list += pad_right(trans["date"], 12, " ");
if(trans["type"] == "withdrawal") // withdrawal calculation
{
balance -= trans["amount"]
list += "$" + pad_left( "-" + trans["amount"].toFixed(2), 11, " ") + " ";
} else { //for Deposits
balance += trans["amount"]
list += "$" + pad_left( trans["amount"].toFixed(2), 11, " ") + " ";
}
list += "$" + pad_left(balance.toFixed(2), 14, " ") + "\n";
}
return list;
}
var get_runningBalance = function(results) { // function to calculate Running Balance
var runningBalance = 0, amount;
for (var i in results) {
runningBalance = startBal - "amount" ;
runningBalance += parseInt(runningBalance.toFixed(2));
}
return runningBalance;
}
var get_startBal = function(transactions){ // fills Starting Balance
return 2000;
}
var get_totalDep = function(transactions){ // function to calculate Total Deposits
var totalDep = 0;
for(var i = 0; i < transactions.length; i++){
var trans = transactions[i];
if(trans["type"] == "deposit")
{
totalDep += trans["amount"]
}
}
return totalDep;
}
var get_totalWd = function(transactions){ // function to calculate Total Withdrawals
var totalWd = 0;
for(var i = 0; i < transactions.length; i++){
var trans = transactions[i];
if(trans["type"] == "withdrawal")
{
totalWd -= trans["amount"]
}
}
return totalWd;
}
var get_endBal = function(transactions){ // function to calculate Ending Balance
var balance = 2000;
for(var i = 0; i < transactions.length; i++){
var trans = transactions[i];
if(trans["type"] == "withdrawal")
{
balance -= trans["amount"]
} else { // Is Deposit
balance += trans["amount"]
}
}
return balance.toFixed(2);
}
// sets up the global variables and arrays for the functions
var balances = [];
var transactions = [];
var $ = function (id) {
return document.getElementById(id);
}
// pulls the info from text boxes
var update_display = function() {
$("startBal").value = get_startBal(transactions);
$("totalDep").value = get_totalDep(transactions);
$("totalWd").value = get_totalWd(transactions);
$("endBal").value = get_endBal(transactions);
$("date").value = "";
$("amount").value = "";
$("date").focus();
$("results").value = getResults(transactions);
}
// function to add transactions to the text area
var addTrans_click = function () {
var trans = [];
trans["date"] = $("date").value;
trans["amount"] = parseFloat($("amount").value);
trans["type"] = $("type").value;
if (trans["date"] == "") return;
if (isNaN(trans["amount"])) return;
transactions.push(trans);
update_display();
}
// the event handlers
window.onload = function () {
$("addTrans").onclick = addTrans_click;
$("date").focus();
}
body {
background: none repeat scroll;
font-family: Arial,Helvetica,sans-serif;
}
#content {
background: none repeat scroll;
border: 8px solid gray;
margin: 10px auto;
padding: 5px 20px;
text-align: center;
width: 600px;
}
h1, h2 {
text-align: left;
}
label {
display: block;
float: left;
padding-right: 1em;
text-align: right;
width: 10em;
}
input {
display: block;
float: left;
}
select {
display: block;
text-align: center;
width: 10em;
}
.formLayout label {
float: left;
text-align: right;
width: 10em;
}
.formLayout input {
margin-bottom: 0.5em;
margin-left: 0.5em;
}
.formLayout br {
clear: both;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Monthly Balance Calculator</title>
<link href="monthly_balance.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="mbc_library.js"></script>
<script type="text/javascript" src="monthly_balance.js"></script>
</head>
<body>
<div id="content">
<h1>Monthly Balance Calculator</h1>
<br />
<h2>Add Transaction</h2>
<hr />
<br />
<div class="formLayout">
<label for="date">Date:</label>
<input type="text" name="date" id="date" />
<br />
<br />
<label for="type">Type:</label>
<select name="type" id="type">
<option value="withdrawal">Withdrawal</option>
<option value="deposit">Deposit</option>
</select>
<br />
<label for="amount">Amount:</label>
<input type="text" name="amount" id="amount"/>
<br />
<br />
<label> </label>
<input type="button" id="addTrans" value="Add Transaction" />
<br />
</div>
<h2>Transactions</h2>
<hr />
<br />
<textarea name="results" id="results" rows="10" cols="60" disabled="disabled">
</textarea>
<br />
<br />
<h2>Summary</h2>
<hr />
<br />
<div class="formLayout">
<label for="startBal">Starting Balance:</label>
<input type="text" name="startBal" id="startBal"
class="disabled" disabled="disabled"/>
<br />
<br />
<label for="totalDep">Total Deposits:</label>
<input type="text" name="totalDep" id="totalDep"
class="disabled" disabled="disabled"/>
<br />
<br />
<label for="totalWd">Total Withdrawals:</label>
<input type="text" name="totalWd" id="totalWd"
class="disabled" disabled="disabled"/>
<br />
<br />
<label for="endBal">Ending Balance</label>
<input type="text" name="endBal" id="endBal"
class="disabled" disabled="disabled"/>
<br />
<br />
</div>
</body>
</html>
Note, I had to add BOTH JS files in the same form because this site only allows me to paste two, despite the fact that I added two to the HTML page
I think this is what you need.
Check with below code.
var pad_left = function(text, width, pad) { //sets up text area formatting
var result = text.toString();
while (result.length < width) {
result = pad + result;
}
return result; // populates text area
}
var pad_right = function(text, width, pad) { // sets up text area formatting
var result = text.toString();
while (result.length < width) {
result = result + pad;
}
return result;
}
var getResults = function(results) { // actual calculation functions
if (results.length == 0) {
return "";
}
var balance = 2000; / /actual format of text area
var list = pad_right("Date", 12, " ");
list += pad_right("Amount", 12, " ");
list += pad_right("Running Balance", 15, " ") + "\n";
list += pad_right("", 11, "-") + " ";
list += pad_right("", 11, "-") + " ";
list += pad_right("", 15, "-") + "\n";
for (var i = 0; i < results.length; i++) { // loop to calculate balances
var trans = results[i];
list += pad_right(trans["date"], 12, " ");
if(trans["type"] == "withdrawal") // withdrawal calculation
{
balance -= trans["amount"]
list += "$" + pad_left( "-" + trans["amount"].toFixed(2), 11, " ") + " ";
} else { //for Deposits
balance += trans["amount"]
list += "$" + pad_left( trans["amount"].toFixed(2), 11, " ") + " ";
}
list += "$" + pad_left(balance.toFixed(2), 14, " ") + "\n";
}
return list;
}
var get_runningBalance = function(results) { // function to calculate Running Balance
var runningBalance = 0, amount;
for (var i in results) {
runningBalance = startBal - "amount" ;
runningBalance += parseInt(runningBalance.toFixed(2));
}
return runningBalance;
}
var get_startBal = function(transactions){ // fills Starting Balance
return 2000;
}
var get_totalDep = function(transactions){ // function to calculate Total Deposits
var totalDep = 0;
for(var i = 0; i < transactions.length; i++){
var trans = transactions[i];
if(trans["type"] == "deposit")
{
totalDep += trans["amount"]
}
}
return totalDep;
}
var get_totalWd = function(transactions){ // function to calculate Total Withdrawals
var totalWd = 0;
for(var i = 0; i < transactions.length; i++){
var trans = transactions[i];
if(trans["type"] == "withdrawal")
{
totalWd -= trans["amount"]
}
}
return totalWd;
}
var get_endBal = function(transactions){ // function to calculate Ending Balance
var balance = 2000;
for(var i = 0; i < transactions.length; i++){
var trans = transactions[i];
if(trans["type"] == "withdrawal")
{
balance -= trans["amount"]
} else { // Is Deposit
balance += trans["amount"]
}
}
return balance.toFixed(2);
}
// sets up the global variables and arrays for the functions
var balances = [];
var transactions = [];
var $ = function (id) {
return document.getElementById(id);
}
// pulls the info from text boxes
var update_display = function() {
$("startBal").value = get_startBal(transactions);
$("totalDep").value = get_totalDep(transactions);
$("totalWd").value = get_totalWd(transactions);
$("endBal").value = get_endBal(transactions);
$("date").value = "";
$("amount").value = "";
$("date").focus();
$("results").value = getResults(transactions);
}
// function to add transactions to the text area
var addTrans_click = function () {
var trans = [];
trans["date"] = $("date").value;
trans["amount"] = parseFloat($("amount").value);
trans["type"] = $("type").value;
if (trans["date"] == "") return;
if (isNaN(trans["amount"])) return;
transactions.push(trans);
update_display();
}
// the event handlers
window.onload = function () {
$("addTrans").onclick = addTrans_click;
$("date").focus();
}
body {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
font-family: Arial,Helvetica,sans-serif;
}
#content {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 8px solid gray;
margin: 10px auto;
padding: 5px 20px;
text-align: center;
width: 600px;
}
h1, h2 {
text-align: left;
}
h2 {
margin-bottom: 0;
padding-bottom: 0;
}
label {
display: block;
float: left;
text-align: right;
width: 10em;
}
input {
display: block;
float: left;
}
select {
display: block;
float: left;
text-align: center;
width: 10em;
margin-bottom: 0.5em;
margin-left: 0.5em;
}
.formLayout label {
float: left;
text-align: right;
width: 10em;
}
.formLayout input {
margin-bottom: 0.5em;
margin-left: 0.5em;
}
.formLayout br {
clear: both;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Monthly Balance Calculator</title>
<link href="monthly_balance.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="mbc_library.js"></script>
<script type="text/javascript" src="monthly_balance.js"></script>
</head>
<body>
<div id="content">
<h1>Monthly Balance Calculator</h1>
<br />
<h2>Add Transaction</h2>
<hr />
<br />
<div class="formLayout">
<label for="date">Date:</label>
<input type="text" name="date" id="date" />
<br />
<label for="type">Type:</label>
<select name="type" id="type">
<option value="withdrawal">Withdrawal</option>
<option value="deposit">Deposit</option>
</select>
<br />
<label for="amount">Amount:</label>
<input type="text" name="amount" id="amount"/>
<br />
<label> </label>
<input type="button" id="addTrans" value="Add Transaction" />
<br />
</div>
<h2>Transactions</h2>
<hr />
<br />
<textarea name="results" id="results" rows="10" cols="60" disabled="disabled">
</textarea>
<br />
<br />
<h2>Summary</h2>
<hr />
<br />
<div class="formLayout">
<label for="startBal">Starting Balance:</label>
<input type="text" name="startBal" id="startBal"
class="disabled" disabled="disabled"/>
<br />
<label for="totalDep">Total Deposits:</label>
<input type="text" name="totalDep" id="totalDep"
class="disabled" disabled="disabled"/>
<br />
<label for="totalWd">Total Withdrawals:</label>
<input type="text" name="totalWd" id="totalWd"
class="disabled" disabled="disabled"/>
<br />
<label for="endBal">Ending Balance</label>
<input type="text" name="endBal" id="endBal"
class="disabled" disabled="disabled"/>
<br />
</div>
</body>
</html>
I'm sorry for asking a question that I'm sure is simple but I'm stuck. I have a project that requires the user to select 3 notes, the value for each should populate in the text box until the 3rd is entered. After that a compare is done to an array and a notification sent to the user letting them know if they have made a valid selection or not.
The problem I'm having is getting all 3 to populate, each time I click a button it overwrites the existing value. I've tried to push them to an array but it only contains the current value, I've tried a loop but that populates the selection 3x. I'm sure I'm overlooking something simple but have not been able to figure out what it is. Can someone point me in the right direction?
Thanks!
<!doctype html>
<html>
<head>
<title> Scope </title>
<meta charset="utf-8">
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
font-family: Helvetica, sans-serif;
}
div#container {
margin: auto;
width: 300px;
}
form {
margin-top: 20%;
}
form input[type="text"] {
font-size: 120%;
text-align: center;
}
form input[type="button"] {
background-color: lightblue;
font-size: 110%;
}
</style>
<script>
function addNote(event) {
var validChords = {
C: "CEG",
F: "FAC",
G: "GBD"
};
var note = event.target.value;
console.log(note);
var getNotes = [];
var noteDisplay = document.getElementById("notesDisplay");
var displayMessage = document.getElementById("message");
getNotes.push(note);
console.log(getNotes);
noteDisplay.value = getNotes;
noteDisplay.innterHTML = getNotes;
displayMessage.innterHTML = "Please Enter Antoher Note!";
//Code below is different things I've been playing with trying to
// figure this out.
// var success = false;
// if (notes.length > 0) {
// if (note) {
// for (var i =0; i < 3; i++) {
// if(notes[i] == note) {
// var found = true;
// getNotes.push(note);
// }
// }
// }
// }
// if (getNotes.length < 3) {
// }
}
window.onload = function() {
var notes = ["C", "D", "E", "F", "G", "A", "B"];
var cButton = document.getElementById("c");
cButton.onclick = addNote;
var dButton = document.getElementById("d");
dButton.onclick = addNote;
var eButton = document.getElementById("e");
eButton.onclick = addNote;
var fButton = document.getElementById("f");
fButton.onclick = addNote;
var gButton = document.getElementById("g");
gButton.onclick = addNote;
var aButton = document.getElementById("a");
aButton.onclick = addNote;
var bButton = document.getElementById("b");
bButton.onclick = addNote;
// your code here
}
</script>
</head>
<body>
<div id="container">
<form>
<p id="message">Enter a major triad chord:</p>
<p>
<input id="notesDisplay" type="text" size="21">
</p>
<p>
<input id="c" type="button" value="C">
<input id="d" type="button" value="D">
<input id="e" type="button" value="E">
<input id="f" type="button" value="F">
<input id="g" type="button" value="G">
<input id="a" type="button" value="A">
<input id="b" type="button" value="B">
</p>
</form>
</div>
</body>
</html>
I finally figured out how to get the entries and compare to the object containing specific values and return either a note or a message to try again. I'm almost there but am having an issue with my loops (I think). When a button is clicked a message is supposed to display saying "please enter another note" until the 3rd selection is made, when the first button is clicked I'm getting the "you have made an invalid selection message" and I don't understand why. The last piece I'm missing is the form is supposed to clear after either message is displayed. This is driving me nuts, can someone give me a hint as to what I still have wrong? Thanks!
Revised Code:
Scope
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
font-family: Helvetica, sans-serif;
}
div#container {
margin: auto;
width: 300px;
}
form {
margin-top: 20%;
}
form input[type="text"] {
font-size: 120%;
text-align: center;
}
form input[type="button"] {
background-color: lightblue;
font-size: 110%;
}
//Array to hold notes entered by user, counter to hold number of
//buttons clicked
var getNotes = [];
var counter = 0;
//addNote function, collects the notes entered by the user and displays
//them in the text box. When the number of notes entered equals 3 a
//compare is done to the validChords object. If the notes equal a valid
//chord a messages is displayed to the user telling them which chord was
//entered, if the chord is not correct a message is displayed telling
//them to try again. After either the form should be cleared.
function addNote(event) {
var validChords = {
C: "CEG",
F: "FAC",
G: "GBD"
};
var note = event.target.value;
var noteDisplay = document.getElementById("notesDisplay");
var displayMessage = document.getElementById("message");
if (counter <= 3) {
getNotes.push(note);
var removeComma = "";
for (i = getNotes.length-1; i >=0; i--) {
removeComma = getNotes[i]+removeComma;
}
noteDisplay.value = removeComma;
noteDisplay.innerHTML = removeComma;
displayMessage.innerHTML = "Please Enter Antoher Note!";
counter = counter+1;
}
if (counter == 3) {
for (var prop in validChords) {
if (removeComma === validChords[prop]) {
displayMessage.innerHTML = "You have entered a " + prop + "
Chord!";
notesDisplay.innterHTML = " ";
counter = 0;
}
}
} else {
displayMessage.innerHTML = "You have not entered a valid chord,
please try again!";
notesDisplay.innterHTML = " ";
counter = 0;
}
}
window.onload = function() {
var notes = ["C", "D", "E", "F", "G", "A", "B"];
var cButton = document.getElementById("c");
cButton.onclick = addNote;
var dButton = document.getElementById("d");
dButton.onclick = addNote;
var eButton = document.getElementById("e");
eButton.onclick = addNote;
var fButton = document.getElementById("f");
fButton.onclick = addNote;
var gButton = document.getElementById("g");
gButton.onclick = addNote;
var aButton = document.getElementById("a");
aButton.onclick = addNote;
var bButton = document.getElementById("b");
bButton.onclick = addNote;
}
</script>
</head>
<body>
<div id="container">
<form>
<p id="message">Enter a major triad chord:</p>
<p>
<input id="notesDisplay" type="text" size="21">
</p>
<p>
<input id="c" type="button" value="C">
<input id="d" type="button" value="D">
<input id="e" type="button" value="E">
<input id="f" type="button" value="F">
<input id="g" type="button" value="G">
<input id="a" type="button" value="A">
<input id="b" type="button" value="B">
</p>
</form>
</div>
</body>
</html>
I believe it's because you initialize getNote to an empty array every time you call the addNote function, check if that is the problem.
Thanks