亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 switch JavaScript 顯示不同類型的表單

使用 switch JavaScript 顯示不同類型的表單

GCT1015 2023-07-20 16:59:33
我有個問題。我想使用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;}
查看完整描述

2 回答

?
肥皂起泡泡

TA貢獻1829條經驗 獲得超6個贊

嘗試使用下拉菜單代替:


<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


查看完整回答
反對 回復 2023-07-20
?
慕碼人8056858

TA貢獻1803條經驗 獲得超6個贊

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


查看完整回答
反對 回復 2023-07-20
  • 2 回答
  • 0 關注
  • 175 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號