我有个问题。我想使用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
慕码人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">
添加回答
举报
0/150
提交
取消