Трудность с несколькими выводами значений
Подскажите как сделать кнопкой добавление новых значений Va, например: нажал кнопку ("+" под первым Va ,например) - появилось Va2, нажал еще раз кнопку "+" (под - добавилось Va3. И чтобы последующие формулы выводили результат для нужного количества Va (сколько добавил Va) столько и результатов.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formula 1</title>
</head>
<body>
<h1>При торможении</h1>
<form>
<div>
<label>J1:</label>
<input type="text" name="team" id="JGlobal" list="team_list">
<datalist id="team_list">
<option value="6.9">6.9 м3 мокрый</option>
<option value="7.5">7.5 м3 сухой</option>
</datalist>
</div>
<form>
<div>
<label>t1:</label>
<select id="T1Global">
<option disabled>выберите значение (надо выбрать - не будет просто так работать)</option>
<option>1.0</option>
</select>
</div>
</form>
<form>
<div>
<label>t2:</label>
<select id="T2Global">
<option disabled>выберите значение (надо выбрать - не будет просто так работать)</option>
<option>0.2</option>
</select>
</div>
</form>
<form>
<div>
<label>t3:</label>
<select id="T3Global">
<option disabled>выберите значение (надо выбрать - не будет просто так работать)</option>
<option>0.25</option>
</select>
</div>
</form>
<form id="VaGlobal">
<div>
<label>Va</label>
<input type="number">
</div>
</form>
<h1>Значение Tt</h1>
<form id="formInputTt">
</form>
<button onclick="breakWayTt()">Результат V</button>
<h2 id="resultTt"></h2>
<h1>Значение Sтд</h1>
<form id="formInputStd">
<div>
<label>Sj</label>
<input type="number" value="9.3">
</div>
<div>
<label>L</label>
<input type="number" value="2.52">
</div>
<div>
<label>C</label>
<input type="number" value="0.838">
</div>
</form>
<button onclick="breakWayStd()">Результат Sтд</button>
<h2 id="resultStd"></h2>
<h1>Значение Tt1</h1>
<form id="formInputTt1">
</form>
<button onclick="breakWayTt1()">Результат Tt1</button>
<h2 id="resultTt1"></h2>
<h1>Значение Sa</h1>
<form id="formInputSa">
<div>
<label>Tп</label>
<input type="number" value="1.91">
</div>
</form>
<button onclick="breakWaySa()">Результат Sa</button>
<h2 id="resultSa"></h2>
<button onclick="breakWaySo()">Результат So</button>
<h2 id="resultSo"></h2>
<button onclick="startAll()">Результат Общий</button>
<h2 id="startAll"></h2>
</body>
</html>
let resultTt;
let resultStd;
let resultTt1;
let resultSa;
let resultSo;
function getGlobal() {
return Number(document.querySelector('#JGlobal').value)
}
let J = getGlobal();
document.querySelector('#JGlobal').addEventListener('change', function() {
J = getGlobal();
})
function getT1Global() {
return Number(document.querySelector('#T1Global').value)
}
let t1 = getT1Global();
document.querySelector('#T1Global').addEventListener('change', function() {
t1 = getT1Global();
})
function getT2Global() {
return Number(document.querySelector('#T2Global').value)
}
let t2 = getT2Global();
document.querySelector('#T2Global').addEventListener('change', function() {
t2 = getT2Global();
})
function getT3Global() {
return Number(document.querySelector('#T3Global').value)
}
let t3 = getT3Global();
document.querySelector('#T3Global').addEventListener('change', function() {
t3 = getT3Global();
})
function getGlobalVa() {
return Number(document.querySelector('#VaGlobal').querySelector('input').value)
}
let va = getGlobalVa();
document.querySelector('#VaGlobal').addEventListener('change', function() {
va = getGlobalVa();
})
// 1 формула - значение Tt:
function breakWayTt() {
const form = document.querySelector('#formInputTt');
resultTt = va / (3.6 * J);
console.log(+resultTt.toFixed(4));
const result = document.querySelector('#resultTt');
result.innerText = `Результат: ${Number(resultTt.toFixed(4))}`;
return +resultTt.toFixed(4);
}
// 2 формула - значение Sтд:
function breakWayStd() {
const form = document.querySelector('#formInputStd');
const Sj = +form[0].value;
const L = +form[1].value;
const C = +form[2].value;
resultStd = Sj + va * t3 / 7.2 - L - C;
console.log(+resultStd.toFixed(2));
const result = document.querySelector('#resultStd');
result.innerText = `Результат: ${Number(resultStd.toFixed(2))}`;
return +resultStd.toFixed(2);
}
// 3 формула - значение Tt1:
function breakWayTt1() {
resultTt1 = resultTt - (Math.sqrt(resultTt ** 2 - (2 * resultStd) / J + (t3 ** 2) / 4));
console.log(+resultTt1.toFixed(4));
const result = document.querySelector('#resultTt1');
result.innerText = `Результат: ${Number(resultTt1.toFixed(4))}`;
return +resultTt1.toFixed(4);
}
// 4 формула - значение Sa:
function breakWaySa() {
const form = document.querySelector('#formInputSa');
const Tp = +form[0].value;
resultSa = (Tp - resultTt1) * (va /3.6) + resultStd;
console.log(+resultSa.toFixed(2));
const result = document.querySelector('#resultSa');
result.innerText = `Результат: ${Number(resultSa.toFixed(2))}`;
}
//5 формула - значение So
function breakWaySo() {
resultSo = (t1 + t2 + Number(t3 * 0.5)) * (+va / 3.6) + (Math.pow(+va, 2) / (25.92 * J));
console.log(+resultSo.toFixed(2));
const result = document.querySelector('#resultSo');
result.innerText = `Результат: ${Number(resultSo.toFixed(2))}`;
}
function startAll() { breakWayTt(); breakWayStd(); breakWayTt1(); breakWaySa(); breakWaySo();
}
|
Behemoth911,
какойто_элемент.innerText += va |
рони, и это будет добавлять новое Va и учитывать в каждой формуле исходя из их количества?
|
Behemoth911,
ваш код, не смотря на простоту, трудно читаемый, отсюда сложности с советами ... но примерно так.
let va = getGlobalVa();
какойто_элемент.innerText = va
document.querySelector('#VaGlobal').addEventListener('change', function() {
va = getGlobalVa();
какойто_элемент.innerText += " " + va
})
|
рони, я так понял: какойто_элемент.innerText += " вот это число будет" + va (+скорость)?
|
рони, или оно будет добавлять новую форму?
|
Цитата:
|
Behemoth911,
с номером, можно так ...
let va = getGlobalVa(), num = 0;
какойто_элемент.innerHTML = `${++num} ${va}<br>`;
document.querySelector('#VaGlobal').addEventListener('change', function() {
va = getGlobalVa();
какойто_элемент.innerHTML += `${++num} ${va}<br>`
})
|
рони, а как сделать чтобы следующие формулы полтягивали новые значения и выводили ниже первой Va?
|
Behemoth911,
заведите массив и складывайте в этот массив данные, потом выводите в нужном вам порядке. |
рони, надо будет попробовать, спасибо)
|
рони, добрый день, можете, пожалуйста на примере этой формулы показать как реализовать Va1 с добавлением значений? Я пробовал у меня не вышло(
let va1 = getGlobalVa1(), num = 0;
result1.innerHTML = `${++num} ${va1}<br>`;
document.querySelector('#VaGlobal').addEventListener('change', function() {
va1 = getGlobalVa1();
result1.innerHTML += `${++num} ${va1}<br>`
})
function breakWayTTT() {
const form = document.querySelector('#formInput2');
resultTT = va1 / (3.6 * J);
console.log(+resultTT.toFixed(4));
const result = document.querySelector('#resultTT');
result.innerText = `Результат: ${Number(resultTT.toFixed(4))}`;
return +resultTT.toFixed(4);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formula 1</title>
</head>
<body>
<h1>При гальмуванні</h1>
<div id="global-j"></div>
<h1>Визначення Tt</h1>
<form id="formInputTT">
</form>
<button onclick="breakWayTT()">Результат TT</button>
<h2 id="resultTT"></h2>
</body>
</html>
|
Behemoth911,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formula 1</title>
<style type="text/css">
ul>li{
color: #8B4513;
list-style: none;
}
ol>li{
color: #FF0000;
}
ol>li::marker{
color: #000000;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector("#formInputTT");
const result = {};
const out = document.querySelector("#resultTT");
const show = obj => {
let html = "<ul>"
for (let key in obj) html += `<li>${key}<ol><li>${obj[key].join('<li>')}</ol>`
out.innerHTML = html
}
form.addEventListener("submit", function(event) {
event.preventDefault();
let num = this.v.valueAsNumber * 5;
result.Tt = (result.Tt || [])
result.Tt.push(num);
this.v.value = "";
show(result);
})
const formBB = document.querySelector("#formInputBB");
formBB.addEventListener("submit", function(event) {
event.preventDefault();
let num = this.v.valueAsNumber * 2;
result.BB = (result.BB || [])
result.BB.push(num);
this.v.value = "";
show(result);
})
})
</script>
</head>
<body>
<h1>При гальмуванні</h1>
<div id="global-j"></div>
<h1>Визначення Tt</h1>
<form id="formInputTT">
<input name="v" required="required" type="number">
<button>Результат TT</button>
</form>
<h1>Визначення BB</h1>
<form id="formInputBB">
<input name="v" required="required" type="number">
<button>Результат BB</button>
</form>
<h2 id="resultTT"></h2>
</body>
</html>
|
рони, спасибо за пример)
|
| Часовой пояс GMT +3, время: 04:22. |