使用 switch JavaScript 显示不同类型的表单

Question

我有个问题。我想使用JavaScript语句根据用户输入显示不同类型的表单，例如添加表单、修改表单和删除表单switch。因此，如果用户输入“A”，则会显示添加表单，当用户输入“B”时，将显示修改表单，等等。这里的问题是，无论我输入什么内容，都不会显示。有人可以向我解释一下吗？谢谢。

注意：表单的 CSS，display: none;因为我不希望在页面加载时显示表单。我只想根据用户输入，然后显示特定的表格。我想制作下拉列表而不是在框中键入内容，但这并不容易做到。

var val=document.getElementById("user").value;

var check=document.getElementById("enter");

function change(){

  switch(val){

    case 'A': {

      document.getElementById("add").style.display="block";

      break;

    }

    case 'B': {

      document.getElementById("modify").style.display="block";

      break;

    }

    case 'C': {

      document.getElementById("delete").style.display="block";

      break;

    }

  }

}

check.addEventListener("click", change);

div#add, div#modify, div#delete{

    display: none;

}

Answer 1

尝试使用下拉菜单代替：<label for="action">Choose an action:</label><select id="action" name="action" onchange='onSelectChangeHandler()'>&nbsp; &nbsp; <option value="add">Add</option>&nbsp; &nbsp; <option value="modify">Edit</option>&nbsp; &nbsp; <option value="delete">Delete</option></select>和 JavaScript 代码：function onSelectChangeHandler() {&nbsp; &nbsp; var val = document.getElementById("action").value;&nbsp; &nbsp; switch (val) {&nbsp; &nbsp; &nbsp; &nbsp; case "add":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // document.getElementById("add").style.display="block";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("Show form Add");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case "modify":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // document.getElementById("modify").style.display = "block";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("Show form Modify");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case "delete":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // document.getElementById("delete").style.display = "block";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("Show form Delete");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }}只要删除它就comments可以了。但您也可以通过简单地执行以下操作来删除 switch 语句：function onSelectChangeHandler() {&nbsp; &nbsp; var val = document.getElementById("action").value;&nbsp; &nbsp; document.getElementById(val).style.display="block";&nbsp; &nbsp; console.log("Show form ", val);}也就是说，如果选项与其标签对应项value完全相同id

Answer 2

user您需要获取函数内输入的值change。var check=document.getElementById("enter");function change(){&nbsp; var val=document.getElementById("user").value;&nbsp; switch(val){&nbsp; &nbsp; case 'A': {&nbsp; &nbsp; &nbsp; document.getElementById("add").style.display="block";&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }&nbsp; &nbsp; case 'B': {&nbsp; &nbsp; &nbsp; document.getElementById("modify").style.display="block";&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }&nbsp; &nbsp; case 'C': {&nbsp; &nbsp; &nbsp; document.getElementById("delete").style.display="block";&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }&nbsp; }}check.addEventListener("click", change);div#add, div#modify, div#delete{&nbsp; &nbsp; display: none;}<div id="add">&nbsp; <div id="add_task_form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="add_task">Add New Task</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form id="add_form" name="task_form" method="post">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="title_form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="title">Title</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="title" id="title"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="description_form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="description">Description</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="description" id="description"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="due_date_form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="due_date">Due Date</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="due_date" id="due_date" placeholder="yyyy-mm-dd"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="time_form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="time">Time</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="time" id="time" placeholder="hh:mi"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="submit_add_form" type="submit" name="submit" value="Save">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; </div></div><div id="modify">&nbsp; <div id="modify_task_form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="modify_task">Modify Task</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form id="modify_form" name="modify_form" method="post">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="modify_section">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="modify_com_in">What section?</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" id="modify_com_in" name="modify_com_in" placeholder="Complete or Incomplete"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="modify_section_id">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="modify_com_in_id">What ID?</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" id="modify_com_in_id" name="modify_com_in_id"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="title_modify_form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="modify_title">Title</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="title" id="modify_title"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="description_modify_form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="modify_description">Description</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="description" id="modify_description"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="due_date_modify_form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="due_date">Due Date</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="due_date" id="modify_due_date" placeholder="yyyy-mm-dd"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="time_modify_form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="modify_time">Time</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="time" id="modify_time" placeholder="hh:mi"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="submit_modify_form" type="submit" name="modify" value="Modify">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; </div></div><div id="delete">&nbsp; <div id="delete_task_form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="delete_task">Delete Task</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form id="delete_form" name="delete_form" method="post">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="delete_section">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="delete_com_in">What section?</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" id="delete_com_in" name="delete_com_in" placeholder="Complete or Incomplete"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="delete_section_id">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="delete_com_in_id">What ID?</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" id="delete_com_in_id" name="delete_com_in_id"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="submit_delete_form" type="submit" name="delete" value="Delete">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; </div></div><label for="user">User</label><input id="user" type="text" name="user"><input type="button" value="Enter" id="enter">