Javascript - why in my code addEventlistener needs 2 click to work and display alert

Mehdi
May 29, 2023
138 views
0 votes
2 Answers

just new with javascript coding. I have written a simple to-do-list everything seems working fine except that the eventListener button Click of function CheckAddBtn() does not work the 1rst time but only works and show the expected alert window after 2 clicks. Below code would be very gratefull if someone can help and explain
thanks a lot

—————————-HTML Part——————

<!DOCTYPE html>
<html lang="fr-FR">
<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">
    <link rel="stylesheet" href="css/todolist.css">
    <script src="todolist.js" defer></script>
    <title>todolist</title>
</head>
<body onload="addList()">
    <div class="container" id="container2">
        <div class="row">
             <input type="text" class="todolist" id="todolist2" placeholder=" Add your text here"/>
             <label for="todolist2">Pls Enter List To Do</label>
             <button type='button' id='btn' class="btn" onclick="addList()">Add</button>
        </div>
        
        <div class="todolistcontainer" id="todolistcontainer2">
            <ul class="listingtodo" id="listingtodo2">
              
            </ul>
        </div>
    </div>

    
</body>
</html>

—————————————-Javascript Part——————-

const Btn = document.getElementById('btn')
const listBox = document.getElementById('listingtodo2')
const CheckBox = document.getElementsByClassName('checkbox')
const inputText = document.getElementById('todolist2')
let i = 0
var clicked = false
inputText.value =''  




function AddRemoveList(){  
    listBox.addEventListener('click', function(e){
        if (e.target.tagName === 'INPUT'){e.target.parentElement.classList.toggle('checked')
        SaveTasks()
    } else if (e.target.tagName === 'SPAN'){e.target.parentElement.remove(), false}
    SaveTasks()
    })
    }

function CheckAddBtn(){
    Btn.addEventListener('click', function ChkClick(){
        clicked = true}
    )
}

function SaveTasks(){
    localStorage.setItem('data', listingtodo2.innerHTML)

}

function ShowTaskAgain(){
    listingtodo2.innerHTML = localStorage.getItem('data')
}

AddRemoveList() 

function addList(){
    SaveTasks()
    CheckAddBtn() 
    
    if (inputText.value ==='' && clicked === true){
        {alert('pls add a todo thing')
        clicked = false
        return}
    } 
  
    else if (inputText.value !=''){
        i++
        let li = document.createElement('li');
        li.innerText = inputText.value
        listBox.appendChild(li);
        li.classList.add('thelists')

        let checkBox = document.createElement('input') 
        checkBox.setAttribute('type','checkbox')
        checkBox.setAttribute('id','Createdcheckbox' + i)
        li.appendChild(checkBox)
        checkBox.classList.add('checkbox')

        let cross = document.createElement('span')
        cross.innerHTML = '&#10006'
        li.appendChild(cross)
        cross.classList.add('removecross')
        inputText.value =''  
    }  
    SaveTasks()
}

ShowTaskAgain()

—————————————-css Part——————

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body{
    background: cadetblue;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    height: 100vh;
}


div.container{
    box-shadow: 5px -5px 15px 5px rgba(14, 75, 45, 0.6);
    position: relative;
    display: block;
    user-select: none;
    font-size: 20px;
    color: rgba(69, 72, 61, 0.8);
    height: 450px;
    width: 550px;
    border-radius: 5px;
    background: rgba(249, 249, 247, 0.5);
    overflow: auto;
       
}

div.container .row{
    position: absolute;
    top: 10%;
    left: 10%;
    font-size: 20px;
    color: rgba(69, 72, 61, 0.8);
    height: 450px;
    width: 550px;
    border-radius: 5px;
    background: rgba(249, 249, 247, 0.5);
}

div.container .row>input{
    position: absolute;
    top: 10%;
    left: 0%;
    width: 375px;
    height: 30px;
    border: none;
    outline: none;
    border-radius: 5px;
}

div.container .row .btn{
    position: absolute;
    cursor: pointer;
    font-size: 20px;
    color: rgba(69, 72, 61, 0.8);
    top: 10%;
    left: 385px;
    width: 70px;
    height: 30px;
    outline: none;
    border-radius: 5px;
    background: rgba(255, 185, 0, 1);
    transition: background 300ms ease-in-out;
}

div.container .row .btn:hover{
    
    background: rgb(155, 115, 4);
}

div.container .row >input::placeholder{
    color: rgba(0, 0, 0, 0.3);
  
}

div.container .row > label{
    position: absolute;
    left: 0px;
    top: 35px;
}

div.container .todolistcontainer{
    position: absolute;
    top: 40%;
    left: 10%;
    width: 450px;
    border-radius: 5px;
    height: auto;
    background: rgba(49, 94, 209, 0.8);
    
}

div.container .row{
    position: absolute;
    top: 10%;
    left: 10%;
    width: 450px;
    height: auto;
}

div.container .todolistcontainer .listingtodo{
    display: block;
    word-wrap: break-word;
    word-break: break-all;
    height: auto;
    width: auto;
    list-style-type: none;
    
}

.checkbox{
    
    position: absolute;
    right: 412px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 15px;
    cursor: pointer;
    vertical-align: middle;
    line-height: 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    appearance: none;
    background-color: antiquewhite;
}

.checkbox:checked{
    background-image: url(../image/checksign.jpg);
    background-position: center;
    background-size: cover;
}

.checked{
    text-decoration: line-through;
}

.thelists{
    border: 2px solid white;
    padding-bottom: 2px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: block;
    margin-left: 28px;
    margin-right: 10px;
    width: auto;
    height: auto;
    line-height: 1.5em;
}

.removecross{
    position: absolute;
    text-align: center;
    cursor: pointer;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 15px;
    object-fit: fill;
    vertical-align: middle;
    line-height: 20px;
    left: 460px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    background: rgba(199, 211, 208, 0.7);
}

.removecross:hover{
    background: rgba(127, 134, 132, 0.7);
    transition: background 300ms ease-in-out;
}

Tags: addeventlistener javascript

Answers

The problem occurs because of the conflict between the inline event handler and the event listener.
You have two options to solve this problem.
the first one is related to <body onload="addList()">
why you are adding to the list on page load?
if there is no important reason for it you can just remove it and remove the CheckAddBtn function.
the second option is to remove the inline event handler from the button:

<button type='button' id='btn' class="btn">Add</button>

And get the Btn.addEventListener out of CheckAddBtn and Add your checking and call addList() in it.

Btn.addEventListener('click', function ChkClick(){
        if (inputText.value ===''){
            alert('pls add a todo thing');
            return;
        } 
        addList();
    })

Then remove the checking from addList().

function addList(){
    SaveTasks()
    if (inputText.value !=''){
        i++
        let li = document.createElement('li');
        li.innerText = inputText.value
        listBox.appendChild(li);
        li.classList.add('thelists')

        let checkBox = document.createElement('input') 
        checkBox.setAttribute('type','checkbox')
        checkBox.setAttribute('id','Createdcheckbox' + i)
        li.appendChild(checkBox)
        checkBox.classList.add('checkbox')

        let cross = document.createElement('span')
        cross.innerHTML = '&#10006'
        li.appendChild(cross)
        cross.classList.add('removecross')
        inputText.value =''  
    }  
    SaveTasks()
}

This is the result:

const Btn = document.getElementById('btn')
const listBox = document.getElementById('listingtodo2')
const CheckBox = document.getElementsByClassName('checkbox')
const inputText = document.getElementById('todolist2')
let i = 0
var clicked = false
inputText.value = ''




function AddRemoveList() {
  listBox.addEventListener('click', function(e) {
    if (e.target.tagName === 'INPUT') {
      e.target.parentElement.classList.toggle('checked')
      SaveTasks()
    } else if (e.target.tagName === 'SPAN') {
      e.target.parentElement.remove(), false
    }
    SaveTasks()
  })
}

Btn.addEventListener('click', function ChkClick() {
  if (inputText.value === '') {
    alert('pls add a todo thing');
    return;
  }
  addList();
})
/*function CheckAddBtn(){
    clicked = true;
}*/

function SaveTasks() {
  localStorage.setItem('data', listingtodo2.innerHTML)

}

function ShowTaskAgain() {
  listingtodo2.innerHTML = localStorage.getItem('data')
}

AddRemoveList()

function addList() {
  SaveTasks()
  if (inputText.value != '') {
    i++
    let li = document.createElement('li');
    li.innerText = inputText.value
    listBox.appendChild(li);
    li.classList.add('thelists')

    let checkBox = document.createElement('input')
    checkBox.setAttribute('type', 'checkbox')
    checkBox.setAttribute('id', 'Createdcheckbox' + i)
    li.appendChild(checkBox)
    checkBox.classList.add('checkbox')

    let cross = document.createElement('span')
    cross.innerHTML = '&#10006'
    li.appendChild(cross)
    cross.classList.add('removecross')
    inputText.value = ''
  }
  SaveTasks()
}

ShowTaskAgain()

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

body {
  background: cadetblue;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-items: center;
  height: 100vh;
}

div.container {
  box-shadow: 5px -5px 15px 5px rgba(14, 75, 45, 0.6);
  position: relative;
  display: block;
  user-select: none;
  font-size: 20px;
  color: rgba(69, 72, 61, 0.8);
  height: 450px;
  width: 550px;
  border-radius: 5px;
  background: rgba(249, 249, 247, 0.5);
  overflow: auto;
}

div.container .row {
  position: absolute;
  top: 10%;
  left: 10%;
  font-size: 20px;
  color: rgba(69, 72, 61, 0.8);
  height: 450px;
  width: 550px;
  border-radius: 5px;
  background: rgba(249, 249, 247, 0.5);
}

div.container .row>input {
  position: absolute;
  top: 10%;
  left: 0%;
  width: 375px;
  height: 30px;
  border: none;
  outline: none;
  border-radius: 5px;
}

div.container .row .btn {
  position: absolute;
  cursor: pointer;
  font-size: 20px;
  color: rgba(69, 72, 61, 0.8);
  top: 10%;
  left: 385px;
  width: 70px;
  height: 30px;
  outline: none;
  border-radius: 5px;
  background: rgba(255, 185, 0, 1);
  transition: background 300ms ease-in-out;
}

div.container .row .btn:hover {
  background: rgb(155, 115, 4);
}

div.container .row>input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

div.container .row>label {
  position: absolute;
  left: 0px;
  top: 35px;
}

div.container .todolistcontainer {
  position: absolute;
  top: 40%;
  left: 10%;
  width: 450px;
  border-radius: 5px;
  height: auto;
  background: rgba(49, 94, 209, 0.8);
}

div.container .row {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 450px;
  height: auto;
}

div.container .todolistcontainer .listingtodo {
  display: block;
  word-wrap: break-word;
  word-break: break-all;
  height: auto;
  width: auto;
  list-style-type: none;
}

.checkbox {
  position: absolute;
  right: 412px;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 15px;
  cursor: pointer;
  vertical-align: middle;
  line-height: 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  appearance: none;
  background-color: antiquewhite;
}

.checkbox:checked {
  background-image: url(../image/checksign.jpg);
  background-position: center;
  background-size: cover;
}

.checked {
  text-decoration: line-through;
}

.thelists {
  border: 2px solid white;
  padding-bottom: 2px;
  margin-top: 15px;
  margin-bottom: 15px;
  display: block;
  margin-left: 28px;
  margin-right: 10px;
  width: auto;
  height: auto;
  line-height: 1.5em;
}

.removecross {
  position: absolute;
  text-align: center;
  cursor: pointer;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 15px;
  object-fit: fill;
  vertical-align: middle;
  line-height: 20px;
  left: 460px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: middle;
  background: rgba(199, 211, 208, 0.7);
}

.removecross:hover {
  background: rgba(127, 134, 132, 0.7);
  transition: background 300ms ease-in-out;
}

<!DOCTYPE html>
<html>

<body onload="addList()">
  <div class="container" id="container2">
    <div class="row">
      <input type="text" class="todolist" id="todolist2" placeholder=" Add your text here" />
      <label for="todolist2">Pls Enter List To Do</label>
      <button type='button' id='btn' class="btn">Add</button>
    </div>

    <div class="todolistcontainer" id="todolistcontainer2">
      <ul class="listingtodo" id="listingtodo2">

      </ul>
    </div>
  </div>
</body>

</html>

You don’t need onload="addList()" property in your HTML body, because addList() will be added later by onclick="addList()" property in Button.
And since you are calling add_List() there, you don’t need to eval clicked variable, just check if your inputText.value is empty or not to proceed.

It’ll be like this (unnecessary function and eval were commented or removed):

const Btn = document.getElementById('btn')
const listBox = document.getElementById('listingtodo2')
const CheckBox = document.getElementsByClassName('checkbox')
const inputText = document.getElementById('todolist2')
//var clicked = false
let i = 0
inputText.value =''  




function AddRemoveList(){  
    listBox.addEventListener('click', function(e){
        if (e.target.tagName === 'INPUT'){e.target.parentElement.classList.toggle('checked')
        SaveTasks()
    } else if (e.target.tagName === 'SPAN'){e.target.parentElement.remove(), false}
    SaveTasks()
    })
    }

/*function CheckAddBtn(){
    Btn.addEventListener('click', function ChkClick(){
        clicked = true}
    )
}*/

function SaveTasks(){
    localStorage.setItem('data', listingtodo2.innerHTML)

}

function ShowTaskAgain(){
    listingtodo2.innerHTML = localStorage.getItem('data')
}

AddRemoveList() 

function addList(){
    //SaveTasks()
    //CheckAddBtn()
    if (inputText.value === ''){
        {alert('pls add a todo thing')
        clicked = false
        return}
    }
    else {
        i++
        let li = document.createElement('li');
        li.innerText = inputText.value
        listBox.appendChild(li);
        li.classList.add('thelists')

        let checkBox = document.createElement('input') 
        checkBox.setAttribute('type','checkbox')
        checkBox.setAttribute('id','Createdcheckbox' + i)
        li.appendChild(checkBox)
        checkBox.classList.add('checkbox')

        let cross = document.createElement('span')
        cross.innerHTML = '&#10006'
        li.appendChild(cross)
        cross.classList.add('removecross')
        inputText.value =''  
    }  
    SaveTasks()
}

ShowTaskAgain()

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body{
    background: cadetblue;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    height: 100vh;
}


div.container{
    box-shadow: 5px -5px 15px 5px rgba(14, 75, 45, 0.6);
    position: relative;
    display: block;
    user-select: none;
    font-size: 20px;
    color: rgba(69, 72, 61, 0.8);
    height: 450px;
    width: 550px;
    border-radius: 5px;
    background: rgba(249, 249, 247, 0.5);
    overflow: auto;
       
}

div.container .row{
    position: absolute;
    top: 10%;
    left: 10%;
    font-size: 20px;
    color: rgba(69, 72, 61, 0.8);
    height: 450px;
    width: 550px;
    border-radius: 5px;
    background: rgba(249, 249, 247, 0.5);
}

div.container .row>input{
    position: absolute;
    top: 10%;
    left: 0%;
    width: 375px;
    height: 30px;
    border: none;
    outline: none;
    border-radius: 5px;
}

div.container .row .btn{
    position: absolute;
    cursor: pointer;
    font-size: 20px;
    color: rgba(69, 72, 61, 0.8);
    top: 10%;
    left: 385px;
    width: 70px;
    height: 30px;
    outline: none;
    border-radius: 5px;
    background: rgba(255, 185, 0, 1);
    transition: background 300ms ease-in-out;
}

div.container .row .btn:hover{
    
    background: rgb(155, 115, 4);
}

div.container .row >input::placeholder{
    color: rgba(0, 0, 0, 0.3);
  
}

div.container .row > label{
    position: absolute;
    left: 0px;
    top: 35px;
}

div.container .todolistcontainer{
    position: absolute;
    top: 40%;
    left: 10%;
    width: 450px;
    border-radius: 5px;
    height: auto;
    background: rgba(49, 94, 209, 0.8);
    
}

div.container .row{
    position: absolute;
    top: 10%;
    left: 10%;
    width: 450px;
    height: auto;
}

div.container .todolistcontainer .listingtodo{
    display: block;
    word-wrap: break-word;
    word-break: break-all;
    height: auto;
    width: auto;
    list-style-type: none;
    
}

.checkbox{
    
    position: absolute;
    right: 412px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 15px;
    cursor: pointer;
    vertical-align: middle;
    line-height: 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    appearance: none;
    background-color: antiquewhite;
}

.checkbox:checked{
    background-image: url(../image/checksign.jpg);
    background-position: center;
    background-size: cover;
}

.checked{
    text-decoration: line-through;
}

.thelists{
    border: 2px solid white;
    padding-bottom: 2px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: block;
    margin-left: 28px;
    margin-right: 10px;
    width: auto;
    height: auto;
    line-height: 1.5em;
}

.removecross{
    position: absolute;
    text-align: center;
    cursor: pointer;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 15px;
    object-fit: fill;
    vertical-align: middle;
    line-height: 20px;
    left: 460px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    background: rgba(199, 211, 208, 0.7);
}

.removecross:hover{
    background: rgba(127, 134, 132, 0.7);
    transition: background 300ms ease-in-out;
}

<!DOCTYPE html>
<html lang="fr-FR">
<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">
    <link rel="stylesheet" href="css/todolist.css">
    <script src="todolist.js" defer></script>
    <title>todolist</title>
</head>
<body>
    <div class="container" id="container2">
        <div class="row">
             <input type="text" class="todolist" id="todolist2" placeholder=" Add your text here"/>
             <label for="todolist2">Pls Enter List To Do</label>
             <button type='button' id='btn' class="btn" onclick="addList()">Add</button>
        </div>
        
        <div class="todolistcontainer" id="todolistcontainer2">
            <ul class="listingtodo" id="listingtodo2">
              
            </ul>
        </div>
    </div>

    
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – why in my code addEventlistener needs 2 click to work and display alert

Answers