user will enter the details like name, address and designation which is in the dropdown and there is add button to insert this data so I will display these data through innerHTML. Now I need to display a dropdown which will help to filter the data depending upon the option of the dropdown. Below is my code.
var data = [];
var fnameInput = document.getElementById("fname");
var addressInput = document.getElementById("address");
var designationInput = document.getElementById("designation");
var sel=document.getElementById("sel");
var messageBox = document.getElementById("display");
function insert() {
var fname, address, designation;
fname =fnameInput.value;
address =addressInput.value;
designation =designationInput.value;
data.push({
id: new Date().getTime(),
fname:fname,
address:address,
designation:designation
});
clearAndShow();
}
function clearAndShow() {
fnameInput.value = "";
addressInput.value = "";
designationInput.value = "";
var html = "";
console.log("aaaaaaaa");
for(i = 0; i <= data.length - 1; i )
{
html = "<div>";
html = "<div><span>" data[i].fname "</span> <span><button type='button' onclick='deleteUser(" data[i].id ")'>Delete</button>"
"<button type='button' onclick='editUser(" data[i].id ")'>Edit</button></span></div>" ;
html = " <div> " data[i].address "</div>";
html = " <div> " data[i].designation "</div>";
html = "</div>";
}
messageBox.innerHTML = html;
}
function deleteUser(id){
data = data.filter(user=>user.id != id);
clearAndShow();
}
function editUser(name,address,designation){
document.getElementById("fname").value = name;
document.getElementById("address").value = address;
document.getElementById("designation").value = designation;
}
function dataOnly(){
console.log("??????????????");
var user=document.getElementById("sel").value;
var all=document.getElementById("all");
var get=document.getElementById("get");
var se=document.getElementById("se");
var dev=document.getElementById("dev");
var others=document.getElementById("others");
if(user=="All"){
all.style.display="block"
get.style.display="block";
se.style.display="block";
dev.style.display="block";
others.style.display="block";
const alll = document.getElementById("all")
console.log(alll.dataset.value);
}
if(user=="Gratuate Engineering Trainee"){
all.style.display="none"
get.style.display="block";
se.style.display="none";
dev.style.display="none";
others.style.display="none";
const gett = document.getElementById("get")
console.log(gett.dataset.value);
}else if(user=="Software Engineer"){
all.style.display="none"
get.style.display="none";
se.style.display="block";
dev.style.display="none";
others.style.display="none";
const see = document.getElementById("se")
console.log(see.dataset.value);
}else if(user=="Developer"){
all.style.display="none"
get.style.display="none";
se.style.display="none";
dev.style.display="block";
others.style.display="none";
const devv = document.getElementById("dev")
console.log(devv.dataset.value);
}else if(user=="others"){
all.style.display="none"
get.style.display="none";
se.style.display="none";
dev.style.display="none";
others.style.display="block";
const otherss = document.getElementById("others")
console.log(otherss.dataset.value);
}
} <form>
<h1>Please enter details</h1>
<input id="fname" type="text" placeholder="fname" /><br></br>
<textarea id="address" name="Address" placeholder="address" rows="2" cols="10"></textarea><br></br>
<select id="designation" name="des" placeholder="designation">
<option value="Gratuate Engineering Trainee">Gratuate Engineering Trainee</option>
<option value="Software Engineer">Software Engineer</option>
<option value="Developer">Developer</option>
<option value="others">others</option> </select><br></br>
<input type="button" value="Add" onclick="insert()" />
<select id="sel" onchange="dataOnly()">
<option value="All">All</option>
<option value="Gratuate Engineering Trainee">Gratuate Engineering Trainee</option>
<option value="Software Engineer">Software Engineer</option>
<option value="Developer">Developer</option>
<option value="others">others</option> </select><br></br>
<div id="all" data-id="fname.value" ></div>
<div id="get" data-id="fname.value" ></div>
<div id="se" data-id="fname.value" ></div>
<div id="dev" data-id="fname.value" ></div>
<div id="others" data-id="fname.value" ></div>
<div id="display">
</div>I tired adding dropdown so that the admin will get the information of the specific designation members with address but I am not able to get the details. Example: one data with name:"aaa" address: "bbb" designation: "Graduate Engineering Trainee" another data with name:" ccc" address: "ddd" designation: "Developer" now I am able to add these to array through innerHTML and display both but, with the help of another dropdown I need to segregate the data like, if I choose developer in dropdown option there should be "ccc" and "ddd" as output. similarly if I choose graduate engineer trainee there should be "aaa" and "bbb" as output.
CodePudding user response：
Here's the working solution:
var data = [],
selectedUserId = null;
var fnameInput = document.getElementById("firstName"),
addressInput = document.getElementById("address"),
designationInput = document.getElementById("designation"),
sel = document.getElementById("sel"),
messageDiv = document.getElementById("display");
document.getElementById("update").style.display = "none";
function addUser() {
var fname = fnameInput.value,
address = addressInput.value,
designation = designationInput.value;
var tmp = {
id: new Date().getTime(),
fname: fname,
address: address,
designation: designation
};
data.push(tmp);
clearAndShow(data);
}
function clearAndShow(data) {
fnameInput.value = "";
addressInput.value = "";
designationInput.value = "";
var html = "";
for (i = 0; i <= data.length - 1; i ) {
html = "<div style='border: 1px solid grey'>";
html =
"<div><span>"
data[i].fname
"</span> <span><button type='button' onclick='deleteUser("
data[i].id
")'>Delete</button>"
"<button type='button' onclick='editUser("
data[i].id
")'>Edit</button></span></div>";
html = "<div>" data[i].address "</div>";
html = "<div>" data[i].designation "</div>";
html = "</div>";
}
messageDiv.innerHTML = html;
}
function deleteUser(id) {
data = data.filter((user) => user.id != id);
clearAndShow(data);
}
function editUser(id) {
var selectedUsers = data.filter((user) => user.id == id);
selectedUserId = id;
document.getElementById("firstName").value = selectedUsers[0].fname;
document.getElementById("address").value = selectedUsers[0].address;
document.getElementById("designation").value = selectedUsers[0].designation;
document.getElementById("update").style.display = "block";
document.getElementById("add").style.display = "none";
}
function updateUser(selectedUserId) {
var tmp = {
id: new Date().getTime(),
fname: fnameInput.value,
address: addressInput.value,
designation: designationInput.value
};
data = data.map((x) => (x.id === selectedUserId ? tmp : x));
document.getElementById("update").style.display = "none";
document.getElementById("add").style.display = "block";
clearAndShow(data);
}
function showFilteredData() {
var filter = document.getElementById("selectToShow").value;
document.getElementById("selectToShow").value = "All";
var selectedUsers = data.filter((user) => user.designation == filter);
filter == "All" ? clearAndShow(data) : clearAndShow(selectedUsers);
}<form>
<h1>Please enter details</h1>
<input id="firstName" type="text" placeholder="FirstName" /><br /><br />
<textarea id="address" name="address" placeholder="Address" rows="2" cols="10"></textarea><br></br>
<label for='destination'>Select Catetory: </label>
<select id="designation" name="designation">
<option value="Gratuate Engineering Trainee">Gratuate Engineering Trainee</option>
<option value="Software Engineer">Software Engineer</option>
<option value="Developer">Developer</option>
<option value="others">others</option>
</select>
<br /><br />
<input type="button" id="add" value="Add" onclick="addUser()" />
<input type="button" id="update" value="Update" onclick="updateUser(selectedUserId)" /><br /><br />
<label for='selectToShow'>Show: </label>
<select id="selectToShow" onchange="showFilteredData()">
<option value="All">All</option>
<option value="Gratuate Engineering Trainee">Gratuate Engineering Trainee</option>
<option value="Software Engineer">Software Engineer</option>
<option value="Developer">Developer</option>
<option value="others">others</option>
</select><br></br>
<div id="display">
</div>Live demo here: https://codepen.io/dreambold/pen/poZyjbz?editors=1011
CodePudding user response：
First of all, you have to assign your variables when the document is ready.
You try to access some elements which are not ready yet when you use document.getElementById
ex :
document.addEventListener("DOMContentLoaded",readyEvent);
var data = [];
var fnameInput;
var addressInput;
var designationInput;
var sel;
var messageBox;
function readyEvent(){
fnameInput = document.getElementById("fname");
addressInput = document.getElementById("address");
designationInput = document.getElementById("designation");
sel=document.getElementById("sel");
messageBox = document.getElementById("display");
}
I have not a lot of time now so, this is a partial and quick made answer...