Как сделать добавление форм кнопкой и чтобы последующие формы учитывали добавление новых (добавленных) значений

Question

Подскажите как сделать кнопкой добавление новых значений Va, например: нажал кнопку ("+" под первым Va ,например) - появилось Va2, нажал еще раз кнопку "+" (под - добавилось Va3. И чтобы последующие формулы выводили результат для нужного количества Va (сколько добавил Va) столько и результатов.

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))}`;

}

<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>

Answer 1

Не все, но как концепт под развитие...

  let resultTt;
  let resultStd;

  function getGlobal() {
    return Number(document.querySelector('#JGlobal').value)
  }
  let J = getGlobal();
  document.querySelector('#JGlobal').addEventListener('change', function() {
    J = getGlobal();
    breakWayTtPaint()

  })

  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();

  })

  const VA = {}
  const STD = {
    Sj: 9.3,
    L: 2.52,
    C: 0.838
  }
  const TT = {}
  const STDRES = {}

  let count = 0;

  const formVA = document.getElementById('VaGlobal');
  const resultTtTable = document.getElementById('resultTt');
  const formSTD = document.querySelector('#formInputStd');
  const resultSTD = document.querySelector('#resultStd');
  const resultTT1 = document.querySelector('#resultTt1');

  function inputVariable(id, TARGET, RELOAD) {
    const inp = document.createElement('input');
    inp.type = 'number';
    inp.value = TARGET[id];
    inp.addEventListener('input', function() {
      TARGET[id] = this.value
      RELOAD()
    })
    return inp;
  }

  function createDiv(label, TARGET, RELOAD, del) {
    const div = document.createElement('div');
    div.innerHTML = `<label for="${label}">${label}</label>`
    div.append(inputVariable(label, TARGET, RELOAD))
    if (del) div.append(createDelBtn(label, TARGET));
    return div;
  }

  function createDelBtn(id, TARGET) {
    const btn = document.createElement('button');
    btn.innerHTML = '-';
    btn.addEventListener('click', () => {
      delete TARGET[id];
      formVA.innerHTML = '';
      createVA(true)
    })
    return btn;
  }

  function createVA(add) {
    if (!add) {
      const id = 'va' + ++count;
      VA[id] = 0;
      formVA.append(createDiv(id, VA, breakWayTtPaint, true));
    } else {
      for (let x in VA) {
        formVA.append(createDiv(x, VA, breakWayTtPaint, true))
      }
    }
    breakWayTtPaint()

  }
  createVA();

  function breakWayTtPaint() {
    let line = ''
    for (let x in VA) {
      line += `<div><span>При ${x} равной ${VA[x]}: </span><span>${breakWayTt(VA[x], x)}</span></div>`;
    }
    resultTtTable.innerHTML = line;
    breakWayStdPrint()
  }

  // 1 формула - значение Tt:
  function breakWayTt(va, x) {
    console.log(va, J)
    if (!J) return `Не все данные введены`;
    resultTt = va / (3.6 * J);
    TT[x] = resultTt;
    return resultTt.toFixed(4);
  }

  function createSTD() {
    for (let x in STD) {
      formSTD.append(createDiv(x, STD, breakWayStdPrint));
    }
  }
  createSTD();

  // 2 формула - значение Sтд:
  function breakWayStd(va, Sj, L, C, x) {
    resultStd = Sj + va * t3 / 7.2 - L - C;
    STDRES[x] = resultStd;
    return resultStd.toFixed(2);
  }

  function breakWayStdPrint() {
    let line = '';
    for (let x in VA) {
      line += `<div><span>Sтд при ${x}(${VA[x]})</span><span>${breakWayStd(VA[x], STD.Sj, STD.L, STD.C, x)}</span></div>`;
    }
    resultSTD.innerHTML = line;
    breakWayTt1()

  }
  breakWayStdPrint()

  // 3 формула - значение Tt1:
  function breakWayTt1() {
    let line = '';
    for (let x in VA) {
      line += `<div><span>TT1 при ${x}(${VA[x]})</span><span>${VA[x] - (Math.sqrt(VA[x] ** 2 - (2 * STDRES[x]) / J + (t3 ** 2) / 4))}</span></div>`
    }
    resultTT1.innerHTML = line;
  }

<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">
    </form>
    <button onclick="createVA()">+</button>
    <h1>Значение Tt</h1>

    <form id="formInputTt"></form>

    <h2 id="resultTt"></h2>
    <div id="resultTtTable">

    </div>
    <h1>Значение Sтд</h1>
    <form id="formInputStd">

    </form>

    <h2 id="resultStd"></h2>


    <h1>Значение Tt1</h1>
    <form id="formInputTt1"></form>

    <h2 id="resultTt1"></h2>

БЛОГ НА HUSL

Как сделать добавление форм кнопкой и чтобы последующие формы учитывали добавление новых (добавленных) значений

Ответы (1 шт):