My code is in this jsfiddle snippet below. Whenever I press the remove button, it requires 2 clicks to remove the boxes that were originally generated with html. If I have added them, then those boxes work properly with one click. The problem lies with these boxes that are made through the markup.
Link to the code : this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box-container {
display: flex;
}
.box-item {
display: inline-block;
height: 30px;
width: 30px;
background: orangered;
margin: 0 10px;
}
.activated {
background: dodgerblue;
}
</style>
</head>
<body>
<div id="box-container">
<span class="1 box-item"></span>
<span class="2 box-item"></span>
<span class="3 box-item"></span>
</div>
<button id="add">Add</button>
<button id="remove">Remove</button>
<script src="main.js"></script>
</body>
</html>
JS CODE
const boxContainer = document.getElementById("box-container");
const boxItems = document.getElementsByClassName("box-item");
const addBtn = document.getElementById("add");
const removeBtn = document.getElementById("remove");
function Box(element) {
this.__el = element;
this.activated = true;
}
Box.prototype.init = function() {
this.activateBox();
this.__el.addEventListener("click", this.toggleActivation.bind(this));
};
Box.prototype.logger = function() {
console.log(this);
};
Box.prototype.activateBox = function() {
if (this.activated) {
this.__el.classList.add("activated");
}
};
Box.prototype.deactivateBox = function() {
if (!this.activated) {
this.__el.classList.remove("activated");
}
};
Box.prototype.toggleActivation = function() {
this.__el.classList.toggle("activated");
return (this.activated = !this.activated);
};
let box = [];
for (let i = 0; i < boxItems.length; i++) {
box[i] = new Box(boxItems[i]);
box[i].init();
}
const addBox = function() {
const node = document.createElement("span");
node.classList.add("box-item", "activated");
boxContainer.appendChild(node);
};
function removeBox() {
boxContainer.removeChild(boxContainer.lastChild);
}
addBtn.addEventListener("click", addBox);
removeBtn.addEventListener("click", removeBox);
PS: I have checked other 2 questions that have the same title, but they don't solve my issue.
The problem is that your HTML includes text nodes between the .box-items:
<div id="box-container">
<span class="1 box-item"></span>
<span class="2 box-item"></span>
<span class="3 box-item"></span>
</div>
So, when you call
boxContainer.removeChild(boxContainer.lastChild);
If a parent's last child node is a text node, that text node will be selected when you use lastChild. That's not what you want - you don't want to select the text nodes. You only want to remove the <span> elements, so you might remove the last item in the .children instead:
const { children } = boxContainer;
boxContainer.removeChild(children[children.length - 1]);
Or, more elegantly, select the lastElementChild property, thanks to Andre's comment:
boxContainer.removeChild(boxContainer.lastElementChild);
(quite confusingly, the final index of children is not the same thing as the node returned by lastChild)
const boxContainer = document.getElementById("box-container");
const boxItems = document.getElementsByClassName("box-item");
const addBtn = document.getElementById("add");
const removeBtn = document.getElementById("remove");
function Box(element) {
this.__el = element;
this.activated = true;
}
Box.prototype.init = function() {
this.activateBox();
this.__el.addEventListener("click", this.toggleActivation.bind(this));
};
Box.prototype.logger = function() {
console.log(this);
};
Box.prototype.activateBox = function() {
if (this.activated) {
this.__el.classList.add("activated");
}
};
Box.prototype.deactivateBox = function() {
if (!this.activated) {
this.__el.classList.remove("activated");
}
};
Box.prototype.toggleActivation = function() {
this.__el.classList.toggle("activated");
return (this.activated = !this.activated);
};
let box = [];
for (let i = 0; i < boxItems.length; i++) {
box[i] = new Box(boxItems[i]);
box[i].init();
}
const addBox = function() {
const node = document.createElement("span");
node.classList.add("box-item", "activated");
boxContainer.appendChild(node);
};
function removeBox() {
boxContainer.removeChild(boxContainer.lastElementChild);
}
addBtn.addEventListener("click", addBox);
removeBtn.addEventListener("click", removeBox);
.box-container {
display: flex;
}
.box-item {
display: inline-block;
height: 30px;
width: 30px;
background: orangered;
margin: 0 10px;
}
.activated {
background: dodgerblue;
}
<div id="box-container">
<span class="1 box-item"></span>
<span class="2 box-item"></span>
<span class="3 box-item"></span>
</div>
<button id="add">Add</button>
<button id="remove">Remove</button>
Or, you can just change the HTML such that there are no text nodes:
<div id="box-container"><span class="1 box-item"></span><span class="2 box-item"></span><span class="3 box-item"></span></div>
const boxContainer = document.getElementById("box-container");
const boxItems = document.getElementsByClassName("box-item");
const addBtn = document.getElementById("add");
const removeBtn = document.getElementById("remove");
function Box(element) {
this.__el = element;
this.activated = true;
}
Box.prototype.init = function() {
this.activateBox();
this.__el.addEventListener("click", this.toggleActivation.bind(this));
};
Box.prototype.logger = function() {
console.log(this);
};
Box.prototype.activateBox = function() {
if (this.activated) {
this.__el.classList.add("activated");
}
};
Box.prototype.deactivateBox = function() {
if (!this.activated) {
this.__el.classList.remove("activated");
}
};
Box.prototype.toggleActivation = function() {
this.__el.classList.toggle("activated");
return (this.activated = !this.activated);
};
let box = [];
for (let i = 0; i < boxItems.length; i++) {
box[i] = new Box(boxItems[i]);
box[i].init();
}
const addBox = function() {
const node = document.createElement("span");
node.classList.add("box-item", "activated");
boxContainer.appendChild(node);
};
function removeBox() {
boxContainer.removeChild(boxContainer.lastChild);
}
addBtn.addEventListener("click", addBox);
removeBtn.addEventListener("click", removeBox);
.box-container {
display: flex;
}
.box-item {
display: inline-block;
height: 30px;
width: 30px;
background: orangered;
margin: 0 10px;
}
.activated {
background: dodgerblue;
}
<div id="box-container"><span class="1 box-item"></span><span class="2 box-item"></span><span class="3 box-item"></span></div>
<button id="add">Add</button>
<button id="remove">Remove</button>
Related
I am new on JavaScript.I am trying to build a speech to text website using JavaScript. I am facing problems when dealing with audio volumes. Here the volume of audio speech(msg) is changing with values from volumeslider. But there is no actual change of volume in my audio.
Here is my piece of code for volumeslider
volume.addEventListener("input", () => {
const vol = volume.value;
msg.volume = vol; document.querySelector("#volume-label").innerHTML = vol*100;
});
const input = document.getElementById("hidden")
const btn1 = document.getElementById("btn1")
const play = document.getElementById("play")
const pause = document.getElementById("pause");
const resume = document.getElementById("resume");
const restart = document.getElementById("restart");
const volume = document.getElementById("volume")
const reader = btn1.addEventListener("click", function() {
input.click();
})
input.addEventListener("change", (event) => {
let file = input.file
if (typeof e === 'undefined') {
const file = event.target.files[0]
if (file) {
const reader = new FileReader()
reader.readAsText(file)
reader.onload = () => console.log(reader.result)
play.addEventListener("click", function() {
msg = new SpeechSynthesisUtterance(reader.result);
msg.volume = 1;
speechSynthesis.speak(msg)
volume.addEventListener("input", () => {
// Get volume Value from the input
const vol = volume.value;
// Set volume property of the SpeechSynthesisUtterance instance
msg.volume = vol;
// Update the volume label
document.querySelector("#volume-label").innerHTML = vol * 100;
});
})
pause.addEventListener("click", () => {
speechSynthesis.pause();
});
resume.addEventListener("click", () => {
speechSynthesis.resume();
});
restart.addEventListener("click", () => {
speechSynthesis.restart();
});
}
}
})
body {
background-color: aqua;
}
#btn1 {
width: 80%;
height: 100px;
margin-bottom: 200px;
}
.btn2 {
width: 20%;
height: 70px;
}
.flex {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 110px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Page02</title>
<link rel="stylesheet" href="C:\Users\CZ\Downloads\Text To Speech Converter in JavaScript\Pageno03\style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="flex">
<input id="hidden" type="file" hidden="hidden" />
<button id="btn1">Select/Upload .txt Files</button>
<div>
<p class="lead">Volume</p>
<input type="range" min="0" max="1" value="1" step="0.1" id="volume" />
<span id="volume-label" class="ms-2">100</span>
</div>
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="resume">Resume</button>
<button id="restart">Restart</button>
<br>
</div>
<script src="C:\Users\CZ\Downloads\Text To Speech Converter in JavaScript\Pageno03\script.js"></script>
</body>
</html>
Here is my full code:
This question already has answers here:
Clicking a button within a form causes page refresh
(11 answers)
Is there a way to add/remove several classes in one single instruction with classList?
(16 answers)
Closed 8 months ago.
I am assigned to create this to do list using eventlisteners and using JavaScript. My HTML and CSS are given to me however I believe I may be confusing my Id's with each other. The expectation is that a new item is added to the list, can be deleted from the list when clicked on the trashcan, and the input is cleared. Any advice on what I am missing would be helpful... I've been staring at this for 7hrs now.
const todoObjectList = [];
class toDo_Class {
constructor(item) {
this.ulElement = item;
}
add() {
const todoInput = document.querySelector("#todo-input").value;
if (todoInput == "") {
alert("Nothing was entered!");
} else {
const todoObject = {
id: todoObjectList.length,
todoText: todoInput,
isDone: false,
};
todoObjectList.unshift(todoObject);
this.display();
document.querySelector("#todo-input").value = '';
}
}
done_undone(x) {
const selectedTodoIndex = todoObjectList.findIndex((item) => item.id == x);
console.log(todoObjectList[selectedTodoIndex].isDone);
todoObjectList[selectedTodoIndex].isDone == false ? todoObjectList[selectedTodoIndex].isDone == true : todoObjectList[selectedTodoIndex].isDone = false;
this.display();
}
deleteElement(z) {
const selectedDelIndex = todoObjectList.findIndex((item) => item.id == z);
todoObjectList.splice(selectedDelIndex, 1);
this.display();
}
display() {
this.ulElement.innerHTML = "";
todoObjectList.forEach((object_item) => {
const liElement = document.createElement("li");
const delBtn = document.createElement("i");
liElement.innerText = object_item.todoText;
liElement.setAttribute("data-id", object_item.id);
delBtn.setAttribute("data-id", object_item.id);
delBtn.classList.add("fas fa-trash-alt");
liElement.appendChild(delBtn);
delBtn.addEventListener("click", function(e) {
const deleteId = e.target.getAttribute("data-id");
toDoList.deleteElement(deleteId);
});
liElement.addEventListener("click", function(e) {
const selectedId = e.target.getAttribute("data-id");
toDoList.done_undone(selectedId);
});
if (object_item.isDone) {
liElement.classList.add("checked");
}
this.ulElement.appendChild(liElement);
});
}
}
const listSection = document.querySelector("#todo-ul");
toDoList = new toDo_Class(listSection);
document.querySelector("#todo-btn").addEventListener("click", function() {
toDoList.add();
});
document.querySelector("#todo-input").addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
toDoList.add();
}
});
body {
background-color: #34495e;
font-family: "Lato", sans-serif;
}
button {
margin: 0 auto;
float: right;
}
.centered {
margin: 0 auto;
width: 80%;
}
.card {
margin: 50px auto;
width: 18rem;
}
i {
float: right;
padding-top: 5px;
}
<html lang="en">
<body>
<div class="card">
<div class="card-body">
<h3 class="card-title">Today's To Do List</h3>
<form id="todo-form">
<div class="form-group">
<input type="text" class="form-control" id="todo-input" placeholder="What else do you need to do?">
</div>
<div class="form-group">
<input type="submit" id="todo-btn" class="btn btn-secondary btn-block" value="Add Item To List">
</div>
</form>
</div>
<ul class="list-group list-group-flush" id="todo-ul">
<li class="list-group-item">Pick up groceries <i class="fas fa-trash-alt"></i>
</li>
</ul>
</div>
</body>
</html>
I'm building a simple memory game just to show functionality.
User inserts a string, I shuffle it and present the split chars on the screen - as stars. (* * * *)
Whenever a user will click a star, it will show the real value of the number.
For now I have a text box for input, I shuffle the chars but I'm not sure what is the best way to use that array and present the string as stars that onclick will flip back to the real char. Thanks for helping!
const section = document.querySelector("section");
function myFunction() {
var input = document.getElementById("searchTxt").value;
const x = document.querySelector("p");
const yourInp = "Your input is: "
x.textContent = yourInp;
document.getElementById("str").innerHTML = input;
const cards = input.split('');
const randomize = () => {
cards.sort(() => Math.random() - 0.5);
return cards;
};
const cardsGenerator = () => {
const cards = randomize();
console.log(cards);
cards.forEach(item => {
console.log(item);
});
}
cardsGenerator();
}
<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>Memory Game</title>
</head>
<body>
<h1> Memory Game </h1>
<input name="searchTxt" type="search" maxlength="4" id="searchTxt" class="searchField" value="Word" />
<button onclick="myFunction()">Start Game</button>
<p id="yourstr"> </p>
<p id="str"> </p>
<section></section>
</body>
Maybe you want to check this approach out:
const section = document.querySelector("section");
function myFunction() {
var input = document.getElementById("searchTxt").value;
const x = document.querySelector("p");
const yourInp = "Your input is: " + input;
x.textContent = yourInp;
const cards = input.split('');
const randomize = () => {
cards.sort(() => Math.random() - 0.5);
return cards;
};
const cardsGenerator = () => {
container.innerText = ''; // clear container
const cards = randomize();
cards.forEach(item => {
const d = document.createElement("div"); // create div
d.innerText = '*'; // set text to *
d.onclick = () => { d.innerText = item; } // handle onclick to display real value
container.appendChild(d); // append div as child to container
});
}
cardsGenerator();
}
div.cards {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
padding: 3px;
background: gray;
border-radius: 2px;
font-size: x-large;
}
div.cards > div {
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
padding: 10px;
background: white;
border-radius: 6px;
}
<h1> Memory Game </h1>
<input name="searchTxt" type="search" maxlength="4" id="searchTxt" class="searchField" value="Word" />
<button onclick="myFunction()">Start Game</button>
<p id="yourstr"> </p>
<div class="cards" id="container">
</div>
I have example of drag and drop: https://codepen.io/ilq-trifonow/pen/GRmaoBP
Now I can move elements by any part of them. But I want to use a <p> tag with a class="drag-handler" for this. How can I do it?
index.html
<html>
<head>
<meta charset="utf-8">
<title>Список задач с drag & drop</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tasks">
<h1 class="tasks__title">To do list</h1>
<div class="tasks__list">
<div class="tasks__item"><p class="drag-handler">Drag it</p><p>learn HTML</p></div>
<div class="tasks__item"><p class="drag-handler">Drag it</p><p>learn CSS</p></div>
<div class="tasks__item"><p class="drag-handler">Drag it</p><p>learn JavaScript</p></div>
<div class="tasks__item"><p class="drag-handler">Drag it</p><p>learn PHP</p></div>
<div class="tasks__item"><p class="drag-handler">Drag it</p><p>stay alive</p></div>
</div>
</div>
</body>
</html>
index.js
const tasksListElement = document.querySelector(`.tasks__list`);
const taskElements = tasksListElement.querySelectorAll(`.tasks__item`);
for (const task of taskElements) {
task.draggable = true;
}
tasksListElement.addEventListener(`dragstart`, (evt) => {
evt.target.classList.add(`selected`);
});
tasksListElement.addEventListener(`dragend`, (evt) => {
evt.target.classList.remove(`selected`);
});
const getNextElement = (cursorPosition, currentElement) => {
const currentElementCoord = currentElement.getBoundingClientRect();
const currentElementCenter = currentElementCoord.x + currentElementCoord.width / 2;
const nextElement = (cursorPosition < currentElementCenter) ?
currentElement :
currentElement.nextElementSibling;
return nextElement;
};
tasksListElement.addEventListener(`dragover`, (evt) => {
evt.preventDefault();
const activeElement = tasksListElement.querySelector(`.selected`);
const currentElement = evt.target;
const isMoveable = activeElement !== currentElement &&
currentElement.classList.contains(`tasks__item`);
if (!isMoveable) {
return;
}
const nextElement = getNextElement(evt.clientX, currentElement);
if (
nextElement &&
activeElement === nextElement.previousElementSibling ||
activeElement === nextElement
) {
return;
}
tasksListElement.insertBefore(activeElement, nextElement);
});
You can set draggable=true for all inner tag (say p.drag-handler) and then in dragover listener use parentElement as a currentElement that must be dragged.
Here is working sample:
const tasksListElement = document.querySelector(`.tasks__list`);
const taskElements = tasksListElement.querySelectorAll(`.drag-handler`);
for (const task of taskElements) {
task.draggable = true;
}
tasksListElement.addEventListener(`dragstart`, (evt) => {
evt.target.parentElement.classList.add(`selected`);
});
tasksListElement.addEventListener(`dragend`, (evt) => {
evt.target.parentElement.classList.remove(`selected`);
});
const getNextElement = (cursorPosition, currentElement) => {
const currentElementCoord = currentElement.getBoundingClientRect();
const currentElementCenter = currentElementCoord.x + currentElementCoord.width / 2;
const nextElement = (cursorPosition < currentElementCenter) ?
currentElement :
currentElement.nextElementSibling;
return nextElement;
};
tasksListElement.addEventListener(`dragover`, (evt) => {
evt.preventDefault();
const activeElement = tasksListElement.querySelector(`.selected`);
const currentElement = evt.target.parentElement;
const isMoveable = activeElement !== currentElement &&
currentElement.classList.contains(`tasks__item`);
if (!isMoveable) {
return;
}
const nextElement = getNextElement(evt.clientX, currentElement);
tasksListElement.insertBefore(activeElement, nextElement);
});
html, body {
margin: 0;
padding: 0;
}
body {
font-family: "Tahoma", sans-serif;
font-size: 18px;
line-height: 25px;
color: #164a44;
background-color: #b2d9d0;
}
.tasks__title {
margin: 50px 0 20px 0;
text-align: center;
text-transform: uppercase;
}
.tasks__list {
display: flex;
justify-content: center;
}
.tasks__item {
width: 250px;
margin-right: 10px;
padding: 5px;
text-align: center;
border: 2px dashed #b2d9d0;
border-radius: 10px;
background-color: #dff2ef;
transition: background-color 0.5s;
}
.tasks__item:last-child {
margin-bottom: 0;
}
.selected {
opacity: 0.6;
}
.drag-handler {
background-color: #ddd;
cursor: move;
}
<div class="tasks">
<h1 class="tasks__title">To do list</h1>
<div class="tasks__list">
<div class="tasks__item" ><p class="drag-handler">Drag it</p><p>learn HTML</p></div>
<div class="tasks__item" ><p class="drag-handler">Drag it</p><p>learn CSS</p></div>
<div class="tasks__item" ><p class="drag-handler">Drag it</p><p>learn JavaScript</p></div>
<div class="tasks__item" ><p class="drag-handler">Drag it</p><p>learn PHP</p></div>
<div class="tasks__item" ><p class="drag-handler">Drag it</p><p>stay alive</p></div>
</div>
</div>
If I understand you correctly, you want to move the element by selecting inside of the paragraph element to move the entire containing div element.
In the scope of what you have written, I would simply use an implicit reference inside of the child node to set the draggable element when you select it
for (const task of taskElements) {
task.firstChild.addEventListener(`mousedown`, (evt) => {
task.draggable = true
task.classList.add(`selected`)
})
}
Further to this, I wouldn't rely on DOM reads / writes as it tends to be more expensive than simply holding onto a reference to the element you are looking for:
let activeElement
for (const task of taskElements) {
task.firstChild.addEventListener(`mousedown`, (evt) => {
task.draggable = true
activeElement = task
})
}
...
tasksListElement.addEventListener(`dragover`, (evt) => {
evt.preventDefault();
const currentElement = evt.target;
const isMoveable = activeElement !== currentElement &&
currentElement.classList.contains(`tasks__item`);
if (!isMoveable) {
return;
}
const nextElement = getNextElement(evt.clientX, currentElement);
if (
nextElement &&
activeElement === nextElement.previousElementSibling ||
activeElement === nextElement
) {
return;
}
tasksListElement.insertBefore(activeElement, nextElement);
});
I gave this a try in your codepen, should be fine.
Can someone help me, I'm trying to use a button that I created with DOM. This button will be used to remove an item, I've tried using both the event listener and event handler but both don't seem to be working and the browser just refreshes the page, here's the code is written below.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Cart Calculator</title>
</head>
<body>
<div class="big-container">
<form onsubmit= "return getTotal(this)" >
<div class="addToCart">
<label for="cart" class="label">Add to cart:</label>
<select name="list" id="list">
<option value="selectProducts" id="selctProducts">Selct Product</option>
<option value="Carrot($2)" id="carrot">Carrot</option>
<option value="Potato($3)" id="potato">Potato</option>
<option value="Fish($10)" id="fish">Fish</option>
<option value="Meat($13)" id="meat">Meat</option>
<option value="Eggs($6)" id="eggs">Eggs</option>
</select>
<button id="add" onclick="return addItem(this)">Add</button>
</div>
<div id="carrotSelected"></div>
<div id="potatoSelected"></div>
<div id="fishSelected"></div>
<div id="meatSelected"></div>
<div id="eggsSelected"></div>
<button id="submit" type="submit">Calculate</button>
</form>
</div>
<script src="app.js"></script>
</body>
</html>
JavaScript
let remove = document.createElement("button");
let textRemove = document.createTextNode("Remove");
remove.appendChild(textRemove);
addItem = () =>{
let carrot = document.getElementById("carrot");
let potato = document.getElementById("potato");
let fish = document.getElementById("fish");
let meat = document.getElementById("meat");
let eggs = document.getElementById("eggs");
let selectProducts = document.getElementById("selectProducts");
let list = document.getElementById("list");
let output = list.value;
let digit = document.createElement("input");
if(list.value === "selectProducts"){
alert("Please select a product");
return false;
}
if(list.value === "Carrot($2)"){
document.querySelector('#carrotSelected').textContent = output;
document.querySelector('#carrotSelected').style.fontSize = "2rem";
document.querySelector('#carrotSelected').style.width = "50%";
document.querySelector('#carrotSelected').style.margin = "0 3rem";
document.querySelector('#carrotSelected').style.marginBottom = "1rem";
document.querySelector('#carrotSelected').style.display = "flex";
document.querySelector('#carrotSelected').style.justifyContent = "space-evenly";
digit.setAttribute("type", "number");
document.getElementById("carrotSelected").appendChild(digit);
document.getElementById("carrotSelected").appendChild(remove);
return false;
}
if(list.value === "Potato($3)"){
document.querySelector('#potatoSelected').textContent = output;
document.querySelector('#potatoSelected').style.fontSize = "2rem";
document.querySelector('#potatoSelected').style.width = "50%";
document.querySelector('#potatoSelected').style.margin = "0 3rem";
document.querySelector('#potatoSelected').style.marginBottom = "1rem";
document.querySelector('#potatoSelected').style.display = "flex";
document.querySelector('#potatoSelected').style.justifyContent = "space-evenly";
digit.setAttribute("type", "number");
document.getElementById("potatoSelected").appendChild(digit);
document.getElementById("potatoSelected").appendChild(remove);
return false;
}
if(list.value === "Fish($10)"){
document.querySelector('#fishSelected').textContent = output;
document.querySelector('#fishSelected').style.fontSize = "2rem";
document.querySelector('#fishSelected').style.width = "50%";
document.querySelector('#fishSelected').style.margin = "0 3rem";
document.querySelector('#fishSelected').style.marginBottom = "1rem";
document.querySelector('#fishSelected').style.display = "flex";
document.querySelector('#fishSelected').style.justifyContent = "space-evenly";
digit.setAttribute("type", "number");
document.getElementById("fishSelected").appendChild(digit);
document.getElementById("fishSelected").appendChild(remove);
return false;
}
if(list.value === "Meat($13)"){
document.querySelector('#meatSelected').textContent = output;
document.querySelector('#meatSelected').style.fontSize = "2rem";
document.querySelector('#meatSelected').style.width = "50%";
document.querySelector('#meatSelected').style.margin = "0 3rem";
document.querySelector('#meatSelected').style.marginBottom = "1rem";
document.querySelector('#meatSelected').style.display = "flex";
document.querySelector('#meatSelected').style.justifyContent = "space-evenly";
digit.setAttribute("type", "number");
document.getElementById("meatSelected").appendChild(digit);
document.querySelector('#remove').style.display ="block"
document.getElementById("meatSelected").appendChild(remove);
return false;
}
if(list.value === "Eggs($6)"){
document.querySelector('#eggsSelected').textContent = output;
document.querySelector('#eggsSelected').style.fontSize = "2rem";
document.querySelector('#eggsSelected').style.width = "50%";
document.querySelector('#eggsSelected').style.margin = "0 3rem";
document.querySelector('#eggsSelected').style.marginBottom = "1rem";
document.querySelector('#eggsSelected').style.display = "flex";
document.querySelector('#eggsSelected').style.justifyContent = "space-evenly";
digit.setAttribute("type", "number");
document.getElementById("eggsSelected").appendChild(digit);
document.getElementById("eggsSelected").appendChild(remove);
remove.addEventListener('click', (e) => {
document.querySelector('#eggSelected').style.display = "none";
});
return false;
}
return false;
}
removeItem = () => {
let carrot = document.getElementById("carrot");
let potato = document.getElementById("potato");
let fish = document.getElementById("fish");
let meat = document.getElementById("meat");
let eggs = document.getElementById("eggs");
let list = document.getElementById("list");
let output = list.value;
let digit = document.createElement("input");
if(output === "Carrot($2)"){
document.getElementById("carrotSelected").remove;
return false;
}
return false;
}
remove.addEventListener("click", removeItem);
And CSS(if needed)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.big-container{
width: 100%;
height: 100%;
}
.addToCart{
width: 90%;
margin: 0 auto;
padding-top: 10rem;
padding-bottom: 2rem;
margin-bottom: 2rem;
display: flex;
justify-content: space-around;
border-bottom: 1px solid black;
}
.label{
font-size: 2rem;
}
#list{
width: 50%;
font-size: 1.3rem;
}
#submit{
width: 15%;
height: 2rem;
font-size: 1.3rem;
margin: 0 25rem;
}
#add{
width: 10%;
font-size: 1.3rem;
}
Add () after .remove
if (output === 'Carrot($2)') {
document.getElementById('carrotSelected').remove()
return false
}