I'm creating some calculators for a mobile game that I play. I'm going to have 6 of the same type of calculator on the same page. Each one should look and operate like so:
const speedupInputs = document.querySelectorAll('input');
const results = document.getElementById('results');
const submit = document.getElementById('submit');
submit.addEventListener('click', function() {
let total = 0;
results.textContent = '';
speedupInputs.forEach((input) => {
if(input.value != '') {
if(input.classList.contains('minutes')) {
total = input.value * input.name;
} else if (input.classList.contains('hours')) {
total = (input.value * input.name) * 60;
} else if (input.classList.contains('days')) {
total = (input.value * input.name) * 60 * 24;
}
}
})
results.textContent = toTime(total * 60);
});
function toTime(seconds) {
const secsPerDay = 86400;
const secsPerHour = 3600;
const secsPerMinute = 60;
var minus = (this < 0) ? '-' : '';
var days = Math.floor(seconds / secsPerDay);
seconds = (seconds % secsPerDay);
var hours = Math.floor(seconds / secsPerHour);
seconds = (seconds % secsPerHour);
var minutes = Math.floor(seconds / secsPerMinute);
seconds = (seconds % secsPerMinute);
var sDays = new String(days).padStart(1, '0');
var sHours = new String(hours).padStart(2, '0');
var sMinutes = new String(minutes).padStart(2, '0');
return `${minus}${sDays}d ${sHours}:${sMinutes}:00`;
}table, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 100px;
margin: 40px;
}
input {
width: 90%;
outline: 0;
border: none;
}
td {
text-align: center;
}<table>
<colgroup>
<col span="1" style="width: 50%;">
<col span="1" style="width: 50%;">
</colgroup>
<thead>
<th colspan="2">
Speed-Ups
</th>
</thead>
<tbody>
<tr>
<td>
1m
</td>
<td>
<input type="number" id="1m" name="1" min="0">
</td>
</tr>
<tr>
<td>
3m
</td>
<td>
<input type="number" id="3m" name="3" min="0">
</td>
</tr>
<tr>
<td>
5m
</td>
<td>
<input type="text" id="5m" name="5" min="0">
</td>
</tr>
<tr>
<td>
10m
</td>
<td>
<input type="number" id="10m" name="10" min="0">
</td>
</tr>
<tr>
<td>
15m
</td>
<td>
<input type="number" id="15m" name="15" min="0">
</td>
</tr>
<tr>
<td>
30m
</td>
<td>
<input type="number" id="30m" name="30" min="0">
</td>
</tr>
<tr>
<td>
45m
</td>
<td>
<input type="number" id="45m" name="45" min="0">
</td>
</tr>
<tr>
<td>
60m
</td>
<td>
<input type="number" id="60m" name="60" min="0">
</td>
</tr>
<tr>
<td>
3h
</td>
<td>
<input type="number" id="3h" name="3" min="0">
</td>
</tr>
<tr>
<td>
8h
</td>
<td>
<input type="number" id="8h" name="8" min="0">
</td>
</tr>
<tr>
<td>
15h
</td>
<td>
<input type="number" id="15h" name="15" min="0">
</td>
</tr>
<tr>
<td>
24h
</td>
<td>
<input type="number" id="24h" name="24" min="0">
</td>
</tr>
<tr>
<td>
3d
</td>
<td>
<input type="number" id="3d" name="3" min="0">
</td>
</tr>
<tr>
<td>
7d
</td>
<td>
<input type="number" id="7d" name="7" min="0">
</td>
</tr>
<tr>
<td>
30d
</td>
<td>
<input type="number" id="30d" name="30" min="0">
</td>
</tr>
<tr>
<td colspan="2">
<button id="submit" >Submit</button>
</td>
</tr>
<tr>
<td colspan="2">
<p id="results" ></p>
</td>
</tr>
</tbody>
</table>Because there are 6 and because I'm trying to follow the DRY way of coding, I'm trying to create the least amount of code to do the job of scripting all 6 calculators. I mean, they're all identical si this shouldn't be hard, right?
This is the code that I thought would work. I don't know what the problem is because it isn't throwing any errors in the console. In a nutshell, the code is pretty similar to the first, except I tried to reference all tables via a .forEach function. Also, I read that one way to reference children of an element is to give all of the children a class name and then use parentName.querySelectorAll('className') (hence me trying to use it with table as the "parentName").
const submitBtns = document.querySelectorAll('.subitbtn');
const tables = document.querySelectorAll('table');
const speedupInputs = document.querySelectorAll('.tableinput');
submitBtns.forEach((btn) => {
btn.addEventListener('click', myFunction);
});
function myFunction() {
tables.forEach((table) => {
const results = table.querySelector('.resultsarea');
let total = 0;
results.textContent = '';
speedupInputs.forEach((input) => {
if(input.value != '') {
if(input.classList.contains('minutes')) {
total = input.value * input.name;
} else if (input.classList.contains('hours')) {
total = (input.value * input.name) * 60;
} else if (input.classList.contains('days')) {
total = (input.value * input.name) * 60 * 24;
}
}
});
results.textContent = toTime(total * 60);
});
};
function toTime(seconds) {
const secsPerDay = 86400;
const secsPerHour = 3600;
const secsPerMinute = 60;
var minus = (this < 0) ? '-' : '';
var days = Math.floor(seconds / secsPerDay);
seconds = (seconds % secsPerDay);
var hours = Math.floor(seconds / secsPerHour);
seconds = (seconds % secsPerHour);
var minutes = Math.floor(seconds / secsPerMinute);
seconds = (seconds % secsPerMinute);
var sDays = new String(days).padStart(1, '0');
var sHours = new String(hours).padStart(2, '0');
var sMinutes = new String(minutes).padStart(2, '0');
return `${minus}${sDays}d ${sHours}:${sMinutes}:00`;
}
So yeah. To reiterate: I want 6 identical versions of these tables/calculators on a page, and I want one simple, easy code to script all 6 of them since they're identical. Thank you.
CodePudding user response：
With the code you've provided I had to solve multiple mistakes/erros. The first ones are small but as any mistake in programming they're still problematic.
Let's start with:
const submitBtns = document.querySelectorAll('.subitbtn'); and
const results = table.querySelector('.resultsarea');
Those have a typo. According to your html it should be:
const submitBtns = document.querySelectorAll('.submitbtn'); and
const results = table.querySelector('.resultarea');
Then there is the problem of some logic. The speedupInputs/tableinputs or declared at the wrong place. You only want the speedupInputs/tableinputs from the current table you're calculating in the loop. Not from all 6 tables everytime!
So instead of declaring it a global variable and selecting every thing in the document remove the global speedupInputs and place it in the tables forEach loop like:
const speedupInputs = table.querySelectorAll('.tableinput');
So this would work, but your table doesn't contain the class tableinput. Every inputfield in your first part of the table should have that class. Then it would work as you want I guess.
I've added a working snippet from your code below.
const submitBtns = document.querySelectorAll('.submitbtn');
const tables = document.querySelectorAll('table');
submitBtns.forEach((btn) => {
btn.addEventListener('click', myFunction);
});
let i = 0;
function myFunction() {
tables.forEach((table) => {
const results = table.querySelector('.resultarea');
const speedupInputs = table.querySelectorAll('.tableinput');
let total = 0;
results.textContent = '';
speedupInputs.forEach((input) => {
if(input.value != '') {
if(input.classList.contains('minutes')) {
total = input.value * input.name;
} else if (input.classList.contains('hours')) {
total = (input.value * input.name) * 60;
} else if (input.classList.contains('days')) {
total = (input.value * input.name) * 60 * 24;
}
}
});
results.textContent = toTime(total * 60);
});
};
function toTime(seconds) {
const secsPerDay = 86400;
const secsPerHour = 3600;
const secsPerMinute = 60;
var minus = (this < 0) ? '-' : '';
var days = Math.floor(seconds / secsPerDay);
seconds = (seconds % secsPerDay);
var hours = Math.floor(seconds / secsPerHour);
seconds = (seconds % secsPerHour);
var minutes = Math.floor(seconds / secsPerMinute);
seconds = (seconds % secsPerMinute);
var sDays = new String(days).padStart(1, '0');
var sHours = new String(hours).padStart(2, '0');
var sMinutes = new String(minutes).padStart(2, '0');
return `${minus}${sDays}d ${sHours}:${sMinutes}:00`;
}table, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 100px;
margin: 40px;
}
input {
width: 90%;
outline: 0;
border: none;
}
td {
text-align: center;
}<table>
<colgroup>
<col span="1" style="width: 50%;">
<col span="1" style="width: 50%;">
</colgroup>
<thead>
<th colspan="2">
Speed-Ups
</th>
</thead>
<tbody>
<tr>
<td>
1m
</td>
<td>
<input type="number" id="1m" name="1" min="0">
</td>
</tr>
<tr>
<td>
3m
</td>
<td>
<input type="number" id="3m" name="3" min="0">
</td>
</tr>
<tr>
<td>
5m
</td>
<td>
<input type="number" id="5m" name="5" min="0">
</td>
</tr>
<tr>
<td>
10m
</td>
<td>
<input type="number" id="10m" name="10" min="0">
</td>
</tr>
<tr>
<td>
15m
</td>
<td>
<input type="number" id="15m" name="15" min="0">
</td>
</tr>
<tr>
<td>
30m
</td>
<td>
<input type="number" id="30m" name="30" min="0">
</td>
</tr>
<tr>
<td>
45m
</td>
<td>
<input type="number" id="45m" name="45" min="0">
</td>
</tr>
<tr>
<td>
60m
</td>
<td>
<input type="number" id="60m" name="60" min="0">
</td>
</tr>
<tr>
<td>
3h
</td>
<td>
<input type="number" id="3h" name="3" min="0">
</td>
</tr>
<tr>
<td>
8h
</td>
<td>
<input type="number" id="8h" name="8" min="0">
</td>
</tr>
<tr>
<td>
15h
</td>
<td>
<input type="number" id="15h" name="15" min="0">
</td>
</tr>
<tr>
<td>
24h
</td>
<td>
<input type="number" id="24h" name="24" min="0">
</td>
</tr>
<tr>
<td>
3d
</td>
<td>
<input type="number" id="3d" name="3" min="0">
</td>
</tr>
<tr>
<td>
7d
</td>
<td>
<input type="number" id="7d" name="7" min="0">
</td>
</tr>
<tr>
<td>
30d
</td>
<td>
<input type="number" id="30d" name="30" min="0">
</td>
</tr>
<tr>
<td colspan="2">
<button id="submit" >Submit</button>
</td>
</tr>
<tr>
<td colspan="2">
<p id="results" ></p>
</td>
</tr>
</tbody>
</table>
<table>
<colgroup>
<col span="1" style="width: 50%;">
<col span="1" style="width: 50%;">
</colgroup>
<thead>
<th colspan="2">
Speed-Ups
</th>
</thead>
<tbody>
<tr>
<td>
1m
</td>
<td>
<input type="number" id="1m" name="1" min="0">
</td>
</tr>
<tr>
<td>
3m
</td>
<td>
<input type="number" id="3m" name="3" min="0">
</td>
</tr>
<tr>
<td>
5m
</td>
<td>
<input type="number" id="5m" name="5" min="0">
</td>
</tr>
<tr>
<td>
10m
</td>
<td>
<input type="number" id="10m" name="10" min="0">
</td>
</tr>
<tr>
<td>
15m
</td>
<td>
<input type="number" id="15m" name="15" min="0">
</td>
</tr>
<tr>
<td>
30m
</td>
<td>
<input type="number" id="30m" name="30" min="0">
</td>
</tr>
<tr>
<td>
45m
</td>
<td>
<input type="number" id="45m" name="45" min="0">
</td>
</tr>
<tr>
<td>
60m
</td>
<td>
<input type="number" id="60m" name="60" min="0">
</td>
</tr>
<tr>
<td>
3h
</td>
<td>
<input type="number" id="3h" name="3" min="0">
</td>
</tr>
<tr>
<td>
8h
</td>
<td>
<input type="number" id="8h" name="8" min="0">
</td>
</tr>
<tr>
<td>
15h
</td>
<td>
<input type="number" id="15h" name="15" min="0">
</td>
</tr>
<tr>
<td>
24h
</td>
<td>
<input type="number" id="24h" name="24" min="0">
</td>
</tr>
<tr>
<td>
3d
</td>
<td>
<input type="number" id="3d" name="3" min="0">
</td>
</tr>
<tr>
<td>
7d
</td>
<td>
<input type="number" id="7d" name="7" min="0">
</td>
</tr>
<tr>
<td>
30d
</td>
<td>
<input type="number" id="30d" name="30" min="0">
</td>
</tr>
<tr>
<td colspan="2">
<button id="submit" >Submit</button>
</td>
</tr>
<tr>
<td colspan="2">
<p id="results" ></p>
</td>
</tr>
</tbody>
</table>
<table>
<colgroup>
<col span="1" style="width: 50%;">
<col span="1" style="width: 50%;">
</colgroup>
<thead>
<th colspan="2">
Speed-Ups
</th>
</thead>
<tbody>
<tr>
<td>
1m
</td>
<td>
<input type="number" id="1m" name="1" min="0">
</td>
</tr>
<tr>
<td>
3m
</td>
<td>
<input type="number" id="3m" name="3" min="0">
</td>
</tr>
<tr>
<td>
5m
</td>
<td>
<input type="number" id="5m" name="5" min="0">
</td>
</tr>
<tr>
<td>
10m
</td>
<td>
<input type="number" id="10m" name="10" min="0">
</td>
</tr>
<tr>
<td>
15m
</td>
<td>
<input type="number" id="15m" name="15" min="0">
</td>
</tr>
<tr>
<td>
30m
</td>
<td>
<input type="number" id="30m" name="30" min="0">
</td>
</tr>
<tr>
<td>
45m
</td>
<td>
<input type="number" id="45m" name="45" min="0">
</td>
</tr>
<tr>
<td>
60m
</td>
<td>
<input type="number" id="60m" name="60" min="0">
</td>
</tr>
<tr>
<td>
3h
</td>
<td>
<input type="number" id="3h" name="3" min="0">
</td>
</tr>
<tr>
<td>
8h
</td>
<td>
<input type="number" id="8h" name="8" min="0">
</td>
</tr>
<tr>
<td>
15h
</td>
<td>
<input type="number" id="15h" name="15" min="0">
</td>
</tr>
<tr>
<td>
24h
</td>
<td>
<input type="number" id="24h" name="24" min="0">
</td>
</tr>
<tr>
<td>
3d
</td>
<td>
<input type="number" id="3d" name="3" min="0">
</td>
</tr>
<tr>
<td>
7d
</td>
<td>
<input type="number" id="7d" name="7" min="0">
</td>
</tr>
<tr>
<td>
30d
</td>
<td>
<input type="number" id="30d" name="30" min="0">
</td>
</tr>
<tr>
<td colspan="2">
<button id="submit" >Submit</button>
</td>
</tr>
<tr>
<td colspan="2">
<p id="results" ></p>
</td>
</tr>
</tbody>
</table>
<table>
<colgroup>
<col span="1" style="width: 50%;">
<col span="1" style="width: 50%;">
</colgroup>
<thead>
<th colspan="2">
Speed-Ups
</th>
</thead>
<tbody>
<tr>
<td>
1m
</td>
<td>
<input type="number" id="1m" name="1" min="0">
</td>
</tr>
<tr>
<td>
3m
</td>
<td>
<input type="number" id="3m" name="3" min="0">
</td>
</tr>
<tr>
<td>
5m
</td>
<td>
<input type="number" id="5m" name="5" min="0">
</td>
</tr>
<tr>
<td>
10m
</td>
<td>
<input type="number" id="10m" name="10" min="0">
</td>
</tr>
<tr>
<td>
15m
</td>
<td>
<input type="number" id="15m" name="15" min="0">
</td>
</tr>
<tr>
<td>
30m
</td>
<td>
<input type="number" id="30m" name="30" min="0">
</td>
</tr>
<tr>
<td>
45m
</td>
<td>
<input type="number" id="45m" name="45" min="0">
</td>
</tr>
<tr>
<td>
60m
</td>
<td>
<input type="number" id="60m" name="60" min="0">
</td>
</tr>
<tr>
<td>
3h
</td>
<td>
<input type="number" id="3h" name="3" min="0">
</td>
</tr>
<tr>
<td>
8h
</td>
<td>
<input type="number" id="8h" name="8" min="0">
</td>
</tr>
<tr>
<td>
15h
</td>
<td>
<input type="number" id="15h" name="15" min="0">
</td>
</tr>
<tr>
<td>
24h
</td>
<td>
<input type="number" id="24h" name="24" min="0">
</td>
</tr>
<tr>
<td>
3d
</td>
<td>
<input type="number" id="3d" name="3" min="0">
</td>
</tr>
<tr>
<td>
7d
</td>
<td>
<input type="number" id="7d" name="7" min="0">
</td>
</tr>
<tr>
<td>
30d
</td>
<td>
<input type="number" id="30d" name="30" min="0">
</td>
</tr>
<tr>
<td colspan="2">
<button id="submit" >Submit</button>
</td>
</tr>
<tr>
<td colspan="2">
<p id="results" ></p>
</td>
</tr>
</tbody>
</table>
<table>
<colgroup>
<col span="1" style="width: 50%;">
<col span="1" style="width: 50%;">
</colgroup>
<thead>
<th colspan="2">
Speed-Ups
</th>
</thead>
<tbody>
<tr>
<td>
1m
</td>
<td>
<input type="number" id="1m" name="1" min="0">
</td>
</tr>
<tr>
<td>
3m
</td>
<td>
<input type="number" id="3m" name="3" min="0">
</td>
</tr>
<tr>
<td>
5m
</td>
<td>
<input type="number" id="5m" name="5" min="0">
</td>
</tr>
<tr>
<td>
10m
</td>
<td>
<input type="number" id="10m" name="10" min="0">
</td>
</tr>
<tr>
<td>
15m
</td>
<td>
<input type="number" id="15m" name="15" min="0">
</td>
</tr>
<tr>
<td>
30m
</td>
<td>
<input type="number" id="30m" name="30" min="0">
</td>
</tr>
<tr>
<td>
45m
</td>
<td>
<input type="number" id="45m" name="45" min="0">
</td>
</tr>
<tr>
<td>
60m
</td>
<td>
<input type="number" id="60m" name="60" min="0">
</td>
</tr>
<tr>
<td>
3h
</td>
<td>
<input type="number" id="3h" name="3" min="0">
</td>
</tr>
<tr>
<td>
8h
</td>
<td>
<input type="number" id="8h" name="8" min="0">
</td>
</tr>
<tr>
<td>
15h
</td>
<td>
<input type="number" id="15h" name="15" min="0">
</td>
</tr>
<tr>
<td>
24h
</td>
<td>
<input type="number" id="24h" name="24" min="0">
</td>
</tr>
<tr>
<td>
3d
</td>
<td>
<input type="number" id="3d" name="3" min="0">
</td>
</tr>
<tr>
<td>
7d
</td>
<td>
<input type="number" id="7d" name="7" min="0">
</td>
</tr>
<tr>
<td>
30d
</td>
<td>
<input type="number" id="30d" name="30" min="0">
</td>
</tr>
<tr>
<td colspan="2">
<button id="submit" >Submit</button>
</td>
</tr>
<tr>
<td colspan="2">
<p id="results" ></p>
</td>
</tr>
</tbody>
</table>
<table>
<colgroup>
<col span="1" style="width: 50%;">
<col span="1" style="width: 50%;">
</colgroup>
<thead>
<th colspan="2">
Speed-Ups
</th>
</thead>
<tbody>
<tr>
<td>
1m
</td>
<td>
<input type="number" id="1m" name="1" min="0">
</td>
</tr>
<tr>
<td>
3m
</td>
<td>
<input type="number" id="3m" name="3" min="0">
</td>
</tr>
<tr>
<td>
5m
</td>
<td>
<input type="number" id="5m" name="5" min="0">
</td>
</tr>
<tr>
<td>
10m
</td>
<td>
<input type="number" id="10m" name="10" min="0">
</td>
</tr>
<tr>
<td>
15m
</td>
<td>
<input type="number" id="15m" name="15" min="0">
</td>
</tr>
<tr>
<td>
30m
</td>
<td>
<input type="number" id="30m" name="30" min="0">
</td>
</tr>
<tr>
<td>
45m
</td>
<td>
<input type="number" id="45m" name="45" min="0">
</td>
</tr>
<tr>
<td>
60m
</td>
<td>
<input type="number" id="60m" name="60" min="0">
</td>
</tr>
<tr>
<td>
3h
</td>
<td>
<input type="number" id="3h" name="3" min="0">
</td>
</tr>
<tr>
<td>
8h
</td>
<td>
<input type="number" id="8h" name="8" min="0">
</td>
</tr>
<tr>
<td>
15h
</td>
<td>
<input type="number" id="15h" name="15" min="0">
</td>
</tr>
<tr>
<td>
24h
</td>
<td>
<input type="number" id="24h" name="24" min="0">
</td>
</tr>
<tr>
<td>
3d
</td>
<td>
<input type="number" id="3d" name="3" min="0">
</td>
</tr>
<tr>
<td>
7d
</td>
<td>
<input type="number" id="7d" name="7" min="0">
</td>
</tr>
<tr>
<td>
30d
</td>
<td>
<input type="number" id="30d" name="30" min="0">
</td>
</tr>
<tr>
<td colspan="2">
<button id="submit" >Submit</button>
</td>
</tr>
<tr>
<td colspan="2">
<p id="results" ></p>
</td>
</tr>
</tbody>
</table>`
CodePudding user response：
The first principle in DRY is to use metadata (here units and tabMeta).
then it is to use them to generate the HTML for all 6 tables.
otherwise for the rest of DRY questions, JavaScript allows event delegation (use here to detect the slightest change in value (your submit button is useless).
There are also a whole host of array methods that you should study in detail.
sample code:
const
twoDgts = t => (t<10) ? `0${t}` : t.toString(10)
, tablesBox = document.querySelector('#tables-box')
, units =
{ minutes : { lib: 'm', val: 1 }
, hours : { lib: 'h', val: 60 }
, days : { lib: 'd', val:60 * 24 }
}
, tabMeta =
[ { base: 1, unit: units.minutes }, { base: 3, unit: units.minutes }
, { base: 5, unit: units.minutes }, { base: 10, unit: units.minutes }
, { base: 15, unit: units.minutes }, { base: 30, unit: units.minutes }
, { base: 45, unit: units.minutes }, { base: 60, unit: units.minutes }
, { base: 3, unit: units.hours }, { base: 8, unit: units.hours }
, { base: 15, unit: units.hours }, { base: 24, unit: units.hours }
, { base: 3, unit: units.days }, { base: 7, unit: units.days }
, { base: 30, unit: units.days }
];
tabMeta.forEach(({base, unit},i,arr)=>arr[i].value=base * unit.val) // add values
const tables = Array.from({length:6},()=>// IHM generator... ( 6 tables )
{
let tableN = tablesBox.appendChild( document.createElement('table'))
tabMeta.forEach(({base,unit},indx)=>
{
let newRow = tableN.insertRow()
newRow.insertCell().textContent = `${base} ${unit.lib}`
newRow.insertCell().innerHTML = `<input type="number" min="0" value="0" data-indx="${indx}">`
})
tableN.insertRow().innerHTML = '<td colspan="2"> <br> </td>'
tableN.createTHead().insertRow().innerHTML = '<th colspan="2">Spead-Up</th>'
return tableN
})
tablesBox.oninput = e =>
{
if (!e.target.matches('input')) return
MakeSum( e.target.closest('table'))
}
function MakeSum( refTable )
{
let sum =
[...refTable.querySelectorAll('td input[type=number]')]
.reduce((sum,inputX)=> sum (inputX.valueAsNumber * tabMeta[inputX.dataset.indx].value), 0)
let mins = sum % 60; sum = (sum - mins) / 60
let hrs = sum % 24; sum = (sum - hrs) / 24
refTable.querySelector('tr:last-of-type td').innerHTML =
`${sum}${units.days.lib}<br>${twoDgts(hrs)}:${twoDgts(mins)}:00`
}table {
display : inline-block;
font : 14px Arial, Helvetica, sans-serif;
white-space : nowrap;
border-collapse : separate;
border-spacing : 1px;
background-color : darkblue;
margin : 1em .4em;
}
td, th {
padding : .3em .6em;
background-color : whitesmoke;
min-width : 2em;
}
td {
text-align : right;
}
tr:last-of-type td {
background-color : #a2e0da;
text-align : center;
}
input[type=number] {
border : none;
text-align : center;
width : 5em;
}<div id="tables-box"></div>