Как сделать так, чтобы различные формы HTML отображались на основе поля выбора? - PullRequest
Новая
       3

Как сделать так, чтобы различные формы HTML отображались на основе поля выбора?

2 голосов
/ 13 июля 2020

Я пытаюсь создать собственный калькулятор, у которого в верхней части страницы будет поле выбора. В поле выбора будут варианты: Input, Output и Summary. В зависимости от того, какой вариант выбран, я бы хотел, чтобы появилась соответствующая форма HTML. Прямо сейчас мой HTML выглядит примерно так: 

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <link rel="stylesheet" href="styler.css">
</head>
<body>
  <form name = "Input">
    <!-- All of the input boxes and a "Calculate" button -->
  </form>
  <form name = "Output">
    <!-- All of the output boxes -->
  </form>
  <form name = "Summary">
    <!-- A few more output boxes -->
  </form>

(у меня javascript ниже для кнопки «рассчитать»)

Как мне сделать поле выбора с этими тремя параметры, которые будут отображать каждую из этих форм, когда это поле выбрано (и только форма выбранных полей)?

Кроме того, я работаю в Webstorm, и я бы предпочел не заниматься импортом jquery. Также стоит отметить, что все три формы должны находиться в одном файле, потому что функция вычисления извлекает данные из входов и возвращает их в выходы.

Ответы [ 2 ]

1 голос
/ 13 июля 2020

вы можете это сделать: 

const formSelect = document.getElementById('form-selector')
  ,   myForms    = document.getElementById('my-forms')
  ;
formSelect.oninput=()=>{ myForms.className = `f-${formSelect.value}` }
#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>
  </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>
0 голосов
/ 13 июля 2020

сначала скрыть все с классом "hidden", назначить ему display:none, затем дать каждому идентификатор, сделать выборку ввода с параметрами, значения которых соответствуют этому идентификатору (каждой формы), затем на change для select, добавьте скрытый класс ко всем формам (возможно, сделайте массив значений идентификаторов), а затем удалите его из класса с идентификатором текущего значения параметра. так: 

formIDs=[
   "Input",
   "Output",
   "Summary"
]
hideEm()
s.onchange=e=>{
  hideEm()
  if(window[s.value]){
    window[s.value]
    .classList.remove("h")
  }
}

function hideEm() {
  formIDs.forEach(x=>{
    var f = document.getElementById(x)
    if(f){
      if(!f.classList.contains("h")) {
        f.classList.add("h")
      }
    }
  })
}
.h{
  display :none
}
<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <link rel="stylesheet" href="styler.css">
</head>
<body>
    <form id = "Input">
 All of the input boxes and a "Calculate" button 
</form>
<form id = "Output">
All of the output boxes
</form>
<form id = "Summary">
A few more output boxes
</form>
<select id=s>
<option value="nothin">nothin</option>
<option value="Input">Input</option>
<option value="Output">Output</option>
<option value="Summary">Summary</option>
</select>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...