OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Not able to understand why there is an extra delete button

  • Thread starter Thread starter Debdwaipayan Biswas
  • Start date Start date
D

Debdwaipayan Biswas

Guest
enter image description here` When adding the 1st task in the to do list the code generates an extra button but works fine when I add subsequent tasks, I am not sure where is the problem.

I am taking the tasks from the querySelector from the input placeholder and the date from the input date in the html file. When the add button is clicked it would trigger the todo() that will carry out all the necessary required opreations.

The html and JS code is as follows: HTML:

Code:
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-do List</title>
</head>
<body>
    <link rel="stylesheet" href="./todo.css">


    <p>To Do List</p>
    <input class="js-input" placeholder="Add any task to the list">
    <input type="date" class="js-date">
    <button onclick="
    todo()
    ">Add</button>

    <div class="js-display">
    </div>
    <script src="./todo.js"></script>
</body>
</html>

Javascript:

Code:
let tasks=[{
    task:'',
    date:''
}];
let displayhtml=''
function todo()
{
    let inputEle = document.querySelector('.js-input');
    let inputEleDate=document.querySelector('.js-date');
    const date=inputEleDate.value;
    const task=inputEle.value;
    console.log(task);
    console.log(date);
    tasks.push(
        {
            task:task,
            date:date
        }
    );
    console.log(tasks);
    inputEle.value="";
    for(let i=0;i<tasks.length;i++)
        {
            const eletask=tasks[i].task;
            const eledate=tasks[i].date;
            let html=`
            <p>${eletask}   ${eledate} <button onclick="deleteToDo(${i})">Delete</button> </p>
            `;
            console.log(html);
            displayhtml+=html;  
            document.querySelector('.js-display').innerHTML=displayhtml; 
        }
        displayhtml=''
};

function deleteToDo(i)
{
    tasks.slice(i,1)
    console.log(tasks)
}

<p><a href="https://i.sstatic.net/g2wiAdIz.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/g2wiAdIz.png" alt="enter image description here" /></a>`
When adding the 1st task in the to do list the code generates an extra button but works fine when I add subsequent tasks, I am not sure where is the problem.</p>
<p>I am taking the tasks from the querySelector from the input placeholder and the date from the input date in the html file.
When the add button is clicked it would trigger the todo() that will carry out all the necessary required opreations.</p>
<p>The html and JS code is as follows:
HTML:</p>
<pre><code><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-do List</title>
</head>
<body>
<link rel="stylesheet" href="./todo.css">


<p>To Do List</p>
<input class="js-input" placeholder="Add any task to the list">
<input type="date" class="js-date">
<button onclick="
todo()
">Add</button>

<div class="js-display">
</div>
<script src="./todo.js"></script>
</body>
</html>
</code></pre>
<p>Javascript:</p>
<pre><code>let tasks=[{
task:'',
date:''
}];
let displayhtml=''
function todo()
{
let inputEle = document.querySelector('.js-input');
let inputEleDate=document.querySelector('.js-date');
const date=inputEleDate.value;
const task=inputEle.value;
console.log(task);
console.log(date);
tasks.push(
{
task:task,
date:date
}
);
console.log(tasks);
inputEle.value="";
for(let i=0;i<tasks.length;i++)
{
const eletask=tasks.task;
const eledate=tasks.date;
let html=`
<p>${eletask} ${eledate} <button onclick="deleteToDo(${i})">Delete</button> </p>
`;
console.log(html);
displayhtml+=html;
document.querySelector('.js-display').innerHTML=displayhtml;
}
displayhtml=''
};

function deleteToDo(i)
{
tasks.slice(i,1)
console.log(tasks)
}
</code></pre>
 
Top