我正在为我玩的手机游戏创建一些计算器。我将在同一页上有6个相同类型的计算器。每一个看起来和操作都应该是这样的：
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" class="minutes" id="1m" name="1" min="0">
</td>
</tr>
<tr>
<td>
3m
</td>
<td>
<input type="number" class="minutes" id="3m" name="3" min="0">
</td>
</tr>
<tr>
<td>
5m
</td>
<td>
<input type="text" class="minutes" id="5m" name="5" min="0">
</td>
</tr>
<tr>
<td>
10m
</td>
<td>
<input type="number" class="minutes" id="10m" name="10" min="0">
</td>
</tr>
<tr>
<td>
15m
</td>
<td>
<input type="number" class="minutes" id="15m" name="15" min="0">
</td>
</tr>
<tr>
<td>
30m
</td>
<td>
<input type="number" class="minutes" id="30m" name="30" min="0">
</td>
</tr>
<tr>
<td>
45m
</td>
<td>
<input type="number" class="minutes" id="45m" name="45" min="0">
</td>
</tr>
<tr>
<td>
60m
</td>
<td>
<input type="number" class="minutes" id="60m" name="60" min="0">
</td>
</tr>
<tr>
<td>
3h
</td>
<td>
<input type="number" class="hours" id="3h" name="3" min="0">
</td>
</tr>
<tr>
<td>
8h
</td>
<td>
<input type="number" class="hours" id="8h" name="8" min="0">
</td>
</tr>
<tr>
<td>
15h
</td>
<td>
<input type="number" class="hours" id="15h" name="15" min="0">
</td>
</tr>
<tr>
<td>
24h
</td>
<td>
<input type="number" class="hours" id="24h" name="24" min="0">
</td>
</tr>
<tr>
<td>
3d
</td>
<td>
<input type="number" id="3d" class="days" name="3" min="0">
</td>
</tr>
<tr>
<td>
7d
</td>
<td>
<input type="number" id="7d" class="days" name="7" min="0">
</td>
</tr>
<tr>
<td>
30d
</td>
<td>
<input type="number" id="30d" class="days" name="30" min="0">
</td>
</tr>
<tr>
<td colspan="2">
<button id="submit" class="submitbtn">Submit</button>
</td>
</tr>
<tr>
<td colspan="2">
<p id="results" class="resultarea"></p>
</td>
</tr>
</tbody>
</table>因为有6个，而且我试图遵循DRY的编码方式，所以我试图创建最少的代码来完成所有6个计算器的脚本编写工作。我的意思是，它们都是一样的，这应该不难，对吧？
这是我认为可行的代码。我不知道问题出在哪里，因为它没有在控制台中抛出任何错误。简而言之，代码与第一个非常相似，只是我尝试通过.forEach函数引用所有表。此外，我读到引用元素的子元素的一种方法是给所有子元素一个类名，然后使用parentName.querySelectorAll('className')(因此我尝试将其与表一起用作"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`;
}
所以是的。重申一下：我想要一页上有6个相同版本的这些表/计算器，我想要一个简单、容易的代码来编写所有6个表/计算器的脚本，因为它们是相同的。非常感谢。
使用您提供的代码，我不得不解决多个错误/错误。第一个很小，但就像编程中的任何错误一样，它们仍然有问题。
让我们从开始
const submitBtns = document.querySelectorAll('.subitbtn');和
const results = table.querySelector('.resultsarea');
这些有错别字。根据你的html，它应该是：
const submitBtns = document.querySelectorAll('.submitbtn');和
const results = table.querySelector('.resultarea');
那么就存在一些逻辑的问题。speedupInputs/tableinputs或在错误的位置声明。您只需要在循环中计算的当前表中的speedupInputs/tableinputs。不是每次都在6张桌子上！
因此，与其将其声明为全局变量并选择文档中的每一件事，不如删除全局加速输入并将其放置在表中for Each循环中，如：
const speedupInputs = table.querySelectorAll('.tableinput');
所以这是可行的，但是您的表不包含类tableinput。表的第一部分中的每个输入字段都应该具有该类。然后它会按照你的意愿工作，我想。
我在下面的代码中添加了一个工作片段。
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" class="tableinput minutes" id="1m" name="1" min="0">
</td>
</tr>
<tr>
<td>
3m
</td>
<td>
<input type="number" class="tableinput minutes" id="3m" name="3" min="0">
</td>
</tr>
<tr>
<td>
5m
</td>
<td>
<input type="number" class="tableinput minutes" id="5m" name="5" min="0">
</td>
</tr>
<tr>
<td>
10m
</td>
<td>
<input type="number" class="tableinput minutes" id="10m" name="10" min="0">
</td>
</tr>
<tr>
<td>
15m
</td>
<td>
<input type="number" class="tableinput minutes" id="15m" name="15" min="0">
</td>
</tr>
<tr>
<td>
30m
</td>
<td>
<input type="number" class="tableinput minutes" id="30m" name="30" min="0">
</td>
</tr>
<tr>
<td>
45m
</td>
<td>
<input type="number" class="tableinput minutes" id="45m" name="45" min="0">
</td>
</tr>
<tr>
<td>
60m
</td>
<td>
<input type="number" class="tableinput minutes" id="60m" name="60" min="0">
</td>
</tr>
<tr>
<td>
3h
</td>
<td>
<input type="number" class="tableinput hours" id="3h" name="3" min="0">
</td>
</tr>
<tr>
<td>
8h
</td>
<td>
<input type="number" class="tableinput hours" id="8h" name="8" min="0">
</td>
</tr>
<tr>
<td>
15h
</td>
<td>
<input type="number" class="tableinput hours" id="15h" name="15" min="0">
</td>
</tr>
<tr>
<td>
24h
</td>
<td>
<input type="number" class="tableinput hours" id="24h" name="24" min="0">
</td>
</tr>
<tr>
<td>
3d
</td>
<td>
<input type="number" id="3d" class="tableinput days" name="3" min="0">
</td>
</tr>
<tr>
<td>
7d
</td>
<td>
<input type="number" id="7d" class="tableinput days" name="7" min="0">
</td>
</tr>
<tr>
<td>
30d
</td>
<td>
<input type="number" id="30d" class="tableinput days" name="30" min="0">
</td>
</tr>
<tr>
<td colspan="2">
<button id="submit" class="submitbtn">Submit</button>
</td>
</tr>
<tr>
<td colspan="2">
<p id="results" class="resultarea"></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" class="tableinput minutes" id="1m" name="1" min="0">
</td>
</tr>
<tr>
<td>
3m
</td>
<td>
<input type="number" class="tableinput minutes" id="3m" name="3" min="0">
</td>
</tr>
<tr>
<td>
5m
</td>
<td>
<input type="number" class="tableinput minutes" id="5m" name="5" min="0">
</td>
</tr>
<tr>
<td>
10m
</td>
<td>
<input type="number" class="tableinput minutes" id="10m" name="10" min="0">
</td>
</tr>
<tr>
<td>
15m
</td>
<td>
<input type="number" class="tableinput minutes" id="15m" name="15" min="0">
</td>
</tr>
<tr>
<td>
30m
</td>
<td>
<input type="number" class="tableinput minutes" id="30m" name="30" min="0">
</td>
</tr>
<tr>
<td>
45m
</td>
<td>
<input type="number" class="tableinput minutes" id="45m" name="45" min="0">
</td>
</tr>
<tr>
<td>
60m
</td>
<td>
<input type="number" class="tableinput minutes" id="60m" name="60" min="0">
</td>
</tr>
<tr>
<td>
3h
</td>
<td>
<input type="number" class="tableinput hours" id="3h" name="3" min="0">
</td>
</tr>
<tr>
<td>
8h
</td>
<td>
<input type="number" class="tableinput hours" id="8h" name="8" min="0">
</td>
</tr>
<tr>
<td>
15h
</td>
<td>
<input type="number" class="tableinput hours" id="15h" name="15" min="0">
</td>
</tr>
<tr>
<td>
24h
</td>
<td>
<input type="number" class="tableinput hours" id="24h" name="24" min="0">
</td>
</tr>
<tr>
<td>
3d
</td>
<td>
<input type="number" id="3d" class="tableinput days" name="3" min="0">
</td>
</tr>
<tr>
<td>
7d
</td>
<td>
<input type="number" id="7d" class="tableinput days" name="7" min="0">
</td>
</tr>
<tr>
<td>
30d
</td>
<td>
<input type="number" id="30d" class="tableinput days" name="30" min="0">
</td>
</tr>
<tr>
<td colspan="2">
<button id="submit" class="submitbtn">Submit</button>
</td>
</tr>
<tr>
<td colspan="2">
<p id="results" class="resultarea"></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" class="tableinput minutes" id="1m" name="1" min="0">
</td>
</tr>
<tr>
<td>
3m
</td>
<td>
<input type="number" class="tableinput minutes" id="3m" name="3" min="0">
</td>
</tr>
<tr>
<td>
5m
</td>
<td>
<input type="number" class="tableinput minutes" id="5m" name="5" min="0">
</td>
</tr>
<tr>
<td>
10m
</td>
<td>
<input type="number" class="tableinput minutes" id="10m" name="10" min="0">
</td>
</tr>
<tr>
<td>
15m
</td>
<td>
<input type="number" class="tableinput minutes" id="15m" name="15" min="0">
</td>
</tr>
<tr>
<td>
30m
</td>
<td>
<input type="number" class="tableinput minutes" id="30m" name="30" min="0">
</td>
</tr>
<tr>
<td>
45m
</td>
<td>
<input type="number" class="tableinput minutes" id="45m" name="45" min="0">
</td>
</tr>
<tr>
<td>
60m
</td>
<td>
<input type="number" class="tableinput minutes" id="60m" name="60" min="0">
</td>
</tr>
<tr>
<td>
3h
</td>
<td>
<input type="number" class="tableinput hours" id="3h" name="3" min="0">
</td>
</tr>
<tr>
<td>
8h
</td>
<td>
<input type="number" class="tableinput hours" id="8h" name="8" min="0">
</td>
</tr>
<tr>
<td>
15h
</td>
<td>
<input type="number" class="tableinput hours" id="15h" name="15" min="0">
</td>
</tr>
<tr>
<td>
24h
</td>
<td>
<input type="number" class="tableinput hours" id="24h" name="24" min="0">
</td>
</tr>
<tr>
<td>
3d
</td>
<td>
<input type="number" id="3d" class="tableinput days" name="3" min="0">
</td>
</tr>
<tr>
<td>
7d
</td>
<td>
<input type="number" id="7d" class="tableinput days" name="7" min="0">
</td>
</tr>
<tr>
<td>
30d
</td>
<td>
<input type="number" id="30d" class="tableinput days" name="30" min="0">
</td>
</tr>
<tr>
<td colspan="2">
<button id="submit" class="submitbtn">Submit</button>
</td>
</tr>
<tr>
<td colspan="2">
<p id="results" class="resultarea"></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" class="tableinput minutes" id="1m" name="1" min="0">
</td>
</tr>
<tr>
<td>
3m
</td>
<td>
<input type="number" class="tableinput minutes" id="3m" name="3" min="0">
</td>
</tr>
<tr>
<td>
5m
</td>
<td>
<input type="number" class="tableinput minutes" id="5m" name="5" min="0">
</td>
</tr>
<tr>
<td>
10m
</td>
<td>
<input type="number" class="tableinput minutes" id="10m" name="10" min="0">
</td>
</tr>
<tr>
<td>
15m
</td>
<td>
<input type="number" class="tableinput minutes" id="15m" name="15" min="0">
</td>
</tr>
<tr>
<td>
30m
</td>
<td>
<input type="number" class="tableinput minutes" id="30m" name="30" min="0">
</td>
</tr>
<tr>
<td>
45m
</td>
<td>
<input type="number" class="tableinput minutes" id="45m" name="45" min="0">
</td>
</tr>
<tr>
<td>
60m
</td>
<td>
<input type="number" class="tableinput minutes" id="60m" name="60" min="0">
</td>
</tr>
<tr>
<td>
3h
</td>
<td>
<input type="number" class="tableinput hours" id="3h" name="3" min="0">
</td>
</tr>
<tr>
<td>
8h
</td>
<td>
<input type="number" class="tableinput hours" id="8h" name="8" min="0">
</td>
</tr>
<tr>
<td>
15h
</td>
<td>
<input type="number" class="tableinput hours" id="15h" name="15" min="0">
</td>
</tr>
<tr>
<td>
24h
</td>
<td>
<input type="number" class="tableinput hours" id="24h" name="24" min="0">
</td>
</tr>
<tr>
<td>
3d
</td>
<td>
<input type="number" id="3d" class="tableinput days" name="3" min="0">
</td>
</tr>
<tr>
<td>
7d
</td>
<td>
<input type="number" id="7d" class="tableinput days" name="7" min="0">
</td>
</tr>
<tr>
<td>
30d
</td>
<td>
<input type="number" id="30d" class="tableinput days" name="30" min="0">
</td>
</tr>
<tr>
<td colspan="2">
<button id="submit" class="submitbtn">Submit</button>
</td>
</tr>
<tr>
<td colspan="2">
<p id="results" class="resultarea"></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" class="tableinput minutes" id="1m" name="1" min="0">
</td>
</tr>
<tr>
<td>
3m
</td>
<td>
<input type="number" class="tableinput minutes" id="3m" name="3" min="0">
</td>
</tr>
<tr>
<td>
5m
</td>
<td>
<input type="number" class="tableinput minutes" id="5m" name="5" min="0">
</td>
</tr>
<tr>
<td>
10m
</td>
<td>
<input type="number" class="tableinput minutes" id="10m" name="10" min="0">
</td>
</tr>
<tr>
<td>
15m
</td>
<td>
<input type="number" class="tableinput minutes" id="15m" name="15" min="0">
</td>
</tr>
<tr>
<td>
30m
</td>
<td>
<input type="number" class="tableinput minutes" id="30m" name="30" min="0">
</td>
</tr>
<tr>
<td>
45m
</td>
<td>
<input type="number" class="tableinput minutes" id="45m" name="45" min="0">
</td>
</tr>
<tr>
<td>
60m
</td>
<td>
<input type="number" class="tableinput minutes" id="60m" name="60" min="0">
</td>
</tr>
<tr>
<td>
3h
</td>
<td>
<input type="number" class="tableinput hours" id="3h" name="3" min="0">
</td>
</tr>
<tr>
<td>
8h
</td>
<td>
<input type="number" class="tableinput hours" id="8h" name="8" min="0">
</td>
</tr>
<tr>
<td>
15h
</td>
<td>
<input type="number" class="tableinput hours" id="15h" name="15" min="0">
</td>
</tr>
<tr>
<td>
24h
</td>
<td>
<input type="number" class="tableinput hours" id="24h" name="24" min="0">
</td>
</tr>
<tr>
<td>
3d
</td>
<td>
<input type="number" id="3d" class="tableinput days" name="3" min="0">
</td>
</tr>
<tr>
<td>
7d
</td>
<td>
<input type="number" id="7d" class="tableinput days" name="7" min="0">
</td>
</tr>
<tr>
<td>
30d
</td>
<td>
<input type="number" id="30d" class="tableinput days" name="30" min="0">
</td>
</tr>
<tr>
<td colspan="2">
<button id="submit" class="submitbtn">Submit</button>
</td>
</tr>
<tr>
<td colspan="2">
<p id="results" class="resultarea"></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" class="tableinput minutes" id="1m" name="1" min="0">
</td>
</tr>
<tr>
<td>
3m
</td>
<td>
<input type="number" class="tableinput minutes" id="3m" name="3" min="0">
</td>
</tr>
<tr>
<td>
5m
</td>
<td>
<input type="number" class="tableinput minutes" id="5m" name="5" min="0">
</td>
</tr>
<tr>
<td>
10m
</td>
<td>
<input type="number" class="tableinput minutes" id="10m" name="10" min="0">
</td>
</tr>
<tr>
<td>
15m
</td>
<td>
<input type="number" class="tableinput minutes" id="15m" name="15" min="0">
</td>
</tr>
<tr>
<td>
30m
</td>
<td>
<input type="number" class="tableinput minutes" id="30m" name="30" min="0">
</td>
</tr>
<tr>
<td>
45m
</td>
<td>
<input type="number" class="tableinput minutes" id="45m" name="45" min="0">
</td>
</tr>
<tr>
<td>
60m
</td>
<td>
<input type="number" class="tableinput minutes" id="60m" name="60" min="0">
</td>
</tr>
<tr>
<td>
3h
</td>
<td>
<input type="number" class="tableinput hours" id="3h" name="3" min="0">
</td>
</tr>
<tr>
<td>
8h
</td>
<td>
<input type="number" class="tableinput hours" id="8h" name="8" min="0">
</td>
</tr>
<tr>
<td>
15h
</td>
<td>
<input type="number" class="tableinput hours" id="15h" name="15" min="0">
</td>
</tr>
<tr>
<td>
24h
</td>
<td>
<input type="number" class="tableinput hours" id="24h" name="24" min="0">
</td>
</tr>
<tr>
<td>
3d
</td>
<td>
<input type="number" id="3d" class="tableinput days" name="3" min="0">
</td>
</tr>
<tr>
<td>
7d
</td>
<td>
<input type="number" id="7d" class="tableinput days" name="7" min="0">
</td>
</tr>
<tr>
<td>
30d
</td>
<td>
<input type="number" id="30d" class="tableinput days" name="30" min="0">
</td>
</tr>
<tr>
<td colspan="2">
<button id="submit" class="submitbtn">Submit</button>
</td>
</tr>
<tr>
<td colspan="2">
<p id="results" class="resultarea"></p>
</td>
</tr>
</tbody>
</table>`
DRY中的第一个原则是使用元数据(此处为units和tabMeta(。则使用它们来生成所有6个表的HTML。
否则，对于DRY的其余问题，JavaScript允许事件委派(在这里使用来检测值的最微小变化(提交按钮是无用的(
您还应该详细研究大量的数组方法。
示例代码：
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>