使用 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; }

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

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 （s）与其对应的id标签完全相同

Answer 2

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

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