Updating an array without index - javascript

I was unsure how exactly to phrase this in the title. I've made a todo list and I'm working on making the todo items editable. Through the displayTodo function, I've been able to make the li items editable in the DOM, but I would like this change to be reflected in the todoList array as well when I hit the save button. I'm unsure of how exactly I would be able to make this work. I was thinking of the splice method, but I don't know how that would work in this situation since I would need to pass in the index.
// Global Variables
const input = document.querySelector('.input');
const addBtn = document.querySelector('.add-btn');
const removeBtn = document.querySelector('.remove-btn');
const todos = document.querySelector('.todos');
// Event Listeners
addBtn.addEventListener('click', addTodo);
removeBtn.addEventListener('click', removeTodo);
const todoList = [
]
function addTodo() {
// Push user input to array
let inputValue = input.value;
todoList.push(inputValue);
displayTodo();
input.value = '';
console.log(todoList);
}
function removeTodo() {
let listItems = document.querySelectorAll('.todos li');
// Remove last todo from array
todoList.splice(-1, 1);
// Remove last todo from ul
todos.removeChild(listItems[listItems.length - 1]);
//console.log(todoList);
}
function displayTodo() {
// Create li and display it
let newTodo = document.createElement('li');
newTodo.textContent = input.value;
todos.appendChild(newTodo);
// Create edit button and display it
let editButton = document.createElement('button');
editButton.textContent = 'Edit';
newTodo.appendChild(editButton);
editButton.addEventListener('click', function() {
// Create edit input and save button
editButton.style.opacity = 0;
editButton.style.visibility = 'hidden';
let editInput = document.createElement('input');
newTodo.appendChild(editInput);
let saveButton = document.createElement('button');
newTodo.appendChild(saveButton);
saveButton.textContent = 'Save';
saveButton.addEventListener('click', function() {
newTodo.textContent = editInput.value;
console.log(todoList);
})
});
}
<!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">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Todo List</title>
</head>
<body>
<div class="container">
<h1>Todo List</h1>
<input class="input" type="text" placeholder="Add A Task" autocomplete="off" required>
<button class="add-btn">Add Task</button>
<button class="remove-btn">Remove Task</button>
<ul class="todos">
</ul>
</div>
</body>
</html>

First of all, In editButton.addEventListener('click', function() {}, get the text content of the <li> element that has to be edited. The text content has the word 'Edit' appended to the list element and hence removing it in the second line. Get the index of the array element whole value is liValue using indexOf property.
let liValue = newTodo.textContent;
liValue = liValue.replace('Edit', '');
let liIndex = todoList.indexOf(liValue);
In saveButton.addEventListener('click', function () {}, after updating the DOM, use splice() to update the array list.
todoList.splice(liIndex, 1, editInput.value);
I have added the function in which the changes are done. The parts of the code that has to be added are commented down below.
editButton.addEventListener('click', function () {
// Create edit input and save button
editButton.style.opacity = 0;
editButton.style.visibility = 'hidden';
/* first part of the code starts here */
let liValue = newTodo.textContent;
liValue = liValue.replace('Edit', '');
let liIndex = todoList.indexOf(liValue);
/* first part of the code ends here */
let editInput = document.createElement('input');
newTodo.appendChild(editInput);
let saveButton = document.createElement('button');
newTodo.appendChild(saveButton);
saveButton.textContent = 'Save';
saveButton.addEventListener('click', function () {
newTodo.textContent = editInput.value;
/* second part of the code starts here */
todoList.splice(liIndex, 1, editInput.value);
/* second part of the code ends here */
})
});
Link to codepen: https://codepen.io/geekyquentin/pen/LYQdjXw

Related

Why is the done button not working properly?

Apparently I'm trying to create a todo list where I can ofcourse add and remove the tasks. Adding tasks works fine; however clicking on the Done Button works but doesn't do what I want it to do. Basically I have a Logical Error, but I don't know what to do to fix it.
The Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>To-Do List</h1>
<form id="todoForm">
<input id="todoInput" />
<button type="button" onclick="todoList()">New</button>
<button type="button" onclick="">Retrieve</button>
</form>
<ol id="todoList"></ol>
<script>
var todos = []; //Problem is from here
var removed = [];
function todoList() {
var item = document.getElementById("todoInput").value;
todos.push(item);
var text = document.createTextNode(item);
var newItem = document.createElement("li");
newItem.innerHTML = item + ' <button id="Done">Done</button>';
document.getElementById("todoList").appendChild(newItem);
const donebtn = document.getElementById("Done");
donebtn.addEventListener("click", function() {
removetodo(newItem, item)
});
}
function removetodo(item, tasktext) {
const tasklist = document.getElementById("todoList");
tasklist.removeChild(item);
removed.push(tasktext);
}
</script>
</body>
</html>
Thing is, I tried finding solutions to it on Google and other places; yet, I still didnt know how to fix it. I dont want to just change the whole code so it could work. I specifically wanted it in the way I wrote it in
newItem.innerHTML = item + ' Done'; I changed this line the problem was that you are assigning the same id's to all done so I used a count variable which is at the start 0 when you run function if will 0 like done0 when the function run it will increase count++ will increase it next time it will be done1 so your code will work correctly
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>To-Do List</h1>
<form id="todoForm">
<input id="todoInput" />
<button type="button" onclick="todoList()">New</button>
<button type="button" onclick="">Retrieve</button>
</form>
<ol id="todoList"></ol>
<script>
var todos = []; //Problem is from here
var removed = [];
let count = 0;
function todoList() {
var item = document.getElementById("todoInput").value;
todos.push(item);
var text = document.createTextNode(item);
var newItem = document.createElement("li");
newItem.innerHTML = item + ' <button id="Done'+count+'">Done</button>';
document.getElementById("todoList").appendChild(newItem);
const donebtn = document.getElementById("Done"+count);
donebtn.addEventListener("click", function(){
removetodo(newItem, item)
});
count++;
}
function removetodo(item, tasktext) {
const tasklist = document.getElementById("todoList");
tasklist.removeChild(item);
removed.push(tasktext);
}
</script>
</body>
</html>
one more suggestion
newItem.innerHTML = item + ' <button id="Done'+count+'">Done</button>';
document.getElementById("todoList").appendChild(newItem);
const donebtn = document.getElementById("Done"+count);
donebtn.addEventListener("click", function(){
here in your code const donebtn = document.getElementById("Done"+count); you don't need this line just donebtn.addEventListener("click", function(){ here insted of donebtn you can use newItem.addEventListener and then append it
document.getElementById("todoList").appendChild(newItem); at the last use this.
newItem.innerHTML = item + ' <button id="Done'+count+'">Done</button>';
newItem.addEventListener("click", function(){}
document.getElementById("todoList").appendChild(newItem);
like this
This code will only run when your function is called.
const donebtn = document.getElementById("Done");
donebtn.addEventListener("click", function() {
removetodo(newItem, item)
});
you should put it outside the functions to attach the listener.
The first issue with the code is that when you remove the task from the list, it's not actually removing it from the todos array. To fix this, you can add the following line after removing the task from the list:
todos.splice(todos.indexOf(tasktext), 1);
The second issue is that you are using the same id for all the "Done" <button> elements, in the HTML markup, IDs should be unique. So when you use document.getElementById("Done"), it always returns the first element with that id.
To fix this issue, you can use a class instead of an id and query for all elements with that class and attach an event listener to each button individually.
Updated code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>To-Do List</h1>
<form id="todoForm">
<input id="todoInput" />
<button type="button" onclick="todoList()">New</button>
<button type="button" onclick="">Retrieve</button>
</form>
<ol id="todoList"></ol>
<script>
var todos = [];
var removed = [];
function todoList() {
let item = document.getElementById("todoInput").value;
todos.push(item);
let text = document.createTextNode(item);
let newItem = document.createElement("li");
newItem.innerHTML = item + ' <button class="doneBtn">Done</button>';
document.getElementById("todoList").appendChild(newItem);
const donebtn = newItem.getElementsByClassName("doneBtn")[0];
donebtn.addEventListener("click", function() {
removetodo(newItem, item);
});
}
function removetodo(item, tasktext) {
const tasklist = document.getElementById("todoList");
tasklist.removeChild(item);
removed.push(tasktext);
todos.splice(todos.indexOf(tasktext), 1);
}
</script>
</body>
</html>
Each time a new task is added, all the "Done" buttons have the same id, which is not allowed in HTML as id values must be unique within a page. This means that only the first "Done" button will respond to the click event, and all the others will be ignored.
One way you can try is to store the task text in a data attribute of the "Done" button, and use it in the removetodo function to identify the task to remove like so ...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>To-Do List</h1>
<form id="todoForm">
<input id="todoInput" />
<button type="button" onclick="todoList()">New</button>
<button type="button" onclick="">Retrieve</button>
</form>
<ol id="todoList"></ol>
<script>
var todos = [];
var removed = [];
function todoList() {
var item = document.getElementById("todoInput").value;
todos.push(item);
var text = document.createTextNode(item);
var newItem = document.createElement("li");
newItem.innerHTML = item + ' <button class="Done">Done</button>';
document.getElementById("todoList").appendChild(newItem);
const donebtn = newItem.getElementsByClassName("Done")[0];
donebtn.addEventListener("click", function() {
removetodo(newItem, item)
});
donebtn.setAttribute("data-task", item);
}
function removetodo(item, tasktext) {
const tasklist = document.getElementById("todoList");
tasklist.removeChild(item);
removed.push(tasktext);
}
</script>
</body>

How to put the edited contents on to do list

I'm a beginner web dev learner and I'm trying to create a to-do list app by vanilla JS.
I created some main functions but now I'm stucking in 2 points.
1st.
I created an "edit" button. this button adds input textbox element into li element that surrounds each to-do task by using a map method.However, I can't come up with a proper way to replace an original wrtten tasks with a text contents in input textboxes when I finish editing.
So, I would like you to tell me how to write a "compEdit" function in the source code below.
2nd
When I add several tasks and push an edit button of other than 1st task, too many input text boxes are created.Probably, the number of created textboxes is as same amount as the element in arrayItems.
I suppose using map method itself is a wrong aproach.But I can't come up with a good alternative.
I'll be glad if someone tell me a proper way and why the bug in 2nd question happens.
Source code is here
//grab the elements
const todoText = document.getElementsByClassName('todo-text')[0];
const todoBtn = document.getElementsByClassName('todo-btn')[0];
const inputTask = document.getElementsByClassName('input-task')[0];
const arrayItems = [];
//function to add tasks
const addTask = (task) => {
const listItem = document.createElement('li');
const showItem = inputTask.appendChild(listItem);
showItem.innerHTML = task;
listItem.classList.add('list-item');
arrayItems.push(listItem);
//create a delete button
const deleteBtn = document.createElement('button');
deleteBtn.innerHTML = 'delete';
listItem.appendChild(deleteBtn);
//call a function when the button will be clicked
deleteBtn.addEventListener('click', () => {
deleteTask(deleteBtn);
});
//create an edit button
const editBtn = document.createElement('button');
editBtn.innerHTML = 'edit';
listItem.appendChild(editBtn);
//call a function when the button will be clicked
editBtn.addEventListener('click', () => {
editTask(arrayItems, listItem);
});
};
const deleteTask = (deleteBtn) => {
const chosenItem = deleteBtn.closest('li');
inputTask.removeChild(chosenItem);
};
const editTask = (els = [], inputTask) => {
//create a textbox into list items
inputTask.innerHTML = els.map((el, i) => {
return `
<input type="text" class="editing-text[${i}]" name="item[${i}]" required>
<input type="submit" class="complete-btn" value="complete">
`
});
//grab the elements of "edit button" and text into it
const editingText = document.getElementsByClassName('editing-text')[0];
const compBtn = document.getElementsByClassName('complete-btn')[0];
//the function to complete editing
const compEdit = () => {
}
compBtn.addEventListener('click', compEdit);
}
todoBtn.addEventListener('click', () => {
const task = todoText.value;
if(task == ''){
return;
}
addTask(task);
todoText.value = '';
});
<!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="/style.css">
</head>
<body>
<div class="wrap">
<header class="header">
<h1>Welcome!</h1>
</header>
<section class="add-todo">
<div class="list-title">
<h2>Add your task</h2>
</div>
<div class="contents-wrapper">
<div class="list-contents">
<input type="text" name="todo" class="todo-text">
<input type="submit" value="add" class="todo-btn">
</div>
</div>
</section>
<section class="current-tasks">
<div class="current-tasks__title">
<h3>current tasks</h3>
</div>
<div class="tasks-wrapper">
<ul class="input-task"></ul>
</div>
</section>
<footer></footer>
</div>
<script src="/main.js"></script>
</body>
</html>
When I add several tasks and push an edit button of other than 1st task, too many input text boxes are created
This is happening because as you add tasks, the number of elements are increasing, so the inputs are created on the basis of the number of li elements currently in the document. You can avoid this by using event.target which can be used to target each task element. I have shown an example with slight modification in your code.
//grab the elements
const todoText = document.getElementsByClassName("todo-text")[0];
const todoBtn = document.getElementsByClassName("todo-btn")[0];
const inputTask = document.getElementsByClassName("input-task")[0];
//function to add tasks
const addTask = (task) => {
const listItem = document.createElement("li");
const showItem = inputTask.appendChild(listItem);
const taskElem = document.createElement("span");
taskElem.innerHTML = task;
listItem.appendChild(taskElem);
listItem.classList.add("list-item");
//create a delete button
const deleteBtn = document.createElement("button");
deleteBtn.innerHTML = "delete";
listItem.appendChild(deleteBtn);
//call a function when the button will be clicked
deleteBtn.addEventListener("click", () => {
deleteTask(deleteBtn);
});
//create an edit button
const editBtn = document.createElement("button");
editBtn.innerHTML = "edit";
// add a class to identify
editBtn.classList.add("edit");
listItem.appendChild(editBtn);
//call a function when the button will be clicked
// editBtn.addEventListener("click", () => {
// // editTask(arrayItems, listItem);
// });
};
const deleteTask = (deleteBtn) => {
const chosenItem = deleteBtn.closest("li");
inputTask.removeChild(chosenItem);
};
inputTask.addEventListener("click", function(e) {
const target = e.target.classList.contains("edit"),
update = e.target.classList.contains("update");
if (target) {
let val = e.target.parentElement.firstChild.innerHTML;
// alert(val);
e.target.parentElement.innerHTML = `
<input type="text" name="todo" class="todo-text" value="${val}">
<input type="submit" value="update" class="todo-btn update">
`;
}
if (update) {
let updatedValue = e.target.previousElementSibling.value;
e.target.parentElement.innerHTML = `
<li class="list-item"><span>${updatedValue}</span><button>delete</button><button class="edit">edit</button></li>
`;
}
});
todoBtn.addEventListener("click", () => {
const task = todoText.value;
if (task == "") {
return;
}
addTask(task);
todoText.value = "";
});
<div class="wrap">
<header class="header">
<h1>Welcome!</h1>
</header>
<section class="add-todo">
<div class="list-title">
<h2>Add your task</h2>
</div>
<div class="contents-wrapper">
<div class="list-contents">
<input type="text" name="todo" class="todo-text">
<input type="submit" value="add" class="todo-btn">
</div>
</div>
</section>
<section class="current-tasks">
<div class="current-tasks__title">
<h3>current tasks</h3>
</div>
<div class="tasks-wrapper">
<ul class="input-task"></ul>
</div>
</section>
<footer></footer>
</div>

Creating a soundtrack app in JavaScript to search and display tracks

I'm trying to build a small JavaScript program which allows the users to enter a search query, and then find the results of these query and display them through an asynchronous request. Below you can find what I tried so far, but it doesn't display anything other than a search box. Could you please help with implementation? Thanks in advance!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Podcasts</title>
<script>
// TODO 1: Ensure that the main part of the script is executed when the DOM is ready.
document.addEventListener('DOMContentLoaded', function (event) {
})
// TODO 2: Set the constant input to the input field from the HTML body
const input = document.getElementById("input");
const outputDiv = document.getElementById("output");
// Attach the event handler to the input
// Event handler function for when the user types
// TODO 3: Register the inputHandler function as event listener on the input
function InputHandler() {
input.addEventListener('submit', function (event) {
// TODO 4:
// While the user types in the field, the event listener inputHandler
// shall create an asynchronous request to access the API to search
// for soundtracks by title.
async function asynchronousRequest () {
const id = await document.getElementsByName('input');
return document.getElementById(id);
}
});
}
function responseHandler (soundtracks) {
outputDiv.innerHTML = '';
const tb1 = document.createElement('table');
// TODO 5: Process the result
soundtracks.forEach(soundtrack => {
let tr = document.createElement('tr');
let td1 = document.createElement('td');
tr.append(td1);
let td2 = document.createElement('td');
tr.append(td2);
let td3 = document.createElement('td');
tr.append(td3);
})
const tr = tb1.insertRow();
const td1 = tr.insertCell();
// TODO 6: Create an additional audio element and set source to soundtracks' audioSrc.
const audio = document.getElementById("audioSrc").src;
outputDiv.appendChild(tb1);
outputDiv.appendChild(td1);
outputDiv.appendChild(audio);
}
</script>
</head>
<body>
<input type="text" class="user-input">
<div id="output"></div>
</body>
</html>

localStorage not working properly/localStorage overwriting itself

I'm attempting to create a simple to-do list and I've encountered two problems:
After refreshing the page, all the created elements are no longer visible on the page despite being in local storage.
After refreshing the page and submitting new values to the input, localStorage overwrites itself.
Despite that, the items displayed from the input fields are from the previous localStorage, which no longer exists (I really hope this makes sense).
const inputEl = document.getElementById("inputEl")
const submitBtn = document.getElementById("submit")
const clearBtn = document.getElementById("clearBtn")
const todoListContainer = document.getElementById("todoList")
const taskContainer = document.querySelector(".task")
const cancelBtn = document.querySelector(".cancelBtn")
const doneBtn = document.querySelector(".doneBtn")
const errorMsg = document.querySelector(".error")
let localStorageContent = localStorage.getItem("tasks")
let tasksItem = JSON.parse(localStorageContent)
let tasks = []
function createTask() {
if (inputEl.value.length != 0) {
const newDiv = document.createElement("div")
newDiv.classList.add("task")
const newParagraph = document.createElement("p")
const newCancelBtn = document.createElement("button")
newCancelBtn.classList.add("cancelBtn")
newCancelBtn.textContent = "X"
const newDoneBtn = document.createElement("button")
newDoneBtn.classList.add("doneBtn")
newDoneBtn.textContent = "Done"
todoListContainer.appendChild(newDiv)
newDiv.appendChild(newParagraph)
newDiv.appendChild(newCancelBtn)
newDiv.appendChild(newDoneBtn)
//^^ Creating a container for a new task, with all its elements and assigning the classes^^
tasks.push(inputEl.value)
inputEl.value = ""
for (let i = 0; i < tasks.length; i++) {
localStorage.setItem("tasks", JSON.stringify(tasks))
newParagraph.textContent = JSON.parse(localStorageContent)[i]
}
errorMsg.textContent = ""
} else {
errorMsg.textContent = "You have to type something in!"
errorMsg.classList.toggle("visibility")
}
}
submitBtn.addEventListener("click", () => {
createTask()
})
clearBtn.addEventListener("click", () => {
localStorage.clear()
})
HTML code below:
<!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">
<link rel="stylesheet" href="/style.css">
<script src="/script.js" defer></script>
<title>To-do list</title>
</head>
<body>
<h2 class="error visibility"></h2>
<div id="todoList">
<h1>To-Do List</h1>
<input type="text" name="" id="inputEl" placeholder="Add an item!">
<button type="submitBtn" id="submit">Submit</button>
<button id="clearBtn">Clear list</button>
<div class="task">
</div>
</div>
</body>
</html>
After refreshing the page, all the created elements are no longer visible on the page despite being in local storage
That is because you are rendering the HTML only after the click event and not on page load. To render the HTML for existing tasks stored in the localStorage you have to write a code that loops over your existing tasks in the tasksItem and applies the rendering logic to it.
I would suggest splitting the rendering code from your createTask() function and create a new function for it (for example renderTask()), then you can use it inside a loop on page load and also call the function once a new task is created in the createTask() function.
window.addEventListener('load', (event) => {
// Your read, loop and render logic goes here
})
After refreshing the page and submitting new values to the input, localStorage overwrites itself.
That's because you are actually overriding the tasks in the localStorage. To keep existing tasks, you have to use your tasksItem variable instead of the blank tasks array to create your tasks in and save them to the localStorage.
So, instead of:
tasks.push(inputEl.value)
You would use:
tasksItem.push(inputEl.value)
The same goes for:
for (let i = 0; i < tasksItem.length; i++) {
localStorage.setItem("tasks", JSON.stringify(tasksItem))
// …
}

addEventListener click doesn't working when I dynamically changing buttons

I have 3 inputs: for name, last name and education. The last input (for education) might be multiple so I have button to add more inputs. This process work dynamically but it has one flaw. The addEventListener method works only for the very first static button but not for buttons created in the process. In my opinion addEventListener couldn't catch updated ID for the element and work for the previous element only... Any ideas?
let counter = 0;
let buttonName, additionalId, additionalEducation, buttonId, dynamicButton, buttonIdListener, counter1;
additionalId = "education" + counter;
additionalEducation = "Education " + counter;
buttonId = "add"+counter;
buttonName = "name"+counter;
document.getElementById(buttonId).addEventListener('click', function(){
// let hide = document.getElementById(buttonId);
// hide.style.display = 'none';
counter= counter+1;
additionalId = "education" + counter;
additionalEducation = "Education " + counter;
buttonId = "add"+counter;
buttonName = "name"+counter;
let additionalLabel = document.createElement('label');
additionalLabel.innerHTML = additionalEducation;
additionalLabel.setAttribute('for',additionalId);
let additionalInput = document.createElement('input');
additionalInput.setAttribute('id',additionalId);
additionalInput.style.borderRadius = "5px";
additionalInput.style.backgroundColor = "blue";
additionalInput.style.color = "white";
let additionalButton = document.createElement('button');
additionalButton.setAttribute('type','button');
additionalButton.setAttribute('id',buttonId);
additionalButton.setAttribute('name',buttonName);
additionalButton.innerHTML = "Add";
document.getElementById("form").appendChild(additionalLabel);
document.getElementById("form").appendChild(additionalInput);
document.getElementById("form").appendChild(additionalButton);
})
and its my html code
<!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>
</head>
<body>
<form action="#">
<label for="name0">სახელი</label>
<input type="text" id="name0" name="name">
<label for="last_name0">გვარი</label>
<input type="text" id="last_name0" name="last_name">
<div>
<label for="education0">განათლება</label>
<input type="text" id="education0" name="education">
<button type="submit" id="add0">დამატება</button>
</div>
</form>
<script src="main.js"></script>
</body>
</html>
You need to set your listener on a static object - one that won't be removed or added. So you can use 'form' and set it like this:
First, update your static html button with a class - for this example 'the-button'
<button type="submit" class='the-button' id="add0">დამატება</button>
Then setup your event listener. Im going wrap this in a window.onload function to make sure it doesn't run until the HTML has rendered.
window.onload = function() {
document.getElementById("form").addEventListener('click', function (evt) {
if (evt.target.classList.contains('the-button')) theFunction(evt.target);
});
}
Then we stick your logic into a function, making sure to add the class the-button to any newly created buttons so they can pick up the listener.
function theFunction(fromButton) {
// fromButton is just in case you want a reference from the button that was clicked
counter= counter+1;
additionalId = "education" + counter;
additionalEducation = "Education " + counter;
buttonId = "add"+counter;
buttonName = "name"+counter;
let additionalLabel = document.createElement('label');
additionalLabel.innerHTML = additionalEducation;
additionalLabel.setAttribute('for',additionalId);
let additionalInput = document.createElement('input');
additionalInput.setAttribute('id',additionalId);
additionalInput.style.borderRadius = "5px";
additionalInput.style.backgroundColor = "blue";
additionalInput.style.color = "white";
let additionalButton = document.createElement('button');
additionalButton.setAttribute('type','button');
additionalButton.setAttribute('id',buttonId);
additionalButton.classList.add('the-button');
additionalButton.setAttribute('name',buttonName);
additionalButton.innerHTML = "Add";
document.getElementById("form").appendChild(additionalLabel);
document.getElementById("form").appendChild(additionalInput);
document.getElementById("form").appendChild(additionalButton);
}

Categories