vendredi 1 octobre 2021

HTML Checkbox "onclick" Create Button issue

So i have following objectives from the checkbox click event
1] Create A Button having id = 'id-of-checkbox'+'some-character-here' in specified div
2] Clicking On That Particular Button Will Remove The Button As Well As Checkbox tick related to it
3] If User wants to remove button in specified div through unchecking the checkbox it should be done
4] And If User again checks the checkbox button should be created in specified div

Now i have achieved first 3 objectives and im having issue with 4th one , i.e
if i click on checkbox again after unticking it button is not getting created and console doesnt
return any error associated with it.. please help

Here Is My HTML Code

<div id="filterDropArea container">
  <input type="checkbox" name="priceFilter"  id="priceFilter" class="btn" onclick="updateValue(this.id,this.name)">
  Price Filter
</div>

<div id="DropArea">
  
</div>

Here is My Javascript Code


var objTo = document.getElementById('DropArea');
var checked = ""

function updateValue(id,name)
{
  if(document.getElementById(id).checked)
    {
         checked='yes'
    }
  else if(!document.getElementById(id).checked)
    {
      checked='no'
    }
  
  if(checked=='yes')
    {
      addButton(id,name);
    }
  else if(checked=='no')
    {
      removeButton(id,name);
    }
  
}

function addButton(id,name)
{
  var nameOfButton = name+'X';
var idofButton = id+'11';
var btn = document.createElement("BUTTON");
btn.innerHTML=nameOfButton;
btn.setAttribute("class","btnCancel");
btn.setAttribute("id",idofButton);
btn.setAttribute("onclick","someMsg(this.id)")

objTo.appendChild(btn);

}

function removeButton(id,name)
{
       
var idofButton = id+'11'
if(document.getElementById('DropArea').contains(document.getElementById(idofButton)))
{
document.getElementById('DropArea').remove(document.getElementById(idofButton));
console.log('Button Removed');
      
    }
}
function someMsg(id)
{
var name = id.substring(0,id.length-2);
document.getElementById(id).remove();
document.getElementById(name).checked=false;
console.log('Deleted');
}







Aucun commentaire:

Enregistrer un commentaire