Develop Reference

Generated row of table event listener not working instantly

I have a table like this :
I have added an event listener assetTableEvent() to each text box in the table. My issue is when I add new row to the table, i also add the corresponding event listener to it assetTableEvent(), but the total value does not pop while entering value, it shows only when next row has values entered.
function assetTableEvent() {
let total = 0;
for (var k = 0; k < document.getElementById("assetTable").rows.length; k++) {
var a = document.getElementById("v" + k);
var o = document.getElementById("o" + k);
var t = document.getElementById("t" + k);
if (a == null || o == null) {
continue;
}
if (a.value.length > 0 && o.value.length > 0) {
t.value = Number.parseInt(a.value - o.value);
total = (Number.parseInt(t.value) + Number.parseInt(total));
document.getElementById("totalAssets").value = Number.parseInt(total);
}
}
}
I even tried calling assetTableEvent() every time there is a change, but it just does not work. Can somebody help me in Javascript how to make dynamically added rows correspond to event listener like above rows.
HTML for Asset table:
<div id="calcContainer">
<div id = "headingText" >
Child Maintenance Calculator
</div>
<div id="startPage">
<button id="startBtn">Start</button>
</div>
<div id="asset">
<table id="assetTable">
<tr>
<th>Asset</th>
<th>Value</th>
<th>Own</th>
<th>Total</th>
</tr>
</table>
<div id="totalAssetsDiv">
<Label for ="totalAssets">Total Assets</Label>
<input type="number" id = "totalAssets" readonly="true">
<br>
</div>
<div id ="rowOps">
<br> <button id="addRow" class = "addDel">Add Row</button>
<button id="removeRow" class = "addDel1">Delete Row</button><br>
</div>
</div>
And add row event listener :
document.getElementById("addRow").addEventListener("click", function () {
var table = document.getElementById("assetTable");
var row = table.insertRow();
for (let j = 0; j < 4; j++) {
var tb = document.createElement("INPUT");
var value = "", idNum = "";
if (j == 0) {
tb.setAttribute("type", "text");
tb.value = value;
}
else {
tb.setAttribute("type", "number");
}
//Setting textbox id
switch (j) {
case 0:
idNum = "a";
break;
case 1:
idNum = "v";
break;
case 2:
idNum = "o";
break;
case 3:
idNum = "t";
break;
}
tb.id = idNum + (table.rows.length);
if (tb.id.includes('t')) {
tb.setAttribute("readOnly", "true");
}
tb.classList.add("assetTBox");
let cell = row.insertCell(j);
tb.addEventListener("input", assetTableEvent, false);
cell.appendChild(tb);
}
});

Trying to use incremental IDs is more work than it is worth, especially when you start removing rows.
I suggest you use classes instead and delegate the event listener to the table itself. When an input event occurs you get the closest row and query for the elements within that row for the row total, then query all of the rows totals for the master total
Basic example with functional add row
const table = document.querySelector('#myTable'),
cloneRow = table.rows[0].cloneNode(true);
table.addEventListener('input',(e) => {
if (e.target.matches('.qty, .price')) {
const row = e.target.closest('tr'),
price = row.querySelector('.price').valueAsNumber || 0,
qty = row.querySelector('.qty').valueAsNumber || 0;
row.querySelector('.amt').value = qty * price;
setTotalAmt()
}
});
document.querySelector('#add-row').addEventListener('click', (e) => {
table.appendChild(cloneRow.cloneNode(true))
});
function setTotalAmt() {
const sum = [...table.querySelectorAll('.amt')].reduce((a, el) => a + (+el.value || 0), 0)
document.querySelector('#total').value = sum;
}
<button id="add-row">
Add Row
</button>
Total:<input id="total" />
<table id="myTable">
<tr>
<td>Qty:
<input type="number" class="qty" value="0" />
</td>
<td>Price:
<input type="number" class="price" value="0" />
</td>
<td>Amt:
<input class="amt" readonly value="0" />
</td>
</tr>
</table>

#charlietfl 's solition is more elegant but if you wonder what is the problem in your code, you should change the < to <= in k < document.getElementById("assetTable").rows.length; part
function assetTableEvent() {
let total = 0;
for (var k = 0; k <= document.getElementById("assetTable").rows.length; k++) {
var a = document.getElementById("v" + k);
var o = document.getElementById("o" + k);
var t = document.getElementById("t" + k);
if (a == null || o == null) {
continue;
}
if (a.value.length > 0 && o.value.length > 0) {
t.value = Number.parseInt(a.value - o.value);
total = (Number.parseInt(t.value) + Number.parseInt(total));
document.getElementById("totalAssets").value = Number.parseInt(total);
}
}
}
Here is the working example:
document.getElementById("addRow").addEventListener("click", function () {
var table = document.getElementById("assetTable");
var row = table.insertRow();
for (let j = 0; j < 4; j++) {
var tb = document.createElement("INPUT");
var value = "", idNum = "";
if (j == 0) {
tb.setAttribute("type", "text");
tb.value = value;
}
else {
tb.setAttribute("type", "number");
}
//Setting textbox id
switch (j) {
case 0:
idNum = "a";
break;
case 1:
idNum = "v";
break;
case 2:
idNum = "o";
break;
case 3:
idNum = "t";
break;
}
tb.id = idNum + (table.rows.length);
if (tb.id.includes('t')) {
tb.setAttribute("readOnly", "true");
}
tb.classList.add("assetTBox");
let cell = row.insertCell(j);
tb.addEventListener("input", assetTableEvent, false);
cell.appendChild(tb);
}
});
function assetTableEvent() {
let total = 0;
for (var k = 0; k <= document.getElementById("assetTable").rows.length; k++) {
var a = document.getElementById("v" + k);
var o = document.getElementById("o" + k);
var t = document.getElementById("t" + k);
if (a == null || o == null) {
continue;
}
if (a.value.length > 0 && o.value.length > 0) {
t.value = Number.parseInt(a.value - o.value);
total = (Number.parseInt(t.value) + Number.parseInt(total));
document.getElementById("totalAssets").value = Number.parseInt(total);
}
}
}
<div id="calcContainer">
<div id = "headingText" >
Child Maintenance Calculator
</div>
<div id="startPage">
<button id="startBtn">Start</button>
</div>
<div id="asset">
<table id="assetTable">
<tr>
<th>Asset</th>
<th>Value</th>
<th>Own</th>
<th>Total</th>
</tr>
</table>
<div id="totalAssetsDiv">
<Label for ="totalAssets">Total Assets</Label>
<input type="number" id = "totalAssets" readonly="true">
<br>
</div>
<div id ="rowOps">
<br> <button id="addRow" class = "addDel">Add Row</button>
<button id="removeRow" class = "addDel1">Delete Row</button><br>
</div>
</div>

JavaScript not further executed once a button is disabled

I am using next and prev buttons so one question will be shown at a time, however, once next or prev buttons are disabled, the other button doesn't work anymore either. Here's my code:
var showing = [1, 0, 0, 0];
var questions = ['q0', 'q1', 'q2', 'q3'];
function next() {
var qElems = [];
for (var i = 0; i < questions.length; i++) {
qElems.push(document.getElementById(questions[i]));
}
for (var i = 0; i <= showing.length; i++) {
if (showing[i] == 1) {
showing[i] = 0;
if (i == showing.length - 1) {
document.getElementById("next").disabled = true;
} else {
console.log(i);
qElems[i + 1].style.display = 'block';
qElems[i].style.display = 'none';
showing[i + 1] = 1;
}
break;
}
}
}
function prev() {
var qElems = [];
for (var i = 0; i < questions.length; i++) {
qElems.push(document.getElementById(questions[i]));
}
for (var i = 0; i <= showing.length; i++) {
if (showing[i] == 1) {
showing[i] = 0;
if (i == showing.length - 4) {
document.getElementById("prev").disabled = true;
} else {
qElems[i - 1].style.display = 'block';
qElems[i].style.display = 'none';
showing[i - 1] = 1;
}
break;
}
}
}

I think you want this simplified script
I had to guess the HTML, but there is only one function.
window.addEventListener("load", function() {
let showing = 0;
const questions = document.querySelectorAll(".q");
questions[showing].style.display = "block";
const next = document.getElementById("next");
const prev = document.getElementById("prev");
document.getElementById("nav").addEventListener("click", function(e) {
var but = e.target, dir;
if (but.id === "prev") dir = -1;
else if (but.id === "next") dir = 1;
else return; // not a button
questions[showing].style.display = "none"; // hide current
showing += dir; // up or down
next.disabled = showing === questions.length-1;
if (showing <= 0) showing = 0;
prev.disabled = showing === 0
questions[showing].style.display = "block";
})
})
.q { display:none }
<div class="q" id="q0">Question 0</div>
<hr/>
<div class="q" id="q1">Question 1</div>
<hr/>
<div class="q" id="q2">Question 2</div>
<hr/>
<div class="q" id="q3">Question 3</div>
<hr/>
<div id="nav">
<button type="button" id="prev" disabled>Prev</button>
<button type="button" id="next">Next</button>
</div>

Since this is a quiet interesting java script task, Im doing my own solution.
Hope this matches the requirement.
I have created 4 divs of which first one is only displayed at first. Remaining divs are placed hidden. On clicking next, the divs are displayed according to index. Once the last and first indexes are interpreted, the respective next and previous buttons are enabled and disabled.
var showing = [1, 0, 0, 0];
var questions = ['q0', 'q1', 'q2', 'q3'];
var qElems = [];
function initialize() {
for (var i = 0; i < questions.length; i++) {
qElems.push(document.getElementById(questions[i]));
}
}
function updatevisibilitystatus(showindex, hideindex) {
qElems[showindex].style.display = 'block';
qElems[hideindex].style.display = 'none';
showing[showindex] = 1;
}
function next() {
for (var i = 0; i <= showing.length; i++) {
if (showing[i] == 1) {
showing[i] = 0;
if (i == showing.length - 2) {
document.getElementById("next").disabled = true;
}
updatevisibilitystatus(i + 1, i);
document.getElementById("prev").disabled = false;
break;
}
}
}
function prev() {
for (var i = 0; i <= showing.length; i++) {
if (showing[i] == 1) {
showing[i] = 0;
if (i == 1) {
document.getElementById("prev").disabled = true;
}
updatevisibilitystatus(i - 1, i);
document.getElementById("next").disabled = false;
break;
}
}
}
<body onload="initialize()">
<div id="q0" style="display: block;">Q0</div>
<div id="q1" style="display: none;">Q1</div>
<div id="q2" style="display: none;">Q2</div>
<div id="q3" style="display: none;">Q3</div>
<button id="prev" disabled onclick="prev()">Prev</button>
<button id="next" onclick="next()">Next</button>
</body>

clear input box with vanilla JavaScript?

He Guys, I tried couple of times to reset my input field with Vanilla javaScript with no success...I tried the reset() method but, perhaps I didn't add the code right...Here is my code.
<div class="container">
<h1>Enter a Number<br />
from 1 to 100.
</h1>
<input type="input" id="inputBox">
<input type="button" id="button" value="submit" onclick="myFunction()">
<span id="box1"></span>
</div>
and js
function myFunction() {
var i = document.getElementById("inputBox").value;
//for (var i = 1; i < 100; i++) {
if (i % 3 === 0 && i % 5 === 0) {
document.getElementById("box1").innerHTML = "fizzbuzz";
} else if (i % 3 === 0) {
document.getElementById("box1").innerHTML = "fizz";
} else if (i % 5 === 0) {
document.getElementById("box1").innerHTML = "buzz";
} else {
document.getElementById("box1").innerHTML = i;
}
}
I also have a pen here:
http://codepen.io/lucky500/pen/GJjVEO
Thanks!

just set the value of the input document.getElementById("inputBox").value = ""
function myFunction() {
var input = document.getElementById("inputBox");
var i = input.value;
//for (var i = 1; i < 100; i++) {
if (i % 3 === 0 && i % 5 === 0) {
document.getElementById("box1").innerHTML = "fizzbuzz";
} else if (i % 3 === 0) {
document.getElementById("box1").innerHTML = "fizz";
} else if (i % 5 === 0) {
document.getElementById("box1").innerHTML = "buzz";
} else {
document.getElementById("box1").innerHTML = i;
}
// clear input
input.value = "";
}
<div class="container">
<h1>Enter a Number<br />
from 1 to 100.
</h1>
<input type="input" id="inputBox">
<input type="button" id="button" value="submit" onclick="myFunction()">
<span id="box1"></span>
</div>

how to get checked value from two url simultaneousl

I have two buttons one for Groups and second is for Skills. when i click on groups button one popup will show and in the popup the groups are showing with checkbox. wheni select the groups and click on save button the checked groups will show on the uper of group button and popup will close.and this same is for skills button also.
My problem is that when i select groups it will show on groups button but when i select skill i lost the selected groups.
right now i am doing this:
function OnClickButton () {
var display = "";
checkboxes = document.getElementsByName("group");
for( var i=0; i<checkboxes.length; i++){
if( checkboxes[i].checked ){
display += " " + checkboxes[i].value;
}
}
window.location.href='job_posting.html?data='+display;
}
<button type="button" onclick="OnClickButton()" >Save</button>
this is for Groups.
function OnClickButton1 () {
var display1 = "";
checkboxes = document.getElementsByName("skill");
for( var i=0; i<checkboxes.length; i++){
if( checkboxes[i].checked ){
display1 += " " + checkboxes[i].value;
}
}
window.location.href='job_posting.html?data='+display1;
}
<button type="button" onclick="OnClickButton1()" >Save</button>
And this is for skills.
I get the groups and skills in the url .Not for get the url i try this
function getUrlParameters(parameter, staticURL, decode){
var currLocation = (staticURL.length)? staticURL : window.location.search,
parArr = currLocation.split("?")[1].split("&"),
returnBool = true;
for(var i = 0; i < parArr.length; i++){
parr = parArr[i].split("=");
if(parr[0] == parameter){
return (decode) ? decodeURIComponent(parr[1]) : parr[1];
returnBool = true;
}else{
returnBool = "";
}
}
if(!returnBool) return false;
}
function get_data()
{
var idParameter = getUrlParameters("data","",true);
var idParameter1 = getUrlParameters("data1","",true);
document.getElementById('display').innerHTML=idParameter;
document.getElementById('display1').innerHTML=idParameter1;
}
Call this on
<body onLoad="get_data();">
Thank You in advance

Victor is right, that is the way I would do it too in raw JS, only with one difference:
<button type="button" onclick="OnNameSaveClicked()" >Save</button>
<button type="button" onclick="OnSkillSaveClicked()" >Save</button>
As you can see it does the same thing so you can do:
<button type="button" onclick="handleRedirect()" >Save</button>
And you would have the same effect with a fewer lines of code.

What you want to do is something similar to the following
function handleRedirect() {
var url = 'job_posting.html?data=';
var checkboxes = document.getElementsByName('name');
for(var i = 0; i < checkboxes.length; i++) {
if(checkboxes[i].checked){
url += checkboxes[i].value + " ";
}
}
url += '&data1=';
checkboxes = document.getElementsByName('skill');
for(var i = 0; i < checkboxes.length; i++) {
if(checkboxes[i].checked){
url += checkboxes[i].value + " ";
}
}
window.location.href = url;
}
<button type="button" onclick="handleRedirect()" >Save</button>
<button type="button" onclick="handleRedirect()" >Save</button>
Hope this helps!

javascript disable button conditionally

How come I get the alert's but the button doesn't enable after a negative is changed to a positive after updating the grand total from a select.
Here is the section that is not working:
if ($('.grand_total').val() < 0) {
$('#submit').prop('disabled', true);
alert('negative number found');
} else if ($('.grand_total').val() > 0) {
$('#submit').prop('disabled', false);
alert('positive number found');
}
and here is the complete code:
<script language="javascript">
$(".add_to_total").on('change', function() {
var total = 0;
var grand_total = 0;
$(".dynamic_row").each(function() {
var row = $(this);
var start_hour_am = parseFloat(row.find(".start_hour_am").val()) || 0;
var start_minute_am = parseFloat(row.find(".start_minute_am").val()) || 0;
var end_hour_am = parseFloat(row.find(".end_hour_am").val()) || 0;
var end_minute_am = parseFloat(row.find(".end_minute_am").val()) || 0;
var start_hour_pm = parseFloat(row.find(".start_hour_pm").val()) || 0;
var start_minute_pm = parseFloat(row.find(".start_minute_pm").val()) || 0;
var end_hour_pm = parseFloat(row.find(".end_hour_pm").val()) || 0;
var end_minute_pm = parseFloat(row.find(".end_minute_pm").val()) || 0;
total = ( (Number(end_hour_am) + (Number(end_minute_am))) - (Number(start_hour_am) + Number(start_minute_am)) + (Number(end_hour_pm) + Number(end_minute_pm)) - (Number(start_hour_pm) + Number(start_minute_pm)));
row.find(".total").val(total);
grand_total = Number(grand_total) + Number(total);
});
$("#grand_total").val(grand_total);
if ($('.grand_total').val() < 0) {
$('#submit').prop('disabled', true);
alert('negative number found');
} else if ($('.grand_total').val() > 0) {
$('#submit').prop('disabled', false);
alert('positive number found');
}
});
</script>
Any ideas would be appreciated.
UPDATE
Here is the html for the Grand total:
<input type="text" class="grand_total" name="grand_total" id="grand_total" data-role="none" value="0" size="3" readonly="true">
and here is the button which i'm trying to disable:
<button type="submit" data-theme="e" data-mini="true" data-inline="true" name="submit" id="submit" class="submit" data-icon="check" value="submit-value">Submit</button>
With Nick N's suggestion, still get the same problem with the button disable/enable.
<script language="javascript">
$(".add_to_total").on('change', function() {
var total = 0;
var grand_total = 0;
$(".dynamic_row").each(function() {
var row = $(this);
var start_hour_am = parseFloat(row.find(".start_hour_am").val()) || 0;
var start_minute_am = parseFloat(row.find(".start_minute_am").val()) || 0;
var end_hour_am = parseFloat(row.find(".end_hour_am").val()) || 0;
var end_minute_am = parseFloat(row.find(".end_minute_am").val()) || 0;
var start_hour_pm = parseFloat(row.find(".start_hour_pm").val()) || 0;
var start_minute_pm = parseFloat(row.find(".start_minute_pm").val()) || 0;
var end_hour_pm = parseFloat(row.find(".end_hour_pm").val()) || 0;
var end_minute_pm = parseFloat(row.find(".end_minute_pm").val()) || 0;
total = ( (Number(end_hour_am) + (Number(end_minute_am))) - (Number(start_hour_am) + Number(start_minute_am)) + (Number(end_hour_pm) + Number(end_minute_pm)) - (Number(start_hour_pm) + Number(start_minute_pm)));
row.find(".total").val(total);
grand_total = Number(grand_total) + Number(total);
});
$("#grand_total").val(grand_total);
//if (parseFloat($('.grand_total').val()) < 0) {
// $('#submit').prop('disabled', true);
// alert('negative number found');
//} else if (parseFloat($('.grand_total').val()) > 0) {
// $('#submit').prop('disabled', false);
// alert('positive number found');
//}
var total = parseFloat($('#grand_total').val());
if(total < 0){
$('#submit').prop('disabled', true);
alert('negative number found...');
}
else {
$('#submit').prop('disabled', false);
alert('positive number found...');
}
});
</script>
UPDATE
Ok looks like the issue is because the button is a jquery mobile generated button its not updating the state of the button when a negative value is found, If i refresh the whole form the button state then chnages. I tested this by setting the data-role to none so the submit button becomes a standard form button and the disable/enable functionality works.
Any ideas how i can get around this?

This should work:
var total = parseFloat($('.grand_total').val());
if(total < 0){
$('#submit').attr("disabled", "disabled");
alert('negative number found');
}
else {
$('#submit').removeAttr("disabled");
alert('positive number found');
}
Jquery Mobile: Don't refresh the whole form, but refresh just the button:
$('#submit').button('refresh');
Please note: that I changed '#' to '.'. Dependent on your HTML you could also change this line:
$(".grand_total").val(grand_total);
to:
$("#grand_total").val(grand_total);

you are passing $('.grand_total').val()
instead of $('#grand_total').val()

try this:
var total = parseInt($('.grand_total').val());
if(total < 0){}
else {}