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>
Related
I have a page on my site which has 3 separate 'hidden' divs. Each with it's own 'show/hide' button.
Currently... each div and button set functions independently.
Therefore... if all divs are shown (open) at the same time, they stack according to their respective order.
Instead of that, I would rather restrict the function a bit, so that only div can be shown (open) at a time.
Example: If Div 1 is shown, and the user then clicks the Div 2 (or Dive 3) button, Div 1 (or which ever div is open at the time, will close.
I am not sure how to adjust my code to make that all work together. I have tried a few ideas, but they were all duds. So I posted a generic 'independent' version below.
function show_Div_1() {
var div1 = document.getElementById("Div_1");
if (div1.style.display === "none") {
div1.style.display = "block";
} else {
div1.style.display = "none";
}
}
function show_Div_2() {
var div2 = document.getElementById("Div_2");
if (div2.style.display === "none") {
div2.style.display = "block";
} else {
div2.style.display = "none";
}
}
function show_Div_3() {
var div3 = document.getElementById("Div_3");
if (div3.style.display === "none") {
div3.style.display = "block";
} else {
div3.style.display = "none";
}
}
.div {
width: 270px;
height: 30px;
padding-left: 10px;
}
<button type="button" onclick="show_Div_1()">Div 1 - Red</button>
<button type="button" onclick="show_Div_2()" style="margin-left: 4px">Div 2 - Blue</button>
<button type="button" onclick="show_Div_3()" style="margin-left: 4px">Div 3 - Green</button>
<div id="Div_1" class="div" style="background-color:red; display: none;"></div>
<div id="Div_2" class="div" style="background-color:blue; display: none;"></div>
<div id="Div_3" class="div" style="background-color:green; display: none;"></div>
I would suggest using data attributes for a toggle. Why? you can use CSS for them and you can use more than just a toggle - multiple "values".
Here in this example I do your "click" but also added a double click on the button for a third value. Try some clicks and double clicks!
A bit of overkill perhaps but more than just "toggle" for example you could use this to show "states" of things like a stoplight or any number of things.
Use the grid display and move them by just adding a data attribute value and double click it to get it to go (using css) to some grid-area:, things like that.
const hideValues = {
hide: "hidden",
show: "showme",
double: "dblclick"
};
function dblClickHander(event) {
const targetSelecor = event.target.dataset.target;
const target = document.querySelector(targetSelecor);
const action = target.dataset.hideme == hideValues.double ? hideValues.hide : hideValues.double;
const toggleTargets = document.querySelectorAll('.toggle-target');
toggleTargets.forEach(el => {
el.dataset.hideme = hideValues.hide;
});
target.dataset.hideme = action;
}
function toggleEventHandler(event) {
const targetSelecor = event.target.dataset.target;
const target = document.querySelector(targetSelecor);
const showHide = target.dataset.hideme == hideValues.hide ? hideValues.show : hideValues.hide;
const toggleTargets = document.querySelectorAll('.toggle-target');
toggleTargets.forEach(el => {
el.dataset.hideme = hideValues.hide;
});
target.dataset.hideme = showHide;
}
/* set up event handlers on the buttons */
const options = {
capture: true
};
/* we do this first to prevent the click from happening */
const toggleButtons = document.querySelectorAll('.toggle-button');
toggleButtons.forEach(el => {
el.addEventListener('dblclick', dblClickHander, options);
});
toggleButtons.forEach(el => {
el.addEventListener('click', toggleEventHandler, options)
});
.toggle-target {
width: 270px;
height: 30px;
padding-left: 10px;
}
.toggle-target[data-hideme="hidden"] {
display: none;
}
.toggle-target[data-hideme="showme"] {
display: block;
}
.toggle-target[data-hideme="dblclick"] {
display: block;
border: solid 2px green;
padding: 1rem;
opacity: 0.50;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
}
.green-block {
background-color: green;
}
<button type="button" class="toggle-button" data-target=".red-block">Div 1 - Red</button>
<button type="button" class="toggle-button" data-target=".blue-block">Div 2 - Blue</button>
<button type="button" class="toggle-button" data-target=".green-block">Div 3 - Green</button>
<div class="toggle-target red-block" data-hideme="hidden">red</div>
<div class="toggle-target blue-block" data-hideme="hidden">blue</div>
<div class="toggle-target green-block" data-hideme="hidden">green</div>
This can be done in many ways. I think the best approach in your case could be
BUTTONS
<button type="button" onclick="show_div('Div_1')">Div 1 - Red</button>
<button type="button" onclick="show_div('Div_2')" style="margin-left: 4px">Div 2 - Blue</button>
<button type="button" onclick="show_div('Div_3')" style="margin-left: 4px">Div 3 - Green</button>
SCRIPT
function show_div(div_id) {
var thisDiv = document.querySelector('#'+div_id);
var thisState = thisDiv.style.display;
// close all in any cases
document.querySelectorAll('.div').forEach(function(el) {
el.style.display = "none";
});
// open this div only if it was closed
if (thisState == "none" ){
thisDiv.style.display = "block";
}
}
I'm studying a project by Wes Bos where you were tasked with adding shift click functionality to a series of list items.
I completed this and wanted to go further by then adding the ability to deselect these list items which I did (see commented javascript code).
Then I wanted to take that solution and apply DRY principles and that's where things became difficult.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hold Shift to Check Multiple Checkboxes</title>
</head>
<body>
<style>
html {
font-family: sans-serif;
background: #ffc600;
}
.inbox {
max-width: 400px;
margin: 50px auto;
background: white;
border-radius: 5px;
box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
}
.item {
display: flex;
align-items: center;
border-bottom: 1px solid #F1F1F1;
}
.item:last-child {
border-bottom: 0;
}
input:checked + p {
background: #F9F9F9;
text-decoration: line-through;
}
input[type="checkbox"] {
margin: 20px;
}
input:hover {
cursor: pointer;
}
p {
margin: 0;
padding: 20px;
transition: background 0.2s;
flex: 1;
font-family:'helvetica neue';
font-size: 20px;
font-weight: 200;
border-left: 1px solid #D1E2FF;
}
</style>
<!--
The following is a common layout you would see in an email client.
When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.
-->
<div class="inbox">
<div class="item">
<input type="checkbox">
<p>This is an inbox layout.</p>
</div>
<div class="item">
<input type="checkbox">
<p>Check one item</p>
</div>
<div class="item">
<input type="checkbox">
<p>Hold down your Shift key</p>
</div>
<div class="item">
<input type="checkbox">
<p>Check a lower item</p>
</div>
<div class="item">
<input type="checkbox">
<p>Everything in between should also be set to checked</p>
</div>
<div class="item">
<input type="checkbox">
<p>Try to do it without any libraries</p>
</div>
<div class="item">
<input type="checkbox">
<p>Just regular JavaScript</p>
</div>
<div class="item">
<input type="checkbox">
<p>Good Luck!</p>
</div>
<div class="item">
<input type="checkbox">
<p>Don't forget to tweet your result!</p>
</div>
</div>
<script>
const input = document.querySelectorAll('.item input[type="checkbox"]');
let lastchecked;
function checkFunction (event) {
let inbetween = false;
if (event.shiftKey && this.checked) {
tickBox(true);
} else if (event.shiftKey && !this.checked) {
tickBox(false);
}
lastChecked = this;
}
function tickBox(boolean) {
input.forEach(box => {
if (box === this || box === lastChecked) {
inbetween = !inbetween;
}
if (inbetween) {
box.checked = boolean;
}
});
}
input.forEach(box => box.addEventListener('click', checkFunction));
// const input = document.querySelectorAll('.item input[type="checkbox"]');
// let lastchecked;
//
// function checkFunction (event) {
// let inbetween = false;
// if (event.shiftKey && this.checked) {
// input.forEach(box => {
// if (box === this || box === lastChecked) {
// inbetween = !inbetween;
// }
// if (inbetween) {
// box.checked = true;
// }
// });
// } else if (event.shiftKey && !this.checked) {
// input.forEach(box => {
// if (box === this || box === lastChecked) {
// inbetween = !inbetween;
// }
// if (inbetween) {
// box.checked = false;
// }
// });
// }
// lastChecked = this;
// }
//
// input.forEach(box => box.addEventListener('click', checkFunction));
</script>
</body>
</html>
I expected at that point that all I had to do was call the function where the code was repeated, but this time using a boolean parameter, however it then says that the inbetween variable is undefined. I'm confused at this point. If I define it within the new function it just ticks everything and doesn't change the variable back to false etc.
I hope that makes sense. I'd love to know where I'm going wrong for the future.
Thanks all.
I'd suggest declaring tickBox() inside of checkFunction(). This is feasible because it's never called elsewhere. Then, it can have access to the scope of checkFunction() including the inbetween variable:
const input = document.querySelectorAll('.item input[type="checkbox"]');
let lastchecked;
function checkFunction (event) {
let inbetween = false;
function tickBox(boolean) {
input.forEach(box => {
if (box === this || box === lastChecked) {
inbetween = !inbetween;
}
if (inbetween) {
box.checked = boolean;
}
});
}
if (event.shiftKey && this.checked) {
tickBox(true);
} else if (event.shiftKey && !this.checked) {
tickBox(false);
}
lastChecked = this;
}
input.forEach(box => box.addEventListener('click', checkFunction));
FYI, you can simplify your if/else from this:
if (event.shiftKey && this.checked) {
tickBox(true);
} else if (event.shiftKey && !this.checked) {
tickBox(false);
}
to this:
if (event.shiftKey) {
tickBox(this.checked);
}
Which then means that you don't actually need a separate function for tickBox() any more.
In the first function, an item is marked read or unread by clicking the .activity__button. The next function is to change the status of all of the items to read.
Why isn't the function iterating over each item and button?
var button = $(".activity__button");
var item = $(".activity__item");
When I press the button to change the status to read, nothing happens. Additionally, how do you handle a second click of the button to change all back to unread?
$(".activity__button").on("click", function(e) {
e.stopPropagation();
e.preventDefault();
var icon = $(this).find("svg");
var status = $(this).attr("data-status");
if (status === "read") {
$(this)
.removeClass("activity__button--read")
.attr("data-status", "unread");
icon.attr("data-icon", "envelope");
$(this)
.closest(".activity__item")
.removeClass("activity__item--read")
.attr("data-status", "unread");
} else {
$(this)
.addClass("activity__button--read")
.attr("data-status", "read");
icon.attr("data-icon", "envelope-open");
$(this)
.closest(".activity__item")
.addClass("activity__item--read")
.attr("data-status", "read");
}
});
$(".section").on("click", ".mark", function(e) {
e.stopPropagation();
e.preventDefault();
var button = $(".activity__button");
var item = $(".activity__item");
var icon = button.find("svg");
var status = button.attr("data-status");
if (status === "unread") {
button.addClass("activity__button--read").attr("data-status", "read");
icon.attr("data-icon", "envelope-open");
item.addClass("activity__item--read").attr("data-status", "read");
}
});
.activity__item {
position: relative;
height: 100px;
width: 300px;
border: 1px solid whitesmoke;
margin-top: -1px;
}
.activity__button {
cursor: pointer;
padding: 1rem;
font-size: 21px;
}
.activity__button svg {
color: #f8971d;
}
.activity__button.activity__button--read svg {
color: #47a877;
}
.activity__item--read {
background: #fafafa !important;
}
button {
padding: 12px;
margin: 1rem;
}
<script src="https://pro.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class "section">
<button class="mark">Mark as Read</button>
<div>
<div class="activity__item">
<div class="activity__button" data-status="unread"><i class="fas fa-envelope"></i>
</div>
</div>
<div class="activity__item">
<div class="activity__button" data-status="unread"><i class="fas fa-envelope"></i>
</div>
</div>
<div class="activity__item activity__item--read">
<div class="activity__button activity__button--read" data-status="read">
<i class="fas fa-envelope-open"></i>
</div>
</div>
<div class="activity__item">
<div class="activity__button" data-status="unread">
<i class="fas fa-envelope"></i>
</div>
</div>
</div>
</div>
Working example (with other classes)
var open = 'fas fa-envelope-open';
var close = 'fas fa-envelope';
$(".activity__button").off().on('click', function() {
var status = $(this).data('status');
if( status == 'unread' ) {
$(this).data('status', 'read').empty().html('<i class="' + open + '"></i>').addClass('activity__button--read');
$(this).parent().addClass('activity__item--read');
} else {
$(this).data('status', 'unread').empty().html('<i class="' + close + '"></i>').removeClass('activity__button--read');
$(this).parent().removeClass('activity__item--read');
}
});
$('.mark').off().on('click', function() {
$(".activity__button").each( function() {
$(this).data('status', 'read').empty().html('<i class="' + open + '"></i>').addClass('activity__button--read');
$(this).parent().addClass('activity__item--read');
});
});
See here:
https://jsfiddle.net/8yk9a7rn/
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>
I know this question has been asked a hundred times but I cant seem to find an answer that works for me on any other thread. I am displaying images, and want three of them to be in a row, but they are all just below each other.
//displaying multiple images and delete them
const deleteFiles = [];
$("#file-upload").on("change", function(event) {
const files = event.originalEvent.target.files;
const fragmentElement = document.createDocumentFragment();
const galleryElement = document.querySelector('div.gallery');
if (galleryElement === null) {
return
}
for (let i = 0; i < files.length; i++) {
const file = files[i];
deleteFiles.push(file);
const deleteImg = document.createElement("div");
const deleteimage = document.createElement("img");
const faGlyph = document.createElement('i');
faGlyph.className = 'fas fa-times';
deleteImg.className = 'thumbnail-container';
deleteimage.className = 'thumbnail';
faGlyph.style.display = 'none';
deleteImg.appendChild(deleteimage);
deleteImg.appendChild(faGlyph);
fragmentElement.appendChild(deleteImg);
deleteimage.src = URL.createObjectURL(file);
function toggleGlyph() {
var jqGlyph = $(faGlyph);
if (jqGlyph.is(':visible')) {
jqGlyph.hide();
} else {
jqGlyph.show();
}
}
function deletePic() {
const index = deleteFiles.indexOf(file);
if (index !== -1) {
deleteFiles.splice(index, 1);
}
URL.revokeObjectURL(file);
deleteImg.parentElement.removeChild(deleteImg);
}
$(deleteImg).hover(toggleGlyph, toggleGlyph);
faGlyph.addEventListener('click', deletePic, false);
}
galleryElement.appendChild(fragmentElement);
$('div.gallery').show();
});
.form {
overflow: hidden;
}
/*upload image */
.gallery img{
display:inline-block;
position: relative;
width: 230px;
height: 210px;
padding-right:7%;
padding-bottom: 6%;
box-sizing: content-box;
}
.gallery{
border-style: dashed;
border-width: 2px;
color: #5967b9;
padding: 10%;
}
div.gallery { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Form1" method="post" role="form" class="form" enctype="multipart/form-data">
<label> <input type="text" id="albumname" name="albumname" class="form-control" placeholder="Album Name" required autofocus> </label>
<div class="input-group">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload" id="choosefiles"></i> Choose Files...
</label>
` <input id="file-upload" type="file" multiple/>
</div>
<div class="gallery"></div>
<button class="btn btn-lg block btn-primary btn-block btn-signin-upload" type="submit" id="buttonForm">Upload</button>
</form>
Really not sure what the problem is, but I would be grateful for any help. Thanks