I created a link button <a></a> via a javascript function – but after adding the Css class with the styles to it I found there is an extra line I forgot to remove, so I hid it (Ctrl + /) and then I saw that it changed the position of the <a></a> – while it displayed perfectly before I tried to hide it.
As you can see in the code below – the unnecessary line seem to be completely useless and it doesn’t affect anything besides the class of the <a></a> element.
How can I remove the extra line – while maintaining the style of the class?
Thank you!!
let preventReading = document.createElement("div");
document.body.appendChild(preventReading);
preventReading.classList.add("gradient");
let exLink = document.createElement('a');
exLink.textContent = "Click to Open Article"
preventReading.appendChild(exLink);
exLink.classList.add('expand-link');
// The unnecessary Line - Press (Ctrl + /) to see what happens:
preventReading.classList.add('expand-link');
// The unnecessary Line - Press (Ctrl + /) to see what happens.
let count = 1;
document.getElementsByClassName('expand-link')[0].onclick = function () {
console.log("Paragraph was expanded " + (count++) + " times");
if (count > 0) {
preventReading.classList.remove("gradient")
}
};* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}
/* The First Flexbox */
.drag-container {
display: flex;
min-height: 100vh;
}
/* Divider of panel-one & panel-two [Affects panel-two] */
[class^="panel"] {
padding: 0px 0px;
background-color: white;
}
/* Left Panel */
.panel-one {
width: 48.6%;
}
/* Right Panel */
.panel-two {
flex: 1;
width: 52.4%;
}
/* The Vertical Line in The Middle of the Screen */
.dragbar {
position: relative;
padding: 2px;
cursor: default;
background-color: rgb(25, 0, 75);
}
/* The Circle inside the Middle of the Vertical Line */
.slider {
position: relative;
z-index: 9;
cursor: default;
/*set the appearance of the slider:*/
width: 40px;
height: 40px;
background-color: white;
opacity: 1;
border-radius: 50%;
background-image: url("../css/Dragbar Slider.svg");
}
.d2 {
width: 100%;
height: 100%;
background: url(https://i.sstatic.net/0kxp5kdC.png);
background-repeat: no-repeat;
background-size: 100%;
background-position: top;
transition: 1s;
}
.expand-link {
background-color: black;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: relative;
top: 114px;
margin: auto;
border-radius: 50px;
}
.gradient {
background: linear-gradient(to bottom, transparent, white 1%);
width: 100%;
height: 6000px;
position: absolute;
top: 792px;
opacity: 1;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Question</title>
<link rel="stylesheet" href="Q.css">
</head>
<body>
<div class="drag-container">
<div class="panel-one" ; id="drag-left">
<div class="d2"></div>
</div>
<div class="dragbar" ; id="dragbar">
<div class="slider" ; style="top: 50vh; position: sticky;"></div>
</div>
<div class="panel-two" ; id="drag-right">
<div class="container">
<img src="https://i.sstatic.net/jtf4htrF.png">
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni tenetur dignissimos cumque ullam odio
et libero harum dolorem aut corporis iure, deleniti in eos laborum explicabo, quis sapiente, id ratione.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni tenetur dignissimos cumque ullam odio
et libero harum dolorem aut corporis iure, deleniti in eos laborum explicabo, quis sapiente, id ratione.
</p>
</div>
</div>
</div>
</div>
<script src="Q.js"></script>
</body>
</html>Also note that the extra line is what’s causing the button appear again down bellow after being clicked (Hide it to see the diffrences)
1