I trying to make a web application but there is a small problem in checkbox. whenever I select the checkbox it gives me output saying undefined. I want to delete the content with delete button when checkbox is selected I am not able to catch the problem what exactly causing it can anyone explain me. need Help
var btnAdd = document.getElementById("add");
var btnRem = document.getElementById("rem");
var container = document.getElementById("cont");
var frm = document.getElementById("frm");
btnAdd.addEventListener("click", () => {
var x = document.getElementById("txt").value;
var y = document.getElementById("country");
var h = document.getElementById("country").value;
var element4 = document.createElement("input");
element4.type = "checkbox";
element4.id = "check";
if (!x || !h) {
} else {
if (y.selectedIndex == 0) {
} else {
var base = document.createElement("div");
var b = container.appendChild(base);
b.id = "base";
var element = document.createElement("div");
var d = b.appendChild(element);
d.appendChild(element4);
var element1 = document.createElement("input");
d.appendChild(element1);
element1.value = x;
element1.id = "text2";
element1.readOnly = true;
var array = new Array();
for (var i = 0; i < y.length; i++) {
array.push(y.options[i].text);
}
var element = document.createElement("div");
var d1 = b.appendChild(element);
var element2 = document.createElement("select");
var O = d1.appendChild(element2);
for (var j = 1; j < array.length; j++) {
O.innerHTML +=
"<option value=" + array[j] + ">" + array[j] + "</option>";
}
O.value = h;
frm.reset();
y.selectedIndex = 0;
}
}
btnRem.addEventListener("click",()=>{
var g = document.getElementById("check").checked;
if ( g == true ) {
alert( this.value )
this.parentElement.parentElement.remove();
;
}
})
});*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
input,button{
border-radius: none;
outline: none;
border: 1px solid black;
}
.select-country{
max-width: 100%;
}
.container{
max-width: 80%;
margin: 0 auto;
padding-top: 50px;
}
.container-1{
max-width: 50%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
form{
max-width: initial;
}
.container-1 :first-child{
flex: 3;
}
.container-1 div{
flex: 1;
}
.container-1 div input,.container-1 div select{
min-width: 100%;
padding: 5px 0;
}
#add,#rem{
min-width: 100%;
padding: 5px 0;
}
.container-2{
max-width: 50%;
margin: 0 auto;
padding-top: 50px;
}
.container-2 #base{
display: flex;
padding: 10px 0;
}
.container-2 :first-child{
flex: 3;
display: flex;
}
.container-2 :first-child #check{
flex: 0.1;
padding: 5px 0;
}
.container-2 :first-child #text2{
flex: 3;
padding: 5px 0;
}
.container-2 div{
flex: 1;
}
.container-2 div select{
padding: 5px 0;
min-width: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="select-country">
<div class="container">
<div class="container-1">
<div>
<form action="" id="frm"><input type="text" id="txt" /></form>
</div>
<div>
<form action="" id="frm" onsubmit="return false">
<select id="country">
<option value="select-country" selected disabled>
select country
</option>
<option value="India">India</option>
<option value="S.Korea">S.Korea</option>
<option value="China">China</option>
<option value="UAE">UAE</option>
<option value="finland">finland</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
<option value="UK">UK</option>
<option value="Bhutan">Bhutan</option>
<option value="USA">USA</option>
<option value="Austrailia">Austrailia</option>
</select>
</form>
</div>
<div>
<button id="add" type="submit">Add</button>
</div>
<div>
<button id="rem" type="submit">Delete</button>
</div>
</div>
<div class="container-2" id="cont"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire