Develop Reference

I return nothing ondrop how to fix it?

When iam dropping my div with an image inside i get nothing and after i am trying to get it ID i get null of course. But how can i get info from a div with image and append row with it?
Code here or check codepen:
https://codepen.io/13reathcode/pen/NWBmZpb
'use strict';
let queuedImagesArray = [],
queuedForm = document.querySelector('#queued-form'),
queuedDiv = document.querySelector('.queued-div'),
inputDiv = document.querySelector('.input-div'),
input = document.querySelector('.input-div input');
const colors = ['#FF7F7F', '#FFBF7F', '#FFDF7F', '#BFFF7F', '#7FFF7F', '#7FBFFF', '#7F7FFF'],
rows = document.querySelectorAll('.content__row'),
cards = document.querySelectorAll('.content__card'),
addCard = document.getElementById('addCard');
// Queued Images
const onDragStart = (event) => {
console.log('Dragging');
event.dataTransfer.setData('id', event.target.id);
setTimeout(() => {
event.target.style.visibility = 'hidden';
}, 100);
};
const onDragEnd = (event) => {
console.log('Ended dragging');
event.target.style.visibility = 'visible';
};
const displayQueuedImages = () => {
let images = '';
queuedImagesArray.forEach((image, index) => {
images += `
<div class="image" draggable="true" id="${(Date.now() + '').slice(-10) + index}">
<img width='100' height='100' style="pointerEvents:none;" id="${index}" ondragstart="onDragStart" ondragend="onDragEnd"
src="${URL.createObjectURL(image)}" alt="image" />
<span style="color:black;font-size:2rem" onclick="deleteQueuedImage(${index})">×</span>
</div>
`;
});
queuedDiv.innerHTML = images;
};
const deleteQueuedImage = (index) => {
queuedImagesArray.splice(index, 1);
displayQueuedImages();
};
input.addEventListener('change', () => {
const files = input.files;
for (let i = 0; i < files.length; i++) {
queuedImagesArray.push(files[i]);
}
queuedForm.reset();
displayQueuedImages();
});
inputDiv.addEventListener('drop', (e) => {
e.preventDefault();
const files = e.dataTransfer.files;
for (let i = 0; i < files.length; i++) {
if (!files[i].type.match('image')) return;
if (queuedImagesArray.every((image) => image.name !== files[i].name))
queuedImagesArray.push(files[i]);
}
displayQueuedImages();
});
const onDrag = (event) => {
event.preventDefault();
};
// Problem here
const onDrop = (event) => {
event.preventDefault();
const draggedCardId = event.dataTransfer.getData('id'); // nothing
const draggedCard = document.getElementById(draggedCardId); // null
event.target.appendChild(draggedCard);
};
rows.forEach((row, index) => {
const label = row.querySelector('.content__label');
label.style.backgroundColor = colors[index];
row.ondragover = onDrag;
row.ondrop = onDrop;
});
<main>
<section class="section" id="section--1">
<div class="section__title">
<h2 class="section__description">Tier list app</h2>
<h3 class="section__text">Start dragging to move cards</h3>
</div>
<div class="content" id="content">
<div class="content__row">
<div class="content__label">S (The best)</div>
</div>
<div class="content__row">
<div class="content__label">A (Great)</div>
</div>
<div class="content__row">
<div class="content__label">B (Good)</div>
</div>
<div class="content__row">
<div class="content__label">C (Mediocre)</div>
</div>
<div class="content__row">
<div class="content__label">D (Bad)</div>
</div>
<div class="content__row">
<div class="content__label">E (Horrible)</div>
</div>
<!-- <div class="content__row">
<div class="content__label">F (Worst^_^)</div>
</div> -->
</div>
</section>
<form id="queued-form">
<div class="queued-div"></div>
</form>
<div class="input-div">
<p>Drag & drop images here or <span class="browse">Browse</span></p>
<input
type="file"
class="file"
multiple="multiple"
accept="image/png, image/jpeg, image/jpg"
/>
</div>
</main>
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%; // 10px = 1rem
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
color: #555;
line-height: 1.5;
}
.input-div {
width: 70%;
height: 200px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 5rem auto;
border: 2px dotted black;
background-color: white;
position: relative;
.browse {
color: black;
font-weight: bold;
}
}
.file {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
cursor: pointer;
}
.queued-div {
width: 70%;
min-height: 200px;
display: flex;
margin: 5rem auto;
justify-content: flex-start;
flex-wrap: wrap;
gap: 0.5rem;
position: relative;
border-radius: 5px;
border: 2px dotted black;
background-color: white;
.image {
height: 10rem;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
overflow: hidden;
position: relative;
&:nth-child(4n) {
margin-right: 0;
}
img {
height: 100%;
width: 100%;
}
span {
position: absolute;
top: -4px;
right: 4px;
cursor: pointer;
font-size: 22px;
color: white;
&:hover {
opacity: 0.8;
}
}
}
}
#mixin center {
display: flex;
justify-content: center;
align-items: center;
}
// SECTIONS
.section {
padding: 1.8rem 3rem;
&__title {
max-width: 80rem;
margin: 0 auto 2rem auto;
text-align: center;
text-transform: uppercase;
}
&__description {
color: lightgreen;
font-size: 1.8rem;
}
&__text {
font-size: 2.5rem;
}
&__button {
font-size: 2rem;
text-transform: uppercase;
text-decoration: none;
padding: 1rem 2rem;
display: inline-block;
border-radius: 3rem;
position: relative;
background-color: lightgreen;
color: #fff;
border: none;
cursor: pointer;
}
}
// CONTENT
.content {
width: 70vw;
min-height: 10vh;
padding: 0rem;
box-sizing: content-box;
border: 3px solid #000;
display: flex;
flex-wrap: wrap;
flex-direction: column;
margin: 0 auto;
&__row {
width: 100%;
box-sizing: content-box;
flex-wrap: wrap;
height: 8.5rem;
background-color: #1a1a17;
display: flex;
&:not(:last-child) {
border-bottom: 2px solid #000;
}
}
&__label {
font-size: 2rem;
font-weight: 400;
height: 100%;
width: 15rem;
background-color: #555;
color: #333;
border-right: 3px solid #000;
#include center;
}
&__card {
#include center;
&:focus,
&:active {
cursor: pointer;
}
}
}
When i was adding images one by one everything was fine but when i changed button to input zone i can't get anything from new images.

There is a small issue in how you create your img elements: the ondragstart and ondragend event handlers aren't being assigned properly.
Currently, your img elements look something like:
<img id="0" ondragstart="onDragStart" ondragend="onDragEnd" src=... />
However, setting ondragstart to equal onDragStart doesn't actually invoke the function when the event is fired. Same with ondragend and onDragEnd. To do so, you have to actually invoke the functions with onDragStart(event) and onDragEnd(event).
This is because every HTML event handler attribute is implicitly wrapped in:
(event) => { /** the attribute value */ }
In other words, currently, your handlers are equivalent to:
(event) => { onDragStart }
// and
(event) => { onDragEnd }
instead of
(event) => { onDragStart(event) }
// and
(event) => { onDragEnd(event) }
which is given by
<img id="0" ondragstart="onDragStart(event)" ondragend="onDragEnd(event)" src=... />
So the fix is simply to fix the img generation code to:
images += `
<div class="image" draggable="true" id="${(Date.now() + '').slice(-10) + index}">
<img width='100' height='100' id="${index}"
ondragstart="onDragStart(event)" ondragend="onDragEnd(event)"
src="${URL.createObjectURL(image)}" alt="image" />
<span style="color: black; font-size: 2rem"
onclick="deleteQueuedImage(${index})">×</span>
</div>`;

Change Follow Link color on scroll

I need to change follow link color as they overlap with the section that has class intro and intro2 . The follow link color should be changed one by one as they overlap not at once (basically add and remove class use-inverted-colors which I will use to change color using CSS ). Check the example here at this site https://bakery-theme-v1.myshopify.com/ (social icon color being black and white)
class BarracudaOverlapping{
constructor(){
this.setOverlaping();
window.addEventListener("scroll", this.setOverlaping.bind(this));
window.addEventListener("resize", this.setOverlaping.bind(this));
}
setOverlaping(){
document.querySelectorAll(".et_pb_social_media .et_pb_social_icon .icon").forEach(el=>{
var overlap = false;
document.querySelectorAll(".intro,.intro2").forEach(background=>{
if(this.isOverlapping(el, background))
overlap = true;
});
if(overlap)
el.classList.add("use-inverted-colors");
else
el.classList.remove("use-inverted-colors");
});
}
check(){
this.setOverlaping();
}
isOverlapping(e1, e2){
if (e1.length && e1.length > 1) {
e1 = e1[0];
}
if (e2.length && e2.length > 1){
e2 = e2[0];
}
const rect1 = e1 instanceof Element ? e1.getBoundingClientRect() : false;
const rect2 = e2 instanceof Element ? e2.getBoundingClientRect() : false;
let overlap = false;
if (rect1 && rect2) {
overlap = !(
rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom
);
return overlap;
}
console.warn('Not valid HTMLElement object');
return overlap;
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-weight: 500;
font-family: "HelveticaNeue";
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
}
section:nth-of-type(2n) {
background-color: #FE4B74;
}
.intro {
height: 90vh;
}
.content {
display: table-cell;
vertical-align: middle;
}
h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
p {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
a {
font-weight: 700;
color: #373B44;
position: relative;
}
a:hover {
opacity: 0.8;
}
a:active {
top: 1px;
}
footer {
padding: 1% 5%;
text-align: center;
background-color: #373B44;
color: white;
}
footer a {
color: #FE4B74;
font-weight: 500;
text-decoration: none;
}
.et_pb_social_media_follow {
position: fixed;
left: 30px;
top: 50%;
}
.icon.use-inverted-colors {
color: #fff;
}
<section class="intro">
<div class="content ">
<h1>You can create full screen sections without javascript.</h1>
<p>The height is set to 90vh, that means 90% height.</p>
</div>
</section>
<section class="intro1">
<div class="content ">
<h1>Resize your browser and see how they adapt.</h1>
</div>
</section>
<section class="intro2">
<div class="content">
<h1>It's amazing and fast.</h1>
</div>
</section>
<section>
<div class="content">
<h1>See the browser support.</h1>
</div>
</section>
<footer>
Made by #ckor
</footer>
<ul class="et_pb_module et_pb_social_media_follow et_pb_social_media_follow_0 clearfix et_pb_text_align_center et_pb_bg_layout_light">
<li class="et_pb_social_media_follow_network_0 et_pb_social_icon et_pb_social_network_link et-social-facebook"><span class="et_pb_social_media_follow_network_name" aria-hidden="true">Follow</span></li><li class="et_pb_social_media_follow_network_1 et_pb_social_icon et_pb_social_network_link et-social-instagram"><span class="et_pb_social_media_follow_network_name" aria-hidden="true">Follow</span></li>
</ul>

have you tried mix-blend-mode? it changes the color depending on its backGround
* {
box-sizing: border-box;
}
body {
margin: 0;
font-weight: 500;
font-family: "HelveticaNeue";
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
}
section:nth-of-type(2n) {
background-color: #FE4B74;
}
.intro {
height: 90vh;
}
.content {
display: table-cell;
vertical-align: middle;
}
h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
p {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
a {
font-weight: 700;
color: #373B44;
position: relative;
}
a:hover {
opacity: 0.8;
}
a:active {
top: 1px;
}
footer {
padding: 1% 5%;
text-align: center;
background-color: #373B44;
color: white;
}
footer a {
color: #FE4B74;
font-weight: 500;
text-decoration: none;
}
.et_pb_social_media_follow {
position: fixed;
left: 30px;
top: 50%;
}
.icon.use-inverted-colors {
color: #fff;
}
ul {
mix-blend-mode: difference;
}
span {
color: red;
}
<section class="intro">
<div class="content ">
<h1>You can create full screen sections without javascript.</h1>
<p>The height is set to 90vh, that means 90% height.</p>
</div>
</section>
<section class="intro1">
<div class="content ">
<h1>Resize your browser and see how they adapt.</h1>
</div>
</section>
<section class="intro2">
<div class="content">
<h1>It's amazing and fast.</h1>
</div>
</section>
<section>
<div class="content">
<h1>See the browser support.</h1>
</div>
</section>
<footer>
Made by #ckor
</footer>
<ul class="et_pb_module et_pb_social_media_follow et_pb_social_media_follow_0 clearfix et_pb_text_align_center et_pb_bg_layout_light">
<li class="et_pb_social_media_follow_network_0 et_pb_social_icon et_pb_social_network_link et-social-facebook"><span class="et_pb_social_media_follow_network_name" aria-hidden="true">Follow</span></li><li class="et_pb_social_media_follow_network_1 et_pb_social_icon et_pb_social_network_link et-social-instagram"><span class="et_pb_social_media_follow_network_name" aria-hidden="true">Follow</span></li>
</ul>

like this
var links = document.getElementsByClassName('linkClass');
var intro = document.getElementById("intro");
var intro1 = document.getElementById("intro1");
var intro2 = document.getElementById('intro2');
var content = document.getElementById("content")
window.addEventListener("scroll",() => {
for(var i=0; i<links.length; i++) {
var elmPosition =links[i].getBoundingClientRect().top
if(elmPosition <= intro1.getBoundingClientRect().top){
links[i].classList.add("whiteClass")
} else if(elmPosition> intro1.getBoundingClientRect().top && elmPosition < intro2.getBoundingClientRect().top){
links[i].classList.remove("whiteClass")
links[i].classList.add("blackClass")
} else if(elmPosition >intro2.getBoundingClientRect().top && elmPosition < content.getBoundingClientRect().top) {
links[i].classList.remove("blackClass")
links[i].classList.add("whiteClass")
} else if(elmPosition > content.getBoundingClientRect().top){
links[i].classList.remove("whiteClass")
links[i].classList.add("blackClass")
}
}
})
* {
box-sizing: border-box;
}
body {
margin: 0;
font-weight: 500;
font-family: "HelveticaNeue";
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
}
section:nth-of-type(2n) {
background-color: #FE4B74;
}
.intro {
height: 90vh;
}
#intro1 {
height: 90vh;
}
#intro2 {
height: 90vh;
}
.content {
display: table-cell;
vertical-align: middle;
}
h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
p {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
a {
font-weight: 700;
color: #373B44;
position: relative;
}
a:hover {
opacity: 0.8;
}
a:active {
top: 1px;
}
footer {
padding: 1% 5%;
text-align: center;
background-color: #373B44;
color: white;
}
footer a {
color: #FE4B74;
font-weight: 500;
text-decoration: none;
}
.et_pb_social_media_follow {
position: fixed;
left: 30px;
top: 50%;
}
.icon.use-inverted-colors {
color: #fff;
}
.whiteClass {
color: white !important;
}
span {
color: white
}
.blackClass {
color: black
}
<section class="intro" id="intro">
<div class="content ">
<h1>You can create full screen sections without javascript.</h1>
<p>The height is set to 90vh, that means 90% height.</p>
</div>
</section>
<section class="intro1" id="intro1">
<div class="content ">
<h1>Resize your browser and see how they adapt.</h1>
</div>
</section>
<section class="intro2" id="intro2">
<div class="content">
<h1>It's amazing and fast.</h1>
</div>
</section>
<section>
<div class="content" id="content">
<h1>See the browser support.</h1>
</div>
</section>
<footer>
Made by #ckor
</footer>
<ul class="et_pb_module et_pb_social_media_follow et_pb_social_media_follow_0 clearfix et_pb_text_align_center et_pb_bg_layout_light">
<li class="et_pb_social_media_follow_network_0 et_pb_social_icon et_pb_social_network_link et-social-facebook"><span class="et_pb_social_media_follow_network_name linkClass" aria-hidden="true">Follow</span></li><li class="et_pb_social_media_follow_network_1 et_pb_social_icon et_pb_social_network_link et-social-instagram"><span class="et_pb_social_media_follow_network_name linkClass" aria-hidden="true">Follow</span></li>
</ul>

disable left or right arrow at the last item

Just made a simple div slider with navigation arrows. The div slider works just fine, except, I want some sort of CSS styling to be applied to the arrows.
That is, when a user clicks the left or right arrow, up to the last item, apply CSS styling telling the user they've reached the end of the slider.
let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')
let container = document.getElementById('slider')
buttonLeft.addEventListener('click', function() {
container.scrollLeft -= 90
})
buttonRight.addEventListener('click', function() {
container.scrollLeft += 90
})
body {
background-color: #555;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
font-family: 'Helvetica';
}
div#slide_wrapper {
width: 440px;
display: flex;
justify-content: space-between;
height: fit-content;
}
div#slider {
width: 350px;
display: flex;
height: fit-content;
flex-wrap: nowrap;
overflow: hidden;
}
div.thumbnail {
min-width: 80px;
min-height: 80px;
cursor: pointer;
display: grid;
place-items: center;
font-size: 30px;
}
div.thumbnail:not(:last-child) {
margin-right: 10px;
}
div.thumbnail:nth-child(1) {
background-color: darkturquoise;
}
div.thumbnail:nth-child(2) {
background-color: goldenrod;
}
div.thumbnail:nth-child(3) {
background-color: rebeccapurple;
}
div.thumbnail:nth-child(4) {
background-color: powderblue;
}
div.thumbnail:nth-child(5) {
background-color: firebrick;
}
div.thumbnail:nth-child(6) {
background-color: sienna;
}
div.thumbnail:nth-child(7) {
background-color: bisque;
}
div.thumbnail:nth-child(8) {
background-color: navy;
}
div#slide_wrapper>button {
height: fit-content;
align-self: center;
font-size: 24px;
font-weight: 800;
border: none;
outline: none;
}
div#slide_wrapper>button:hover {
cursor: pointer;
}
<div id="slide_wrapper">
<button id="slide_left" class="slide_arrow">❮</button>
<div id="slider">
<div class="thumbnail active">1</div>
<div class="thumbnail">2</div>
<div class="thumbnail">3</div>
<div class="thumbnail">4</div>
<div class="thumbnail">5</div>
<div class="thumbnail">6</div>
<div class="thumbnail">7</div>
<div class="thumbnail">8</div>
</div>
<button id="slide_right" class="slide_arrow">❯</button>
</div>

Simply check to see if you need to disable each button based on the position of the scroll. Then if there is a need to disable a button, add the disabled class to the button, otherwise remove it.
Future enhancements.
Remove the hardcoded 360 value for the scroll end. This should be calculated from the size of the carousel items and the width of the viewport.
Allow more than one carousel to work with the same code. This could be achieved by using a javascript class that would hold the elements inside an object, separate from other carousels.
See the demo:
let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')
let container = document.getElementById('slider')
let checkScroll = function() {
if (container.scrollLeft <= 0)
buttonLeft.classList.add("disabled");
else
buttonLeft.classList.remove("disabled");
if (container.scrollLeft >= 360)
buttonRight.classList.add("disabled");
else
buttonRight.classList.remove("disabled");
}
checkScroll();
buttonLeft.addEventListener('click', function() {
container.scrollLeft -= 90;
checkScroll();
})
buttonRight.addEventListener('click', function() {
container.scrollLeft += 90;
checkScroll();
})
body {
background-color: #555;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
font-family: 'Helvetica';
}
div#slide_wrapper {
width: 440px;
display: flex;
justify-content: space-between;
height: fit-content;
}
div#slider {
width: 350px;
display: flex;
height: fit-content;
flex-wrap: nowrap;
overflow: hidden;
}
div.thumbnail {
min-width: 80px;
min-height: 80px;
cursor: pointer;
display: grid;
place-items: center;
font-size: 30px;
}
div.thumbnail:not(:last-child) {
margin-right: 10px;
}
div.thumbnail:nth-child(1) {
background-color: darkturquoise;
}
div.thumbnail:nth-child(2) {
background-color: goldenrod;
}
div.thumbnail:nth-child(3) {
background-color: rebeccapurple;
}
div.thumbnail:nth-child(4) {
background-color: powderblue;
}
div.thumbnail:nth-child(5) {
background-color: firebrick;
}
div.thumbnail:nth-child(6) {
background-color: sienna;
}
div.thumbnail:nth-child(7) {
background-color: bisque;
}
div.thumbnail:nth-child(8) {
background-color: navy;
}
div#slide_wrapper>button {
height: fit-content;
align-self: center;
font-size: 24px;
font-weight: 800;
border: none;
outline: none;
}
div#slide_wrapper>button:hover {
cursor: pointer;
}
.slide_arrow.disabled {
opacity: 0.2;
cursor: auto !important;
}
<div id="slide_wrapper">
<button id="slide_left" class="slide_arrow">❮</button>
<div id="slider">
<div class="thumbnail active">1</div>
<div class="thumbnail">2</div>
<div class="thumbnail">3</div>
<div class="thumbnail">4</div>
<div class="thumbnail">5</div>
<div class="thumbnail">6</div>
<div class="thumbnail">7</div>
<div class="thumbnail">8</div>
</div>
<button id="slide_right" class="slide_arrow">❯</button>
</div>

a simple solution to this is to actually create a css class that defines the style of arrows when there are no more items and then just add/remove class based on current index of items

Javascript for nav highlight not working in IE

I have a great little script for highlighting links on a one page site that I found here on Stack Overflow. It works perfectly in Chrome and Edge but not in IE. Here is a snippet. Any suggestions?
<head>
<style>
html, body, header, nav, main, section, p {
display: block;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
header {
background-color: #000;
height: 50px;
left: 0;
margin: 0;
padding: 0;
position: fixed;
top: 0;
width: 100%;
}
nav {
height: 50px;
margin: 0 auto;
max-width: 600px;
padding: 0;
position: relative;
top: 0;
}
nav a {
color: #FFF;
display: inline-block;
font-size: 24px;
height: 50px;
line-height: 50px;
margin-right: 24px;
text-decoration: none;
}
nav a:hover {
color: #666;
}
nav a.active {
color: red;
}
main {
margin: 0; padding: 0;
}
section {
box-sizing: border-box;
color: blue;
height: 100vh;
margin: 0 auto;
max-width: 600px;
padding: 50px;
}
.one {
background-color: #FFF;
}
.two {
background-color: #999;
}
.three {
background-color: #666;
}
.four {
background-color: #333;
}
.five {
background-color: #111;
}
h1 {
font-size: 48px; line-height: 1; margin: 0; padding: 0;
}
</style>
</head>
<body>
<header>
<nav>
One
Two
Three
Four
Five
</nav>
</header>
<main>
<section id="one" class="one">
<h1>Section One</h1>
</section>
<section id="two" class="two">
<h1>Section Two</h1>
</section>
<section id="three" class="three">
<h1>Section Three</h1>
</section>
<section id="four" class="four">
<h1>Section Four</h1>
</section>
<section id="five" class="five">
<h1>Section Five</h1>
</section>
</main>
<!--Navigation Highlight Script-->
<script>
const links = document.querySelectorAll('nav a');
const sections = document.querySelectorAll('section');
function changeLinkState() {
let index = sections.length;
while(--index && window.scrollY + 1 < sections[index].offsetTop) {}
links.forEach((link) => link.classList.remove('active'));
links[index].classList.add('active');
}
changeLinkState();
window.addEventListener('scroll', changeLinkState);
</script>
</body>
Here is the full code. Of course I've omitted the html, title, and meta tags. Any help would be appreciated.

I assume that you are using an IE 11 browser.
The IE browser does not support the Arrow functions(=>). It can be a possible reason that why your code is not working in the IE browser.
I have tried to modify your code, you can try to make a test with this code and let us know whether it works or not.
<!doctype html>
<html>
<head>
<title>demo</title>
<style>
html, body, header, nav, main, section, p {
display: block;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
header {
background-color: #000;
height: 50px;
left: 0;
margin: 0;
padding: 0;
position: fixed;
top: 0;
width: 100%;
}
nav {
height: 50px;
margin: 0 auto;
max-width: 600px;
padding: 0;
position: relative;
top: 0;
}
nav a {
color: #FFF;
display: inline-block;
font-size: 24px;
height: 50px;
line-height: 50px;
margin-right: 24px;
text-decoration: none;
}
nav a:hover {
color: #666;
}
nav a.active {
color: red;
}
main {
margin: 0; padding: 0;
}
section {
box-sizing: border-box;
color: blue;
height: 100vh;
margin: 0 auto;
max-width: 600px;
padding: 50px;
}
.one {
background-color: #FFF;
}
.two {
background-color: #999;
}
.three {
background-color: #666;
}
.four {
background-color: #333;
}
.five {
background-color: #111;
}
h1 {
font-size: 48px; line-height: 1; margin: 0; padding: 0;
}
</style>
</head>
<body>
<header>
<nav>
One
Two
Three
Four
Five
</nav>
</header>
<main>
<section id="one" class="one">
<h1>Section One</h1>
</section>
<section id="two" class="two">
<h1>Section Two</h1>
</section>
<section id="three" class="three">
<h1>Section Three</h1>
</section>
<section id="four" class="four">
<h1>Section Four</h1>
</section>
<section id="five" class="five">
<h1>Section Five</h1>
</section>
</main>
<!--Navigation Highlight Script-->
<script>
const links = document.querySelectorAll('nav a');
const sections = document.querySelectorAll('section');
var reg = new RegExp('(^| )active($| )','g');
function changeLinkState()
{
let index = sections.length;
var scrollTop = document.documentElement.scrollTop;
while(--index && scrollTop + 1 < sections[index].offsetTop)
{
}
for (var i=0; i<links.length; i++)
{
links[i].className = links[i].className.replace(reg,' ');
}
for (var i=0; i<links.length; i++)
{
if (sections[index].getAttribute("id")==links[i].getAttribute("href").substring(1))
{
links[i].className = "active";
}
}
}
changeLinkState();
window.addEventListener('scroll', changeLinkState);
</script>
</body>
</html>
Output:

Problem with dragging and dropping elements in JS

Im trying to do some dragging and dropping on elements that is being created with the click of a button.
I have read a lot of post and watched at couple of videos, but i cant really find a solution.
I know i got a problem with the looping of the elements that is being created. Thats why i packed it in its own function so that it should run after its created.
I also think that the type i am trying to append is wrong here. thats why i made a little function to see the type.
I should mention that i am new to JS and just trying to build some to learn. I hope that you guys can help by posting a solution or maybe give me some hints. I might have missed some theory , as i am shelftaught.
Here is my code.
Its not made 100 mobile friendly! Look for a big round green button with a + for adding elements to the rows in the snippet! :-)
const btn = document.querySelector('#btn');
const workRow = document.querySelector('.workrow');
const workRows = document.querySelectorAll('.workrow');
const workTasks = document.querySelectorAll('.workrowtask');
const typeOf = () => {
console.log(typeof workTasks)
};
btn.addEventListener('click', () => {
makePost();
loopTasks();
typeOf();
});
document.addEventListener('click', delPost);
function makePost() {
const div = document.createElement('div');
const textnode = document.createTextNode('Hello World');
div.appendChild(textnode);
div.setAttribute('draggable', true);
div.className = ('workrowtask');
const delbtn = document.createElement('button');
const textnodebtn = document.createTextNode('-');
delbtn.appendChild(textnodebtn);
delbtn.className = ('worktaskdelbtn');
div.appendChild(delbtn);
workRow.appendChild(div);
};
function delPost(e) {
if(e.target && e.target.className === 'worktaskdelbtn') {
e.target.parentNode.remove();
};
};
function loopTasks() {
for (let t = 0; t < workTasks.length; t++) {
const task = workTasks[t]
task.addEventListener('dragstart', (e) => {
e.preventDefault();
console.log('dragstart')
});
task.addEventListener('dragend', (e) => {
e.preventDefault()
console.log('dragend')
});
}};
for (let r = 0; r < workRows.length; r++) {
const rows = workRows[r]
rows.addEventListener('dragover', (e) => {
e.preventDefault();
console.log('dragover');
});
rows.addEventListener('dragenter', (e) => {
e.preventDefault();
console.log('dragenter');
});
rows.addEventListener('drop', (e) => {
e.preventDefault();
console.log('drop');
rows.appendChild(workTasks)
});
};
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #393939;
}
.header {
background-color: #00D189;
text-transform: uppercase;
color: white;
text-align: center;
width: 100%;
padding: 20px 0px;
}
.worksection {
width: 100%;
margin-top: 50px;
display: flex;
justify-content: space-evenly;
}
.workrow {
width: 300px;
background-color:white;
height: 600px;
border-radius: 30px 30px 0px 0px;
overflow: scroll;
}
.workheader {
width: 300px;
padding: 20px 0px;
border-radius: 30px 30px 0px 0px;
background-color: #00D189;
color: white;
text-align: center;
}
.buttonwrapper {
display: flex;
justify-content: flex-end;
}
.buttonwrapper button {
border-radius: 50%;
background-color: #00D189;
height: 50px;
width: 50px;
border: none;
color: white;
font-size: 30px;
margin: 30px 15px 0px 0px;
cursor: pointer;
outline: none;
}
.workrowtask {
width: 100%;
background-color: gray;
padding: 10px 0px;
margin-top: 10px;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
}
.worktaskdelbtn {
background-color: red;
color: white;
height: 15px;
width: 15px;
border-radius: 50%;
border: none;
cursor: pointer;
outline: none;
}
#media only screen and (max-width: 1214px) {
.worksection {
flex-flow: column;
align-items: center;
}
.workrow {
margin-bottom: 50px;
}
.worksection {
position: relative;
}
.buttonwrapper {
position: absolute;
left: 30px;
bottom: 300px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag&droptodo</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header class="header">
<h1>The Drag&Drop2Do</h1>
</header>
<section class="worksection">
<div class="workrow">
<div class="workheader">
<p>Dagens opgaver</p>
</div>
</div>
<div class="workrow">
<div class="workheader">
<p>Færdige opgaver</p>
</div>
</div>
<div class="workrow">
<div class="workheader">
<p>Udskudte opgaver</p>
</div>
</div>
<div class="workrow">
<div class="workheader">
<p>Afsluttet opgaver</p>
</div>
</div>
</section>
<div class="buttonwrapper">
<button id="btn">+</button>
</div>
<script src="./javascript/script.js"></script>
</body>
</html>

Your issue is in this:
rows.addEventListener('drop', (e) => {
................
rows.appendChild(workTasks)
});
workTasks is empty.
On dragenter event you can set an attribute to the element and use it in the drop:
rows.addEventListener('drop', function (e) {
e.preventDefault();
var currTarsk = document.querySelector('.workrowtask[isdragging="true"]');
currTarsk.removeAttribute('isdragging')
rows.appendChild(currTarsk);
});
The snippet:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #393939;
}
.header {
background-color: #00D189;
text-transform: uppercase;
color: white;
text-align: center;
width: 100%;
padding: 20px 0px;
}
.worksection {
width: 100%;
margin-top: 50px;
display: flex;
justify-content: space-evenly;
}
.workrow {
width: 300px;
background-color: white;
height: 600px;
border-radius: 30px 30px 0px 0px;
overflow: scroll;
}
.workheader {
width: 300px;
padding: 20px 0px;
border-radius: 30px 30px 0px 0px;
background-color: #00D189;
color: white;
text-align: center;
}
.buttonwrapper {
display: flex;
justify-content: flex-end;
}
.buttonwrapper button {
border-radius: 50%;
background-color: #00D189;
height: 50px;
width: 50px;
border: none;
color: white;
font-size: 30px;
margin: 30px 15px 0px 0px;
cursor: pointer;
outline: none;
}
.workrowtask {
width: 100%;
background-color: gray;
padding: 10px 0px;
margin-top: 10px;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
}
.worktaskdelbtn {
background-color: red;
color: white;
height: 15px;
width: 15px;
border-radius: 50%;
border: none;
cursor: pointer;
outline: none;
}
#media only screen and (max-width: 1214px) {
.worksection {
flex-flow: column;
align-items: center;
}
.workrow {
margin-bottom: 50px;
}
.worksection {
position: relative;
}
.buttonwrapper {
position: absolute;
left: 30px;
bottom: 300px;
}
}
<header class="header">
<h1>The Drag&Drop2Do</h1>
</header>
<section class="worksection">
<div class="workrow">
<div class="workheader">
<p>Dagens opgaver</p>
</div>
</div>
<div class="workrow">
<div class="workheader">
<p>Færdige opgaver</p>
</div>
</div>
<div class="workrow">
<div class="workheader">
<p>Udskudte opgaver</p>
</div>
</div>
<div class="workrow">
<div class="workheader">
<p>Afsluttet opgaver</p>
</div>
</div>
</section>
<div class="buttonwrapper">
<button id="btn">+</button>
</div>
<script>
const btn = document.querySelector('#btn');
const workRow = document.querySelector('.workrow');
const workRows = document.querySelectorAll('.workrow');
const workTasks = document.querySelectorAll('.workrowtask');
const typeOf = function () {
console.log(typeof workTasks)
};
btn.addEventListener('click', function () {
makePost();
loopTasks();
//typeOf();
});
document.addEventListener('click', delPost);
function makePost() {
const div = document.createElement('div');
const textnode = document.createTextNode('Hello World');
div.appendChild(textnode);
div.setAttribute('draggable', true);
div.className = ('workrowtask');
const delbtn = document.createElement('button');
const textnodebtn = document.createTextNode('-');
delbtn.appendChild(textnodebtn);
delbtn.className = ('worktaskdelbtn');
div.appendChild(delbtn);
workRow.appendChild(div);
};
function delPost(e) {
if (e.target && e.target.className === 'worktaskdelbtn') {
e.target.parentNode.remove();
};
};
function loopTasks() {
for (let t = 0; t < workTasks.length; t++) {
const task = workTasks[t]
task.addEventListener('dragstart', function (e) {
e.preventDefault();
});
task.addEventListener('dragend', function (e) {
e.preventDefault()
});
}
};
for (let r = 0; r < workRows.length; r++) {
const rows = workRows[r]
rows.addEventListener('dragover', function (e) {
e.preventDefault();
});
rows.addEventListener('dragenter', function (e) {
e.preventDefault();
e.target.setAttribute('isdragging', true);
});
rows.addEventListener('drop', function (e) {
e.preventDefault();
var currTarsk = document.querySelector('.workrowtask[isdragging="true"]');
currTarsk.removeAttribute('isdragging')
rows.appendChild(currTarsk);
});
};
</script>

Try this:
function allowDrop(allowDropEvent) {
allowDropEvent.target.style.color = 'blue';
allowDropEvent.preventDefault();
}
function drag(dragEvent) {
dragEvent.dataTransfer.setData('text', dragEvent.target.id);
dragEvent.target.style.color = 'green';
}
function drop(dropEvent) {
dropEvent.preventDefault();
var data = dropEvent.dataTransfer.getData('text');
dropEvent.target.appendChild(document.getElementById(data));
document.getElementById('drag').style.color = 'black';
}
.container {
display: grid;
width: 200px;
height: 100px;
}
#div1 {
grid-row: 1;
grid-column: 1;
border: 1px solid #aaa;
width: 100px;
height: 100px;
padding: 10px;
}
#div2 {
grid-row: 1;
grid-column: 2;
border: 1px solid #aaa;
width: 100px;
height: 100px;
padding: 10px;
}
<div class="container">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<span id="drag" draggable="true" ondragstart="drag(event)">Drag me to the other box</span>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
A simple example of the use of the HTML Drag and Drop API.
You can also check out the MDN Web Docs for:
HTML Drag and Drop API reference
JavaScript reference
If this doesn't help, please tell me.

I've removed unnecessary parts from your JavaScript code. Also changed CSS and HTML just for simplifying the answer.
Note: I removed overflow:scroll, because it looks weird in your example.
Here is working example:
const btn = document.querySelector('#btn');
const workRow = document.querySelector('.workrow');
const workRows = document.querySelectorAll('.workrow');
let counter = 0;
btn.addEventListener('click', () => {
makePost();
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
if (ev.target.className == 'workrow') {
ev.target.appendChild(document.getElementById(data));
}
}
function makePost() {
const div = document.createElement('div');
const textnode = document.createTextNode('Hello World ' + counter);
div.id = 'helloWorld' + counter;
counter++;
div.appendChild(textnode);
div.setAttribute('draggable', true);
div.className = 'workrowtask';
const delbtn = document.createElement('button');
const textnodebtn = document.createTextNode('-');
delbtn.appendChild(textnodebtn);
delbtn.className = 'worktaskdelbtn';
div.appendChild(delbtn);
delbtn.addEventListener('click', delPost);
div.addEventListener('dragstart', drag);
workRow.appendChild(div);
}
function delPost(e) {
if (e.target && e.target.className === 'worktaskdelbtn') {
e.target.parentNode.remove();
}
}
for (let r = 0; r < workRows.length; r++) {
const row = workRows[r]
row.addEventListener('dragover', allowDrop);
row.addEventListener('dragenter', allowDrop);
row.addEventListener('drop', drop);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #393939;
}
.header {
background-color: #00D189;
text-transform: uppercase;
color: white;
text-align: center;
width: 100%;
padding: 20px 0px;
display: none;
/*!!!*/
}
.worksection {
width: 100%;
/*margin-top: 50px;*/
display: flex;
justify-content: space-evenly;
}
.workrow {
width: 200px;
background-color: white;
height: 300px;
border-radius: 30px 30px 0px 0px;
overflow: hidden;
}
.workheader {
width: 200px;
padding: 20px 0px;
border-radius: 30px 30px 0px 0px;
background-color: #00D189;
color: white;
text-align: center;
}
.buttonwrapper {
display: flex;
justify-content: flex-end;
}
.buttonwrapper button {
border-radius: 50%;
background-color: #00D189;
height: 50px;
width: 50px;
border: none;
color: white;
font-size: 30px;
/*margin: 30px 15px 0px 0px;*/
cursor: pointer;
outline: none;
}
.workrowtask {
width: 100%;
background-color: gray;
padding: 10px 0px;
margin-top: 10px;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
}
.worktaskdelbtn {
background-color: red;
color: white;
height: 15px;
width: 15px;
border-radius: 50%;
border: none;
cursor: pointer;
outline: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag&droptodo</title>
</head>
<body>
<header class="header">
<h1>The Drag&Drop2Do</h1>
</header>
<section class="worksection">
<div class="workrow">
<div class="workheader">
<p>Dagens opgaver</p>
</div>
</div>
<div class="workrow">
<div class="workheader">
<p>Færdige opgaver</p>
</div>
</div>
<div class="workrow">
<div class="workheader">
<p>Udskudte opgaver</p>
</div>
</div>
</section>
<div class="buttonwrapper">
<button id="btn">+</button>
</div>
</body>
</html>