Блог

Я хотел бы сделать так, чтобы при нажатии кнопки вычисления в моей форме ввода отображение автоматически менялось на форму сводки. Прямо сейчас у меня есть работающая кнопка выбора, которую я могу использовать для переключения между каждой из форм. Я все еще хочу иметь возможность перемещаться между тремя формами, я просто хочу, чтобы это приводило меня к сводке при нажатии кнопки рассчитать. Может ли кто-нибудь помочь мне придумать что-нибудь, что можно добавить в мою функцию вычисления выполнения, чтобы добавить эту возможность? (Пожалуйста, без jquery). Прямо сейчас мой код выглядит следующим образом:

HTML:

 <select id="form-selector">
  <option value="_" selected disabled>pick one !</option>
  <option value="Input">Input</option>
  <option value="Output">Output</option>
  <option value="Summary">Summary</option>
</select>

<div id="my-forms">
  <form name="Input">
    <!-- All of the input boxes and a "Calculate" button -->
    <h4> form Input</h4>
  </form>
  <form name="Output">
    <!-- All of the output boxes -->
    <h4> form Output</h4>
  </form>
  <form name="Summary">
    <!-- A few more output boxes -->
    <h4> form Summary</h4>
  </form>
</div>
  

JavaScript: Существует также функция выполнения вычислений, которая выполняет все вычисления при нажатии кнопки рассчитать.

JavaScript:

 const formSelect = document.getElementById('form-selector'),   
myForms    = document.getElementById('my-forms');
formSelect.oninput=()=>{ myForms.className = `f-${formSelect.value}` }
  

CSS:

 #my-forms form { display:none }
#my-forms.f-Input form[name=Input],
#my-forms.f-Output form[name=Output],
#my-forms.f-Summary form[name=Summary] { display:block }
  

Это должно выполнить свою работу:

 const myForms = document.getElementById('my-forms');
document.getElementById('form-selector').oninput=ev=>
  myForms.className = `f-${ev.target.value}`;
document.querySelector('button').onclick=ev=>
  (myForms.className = "f-Summary",false)  

 #my-forms form { display:none }
#my-forms.f-Input form[name=Input],
#my-forms.f-Output form[name=Output],
#my-forms.f-Summary form[name=Summary] { display:block }  

 <select id="form-selector">
  <option value="_" selected disabled>pick one !</option>
  <option value="Input">Input</option>
  <option value="Output">Output</option>
  <option value="Summary">Summary</option>
</select>

<div id="my-forms">
  <form name="Input">
    <!-- All of the input boxes and a "Calculate" button -->
    <h4> form Input</h4>
    <button>calculate</button>
  </form>
  <form name="Output">
    <!-- All of the output boxes -->
    <h4> form Output</h4>
  </form>
  <form name="Summary">
    <!-- A few more output boxes -->
    <h4> form Summary</h4>
  </form>
</div>  

.oninput Обработчик событий заботится об <select> элементе, .onclick обработчик событий вступает во владение при нажатии кнопки: он устанавливает класс элемента #my-forms div на «f-Summary», что приводит к отображению формы summary внутри него.