使用 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()'>

    <option value="add">Add</option>

    <option value="modify">Edit</option>

    <option value="delete">Delete</option>

</select>

和 JavaScript 代码：

function onSelectChangeHandler() {

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

    switch (val) {

        case "add":

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

            console.log("Show form Add");

            break;

        case "modify":

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

            console.log("Show form Modify");

            break;

        case "delete":

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

            console.log("Show form Delete");

            break;

    }

}

只要删除它就comments可以了。

但您也可以通过简单地执行以下操作来删除 switch 语句：

function onSelectChangeHandler() {

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

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

    console.log("Show form ", val);

}

也就是说，如果选项与其标签对应项value完全相同id

Answer 2

user您需要获取函数内输入的值change。

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

function change(){

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

  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;

}

<div id="add">

  <div id="add_task_form">

            <button id="add_task">Add New Task</button>

            <form id="add_form" name="task_form" method="post">

                <div id="title_form">

                    <label for="title">Title</label>

                    <input type="text" name="title" id="title"><br>

                </div>

                <div id="description_form">

                    <label for="description">Description</label>

                    <input type="text" name="description" id="description"><br>

                </div>

                <div id="due_date_form">

                    <label for="due_date">Due Date</label>

                    <input type="text" name="due_date" id="due_date" placeholder="yyyy-mm-dd"><br>

                </div>

                <div id="time_form">

                    <label for="time">Time</label>

                    <input type="text" name="time" id="time" placeholder="hh:mi"><br>

                </div>

                    

                    <input id="submit_add_form" type="submit" name="submit" value="Save">

            </form>

            <br>

        </div>

</div>

<div id="modify">

  <div id="modify_task_form">

            <button id="modify_task">Modify Task</button>

            <form id="modify_form" name="modify_form" method="post">

                <div id="modify_section">

                    <label for="modify_com_in">What section?</label>

                    <input type="text" id="modify_com_in" name="modify_com_in" placeholder="Complete or Incomplete"><br>

                </div>

                <div id="modify_section_id">

                    <label for="modify_com_in_id">What ID?</label>

                    <input type="text" id="modify_com_in_id" name="modify_com_in_id"><br>

                </div>

                <div id="title_modify_form">

                    <label for="modify_title">Title</label>

                    <input type="text" name="title" id="modify_title"><br>

                </div>

                <div id="description_modify_form">

                    <label for="modify_description">Description</label>

                    <input type="text" name="description" id="modify_description"><br>

                </div>

                <div id="due_date_modify_form">

                    <label for="due_date">Due Date</label>

                    <input type="text" name="due_date" id="modify_due_date" placeholder="yyyy-mm-dd"><br>

                </div>

                <div id="time_modify_form">

                    <label for="modify_time">Time</label>

                    <input type="text" name="time" id="modify_time" placeholder="hh:mi"><br>

                </div>

                    

                    <input id="submit_modify_form" type="submit" name="modify" value="Modify">

            </form>

            <br>

        </div>

</div>

<div id="delete">

  <div id="delete_task_form">

            <button id="delete_task">Delete Task</button>

            <form id="delete_form" name="delete_form" method="post">

                <div id="delete_section">

                    <label for="delete_com_in">What section?</label>

                    <input type="text" id="delete_com_in" name="delete_com_in" placeholder="Complete or Incomplete"><br>

                </div>

                <div id="delete_section_id">

                    <label for="delete_com_in_id">What ID?</label>

                    <input type="text" id="delete_com_in_id" name="delete_com_in_id"><br>

                </div>

                    

                    <input id="submit_delete_form" type="submit" name="delete" value="Delete">

            </form>

            <br>

        </div>

</div>

<label for="user">User</label>

<input id="user" type="text" name="user">

<input type="button" value="Enter" id="enter">