0

The "add_button" calls the Function "AddRow()" which creates an element with the following structure:

<div id="task1">
  <input id="box1" type="checkbox">
  <input type="text" placeholder="write your task here")
  <button id="remove-button"> - </button>
</div>

"Remove-Row()" is called on the created Element in line 17 in logic.js

But when i press the " - " -Button (Picture 2) to remove the created all other elements in the container get wiped from the page and all other tings i entered too.

Picture 1. After adding a few Tasks

Picture 2. After pressing one of the " - " -Buttons

It's like the page reloaded, but i can't figure out why this happens. When i use the same code to update a list it works fine

index.html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Progress-Bar-</title>
  <script language="JavaScript" type="text/javascript" src="logic.js"></script>
  <link rel="stylesheet" href="styles/style.css" />
</head>

<body>
  <h1>-Progress-Bar-</h1>
  <div class="progress_bar_container">
    <progress id="progress_bar" max="100" value="70">70%</progress>
    <label for="progress_bar">File</label>
  </div>
  </div>
  <div class="ready"></div>
  <form id="task_container">
    <!--Tasks will be created here-->
  </form>
  <div id="add_button_container">
    <button id="add_button" onclick="AddRow()"> + Add a Task</button>
  </div>
</body>

</html>

logic.js:

const Adder = document.getElementById('add-button')
const Row = document.getElementById('task')

var RowCounter = 1;

console.log(Row);

function AddRow(){
    const task = document.createElement("div");
    task.id = "task" + RowCounter;
    const checkbox = document.createElement("input");
    checkbox.id = "box" + RowCounter;
    checkbox.type = "checkbox";
    const textinput = document.createElement("input");
    textinput.type = "text";
    textinput.placeholder = "write your task here";
    const removebutton = document.createElement("button");
    removebutton.id = "remove-button"
    removebutton.innerHTML = " - ";

    RowCounter++;

    task.appendChild(checkbox);
    task.appendChild(textinput);
    task.appendChild(removebutton);

    document.getElementById('task_container').appendChild(task);
    console.log(RowCounter);
}



function RemoveRow(RowCounter){
    const task = document.getElementById('task' + RowCounter);
    document.getElementById('task' + RowCounter).remove();
    RowCounter--;
    console.log(RowCounter);
}
ABEL
  • 1
  • 1
    "It's like the page reloaded, but i can't figure out why this happens." — You are clicking a submit button inside a form. – Quentin Jul 21 '22 at 20:32
  • Also note that nothing in this code links `RemoveRow` to the button: there is no `onclick`, no `addEventListener` and no `$element.on('click'...)`. And even if there was, `RemoveRow` does not prevent the default (by `preventDefault`, or by returning `false`) so the form would submit even if the function was getting invoked. – Amadan Jul 21 '22 at 20:36
  • Set the attribute `type` of remove button to `button` like `` to prevent reloading of page. – Zaeem Khaliq Jul 21 '22 at 20:38

0 Answers0