I have a tricky problem. When a user presses on a div I want to add a css class to that div with name .active, using css transition. Then, after a short timeout, I want to handle transitionend event where I will remove the class .active from the div. The problem is, if a user presses on the button too fast, say 15-20 times per second, transitionend eventually stops firing.
You can see this effect here(clickable link), open Chrome browser(I wasn't able to reproduce it in FF) and start clicking on the button as fast as you can. After 15-20 clicks transitionend will stop triggering.
I think, when transitionend handler is still working, a user can press the button once again and the div will get .active class, but it will not trigger transition event. The question is - is it possible to write bullet-proof code to clear the .active class using transitionend event only ?
Thank you.
*edit* embedded snippet below
var blk = document.querySelector('.animated-element');
var btn = document.querySelector('.button');
var ctr = document.querySelector('.click-counter');
var lgr = document.querySelector('.logger');
btn.addEventListener('click', function() {
var currentValue = Number(ctr.innerHTML);
ctr.innerHTML = ++currentValue;
if (!blk.classList.contains('active')) {
blk.classList.add('active');
}
});
blk.addEventListener('transitionend', function() {
blk.classList.remove('active');
var li = document.createElement('li');
li.innerHTML = 'Transition end';
lgr.appendChild(li);
});
.scene {
position: relative;
width: 300px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.animated-element {
width: 200px;
height: 200px;
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
background-color: #ff0000;
color: white;
border-radius: 5px;
transition: all 500ms;
}
.animated-element.active {
font-weight: 700;
/* background-color: #ff0055; */
}
.button {
padding: 5px 10px;
border: 2px solid black;
border-radius: 5px;
text-align: center;
cursor: pointer;
user-select: none;
}
.click-counter {
position: absolute;
top: 0;
left: 0;
min-height: 17px;
min-width: 17px;
padding: 2px 4px;
color: gray;
font-weight: bold;
text-align: center;
border: 2px solid gray;
border-radius: 50%;
user-select: none;
}
.logger {
width: 300px;
padding: 0;
list-style: none;
text-align: center;
}
<body>
<main>
<div class="scene">
<div class="click-counter">0</div>
<div class="animated-element">
<span>ABC</span>
</div>
<div class="button">
Press me several times
</div>
</div>
<ul class="logger"></ul>
</main>
</body>
Related
What I want to do is when I click the task it will have a line through the text means that I'm done with the task. but the add event listener function for this is not working, I'm working with the javascript toggle and that's all I can think of right now to achieve this functionality.
Is there another way to do this? I searched on the internet and it seems complicated when I'm trying to figure it out.
const addBtn = document.querySelector("#push");
const taskInput = document.querySelector("#taskInput");
const taskOutput = document.querySelector("#tasks");
addBtn.addEventListener("click", function() {
let newTasks = taskInput.value;
if (newTasks.length == 0) {
alert("Please enter a task");
} else {
taskOutput.innerHTML += `<div class="task">
<span id="taskname">${newTasks} </span>
<button class="delete" id="deleteButton"><i class="fa-solid fa-trash"></i> </button>
</div>
`;
//delete
let deleteBtn = document.querySelector("#deleteButton");
deleteBtn.addEventListener("click", function() {
this.parentNode.remove();
});
//line through
let theTask = document.querySelectorAll(".task");
theTask.addEventListener("click", function() {
this.classList.toggle("completed");
});
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient( 90deg, rgba(241, 206, 221, 1) 0%, rgba(124, 184, 254, 1) 100%);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Kumbh Sans', sans-serif;
}
.container {
border: 2px solid white;
width: 50%;
min-width: 450px;
margin: auto;
padding: 30px 40px;
}
#new-task {
position: relative;
background-color: white;
padding: 30px 20px;
border-radius: 1em;
}
#new-task input {
width: 70%;
height: 45px;
font-family: 'Manrope', sans-seif;
font-size: 1.2em;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
font-weight: 500;
position: relative;
border-radius: 5px;
}
#new-task input:focus {
outline: none;
border-color: violet;
}
#new-task button {
font-family: 'Manrope', sans-seif;
position: relative;
float: right;
width: 25%;
height: 45px;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
border: none;
background-color: violet;
color: white;
cursor: pointer;
}
#tasks {
background-color: white;
padding: 30px 20px;
margin-top: 50px;
border-radius: 10px;
width: 100%;
}
.task {
background-color: white;
height: 50px;
padding: 5px 10px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid violet;
cursor: pointer;
}
.task span {
font-size: 18px;
font-weight: 400;
}
.task button {
background-color: violet;
color: white;
height: 100%;
width: 40px;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.task button:hover {
background-color: red;
}
.completed {
text-decoration: line-through;
}
<body>
<div class="container">
<div id="new-task">
<input type="text" name="" id="taskInput" placeholder="Task to be done" />
<button id="push">ADD</button>
</div>
<div id="tasks"></div>
</div>
<script src="/script.js"></script>
</body>
querySelectorAll will return the list of nodes matching the selector tasks. So you have to iterate through each of those nodes and add your listener. See the below code snippet
let theTasks = document.querySelectorAll(".task");
theTasks.forEach((task) => {
task.addEventListener("click", function() {
this.classList.toggle("completed");
});
});
theTask is a list of nodes. Trying to attach event listener on this list is causing issues.
Also, you will be inserting lots of buttons with same id deleteButton and spans with same id taskname which is incorrect and can cause undefined behavior.
For theTask fix, you may want to do something like:
let theTasks = [...document.querySelectorAll(".task")];
theTasks.forEach(task => {
task.addEventListener("click", function() {
this.classList.toggle("completed");
})
});
Using innerHTML to create manipulate the DOM for an application like a todo list is probably not a good idea. The answers to Advantages of createElement over innerHTML? give good explanations why.
It is worth noting that in the innerHTML code, the span and the button are created with an id and so all of these elements will have the same id. It is also probably not a good idea to have duplicate ids on one page. Why are duplicate ID values not allowed in HTML? explains why.
Also, adding event listeners to every new task is also probably not a good idea. What is DOM Event delegation? gives a good explanation why.
Finally, the Difference between HTMLCollection, NodeLists, and arrays of objects and Document.querySelectorAll() explain how to get lists of elements that can be manipulated.
So, I have rewritten the task creation code in the addBtn.addEventListener to show one way how this could be done with document.createElement().
And I have created a separate event listener on the Tasks container div, which handles both task deletion and task completion.
I also added the following CSS so that clicking on a trash can icon is handled by the parent button. Without this CSS, clicking on an icon would not delete the task.
div#tasks i {
pointer-events: none;
}
To make the todo list more visible in the code snippet below, I reduced the heights, margins, and paddings of some of the elements in the CSS.
I also added a link to the font awesome icon library.
const addBtn = document.querySelector("#push");
const taskInput = document.querySelector("#taskInput");
const taskOutput = document.querySelector("#tasks");
taskOutput.addEventListener("click", function(event) {
if (event.target && event.target.nodeName === "SPAN") {
event.target.classList.toggle("completed");
}
if (event.target && event.target.nodeName === "BUTTON") {
event.target.parentNode.remove();
}
});
addBtn.addEventListener("click", function() {
let newTasks = taskInput.value;
if (newTasks.length == 0) {
alert("Please enter a task");
} else {
// Create a task DIV
const newTaskElement = document.createElement("div");
newTaskElement.classList.add("task");
// Create a SPAN with the task name
const newTaskNameElement = document.createElement("span");
const taskTextnode = document.createTextNode(newTasks);
newTaskNameElement.appendChild(taskTextnode);
// Create a BUTTON with a TRASH CAN ICON
const newTaskDeleteButton = document.createElement("button");
const deleteImageElement = document.createElement("i");
deleteImageElement.classList.add("fa-solid", "fa-trash");
newTaskDeleteButton.appendChild(deleteImageElement);
// Append the SPAN and the BUTTON to the task DIV
newTaskElement.appendChild(newTaskNameElement);
newTaskElement.appendChild(newTaskDeleteButton);
// Append the task DIV to the TASK LIST DIV
taskOutput.appendChild(newTaskElement);
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient( 90deg, rgba(241, 206, 221, 1) 0%, rgba(124, 184, 254, 1) 100%);
font-family: 'Kumbh Sans', sans-serif;
}
/* ADDED TO MAKE SURE THAT THE TRASH ICON DOES NOT PROCESS CLICKS */
div#tasks i {
pointer-events: none;
}
.container {
border: 2px solid white;
width: 50%;
min-width: 450px;
margin: auto;
padding: 3px 4px;
}
#new-task {
position: relative;
background-color: white;
padding: 6px 4px;
border-radius: 1em;
}
#new-task input {
width: 70%;
height: 45px;
font-family: 'Manrope', sans-seif;
font-size: 1.2em;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
font-weight: 500;
position: relative;
border-radius: 5px;
}
#new-task input:focus {
outline: none;
border-color: violet;
}
#new-task button {
font-family: 'Manrope', sans-seif;
position: relative;
float: right;
width: 25%;
height: 45px;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
border: none;
background-color: violet;
color: white;
cursor: pointer;
}
#tasks {
background-color: white;
padding: 6px 4px;
margin-top: 5px;
border-radius: 10px;
width: 100%;
min-height: 50px;
}
.task {
background-color: white;
height: 50px;
padding: 5px 10px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid violet;
cursor: pointer;
}
.task span {
font-size: 18px;
font-weight: 400;
}
.task button {
background-color: violet;
color: white;
height: 100%;
width: 40px;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.task button:hover {
background-color: red;
}
.completed {
text-decoration: line-through;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet" />
<div class="container">
<div id="new-task">
<input type="text" name="" id="taskInput" placeholder="Task to be done" />
<button id="push">ADD</button>
</div>
<div id="tasks"></div>
</div>
I'm not sure what's causing the form button to fire the event of turning the page theme back to white after the dark mode has been clicked and enabled.
Not sure if that may be confusing, but for example if you open the page it's automatically on the light mode theme, when you click "dark" to switch the theme to dark and then click the button "search" while the theme is in "dark", the page will switch back to "light". What am I doing wrong or missing out? Please advise. Also, how could I refractor this JS better and simpler?
Thanks!
HTML - left out the head part intentionally
<html lang="en" color-mode="light">
<body>
<header class="header-container">
<h1 class="title">devfinder</h1>
<div class="light-dark mode">
<span
class="theme-toggle-btn light-hidden light"
aria-label="light theme toggle button">
LIGHT
<img class="light-icon" src="assets/icon-sun.svg" alt="" />
</span>
<span
class="theme-toggle-btn dark-hidden"
aria-label="dark theme toggle button">
DARK
<img src="assets/icon-moon.svg" alt="" />
</span>
</div>
</header>
<main class="content-container">
<section>
<form autocomplete="off" class="form" id="search">
<input
type="text"
id="search"
placeholder="Search GitHub username…" />
<button class="btn">Search</button>
</form>
JS
const themeBtn = document.querySelectorAll(".theme-toggle-btn");
const toggle = function (e) {
if (e.currentTarget.classList.contains("light-hidden")) {
document.documentElement.setAttribute("color-mode", "light");
localStorage.setItem("color-mode", "light");
return;
}
document.documentElement.setAttribute("color-mode", "dark");
localStorage.setItem("color-mode", "dark");
};
themeBtn.forEach((btn) => {
btn.addEventListener("click", toggle);
});
CSS
:root {
--monoFont: 'Space Mono', monospace;
--accent-blue: #0079FF;
--error-red: #F74646;
--light-hover: #60ABFF;
}
:root[color-mode="light"] {
--primary-text-color:#697C9A;
--secondary-text-color: #4B6A9B;
--accent-color: #2B3442;
--background-color: #F6F8FF;
--container-background: #FEFEFE;
--font-color: #222731;
}
:root[color-mode="dark"] {
--primary-text-color: #FFFFFF;
--background-color: #141D2F;
--container-background: #1E2A47;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
:root[color-mode="light"] .light-hidden,
:root[color-mode="dark"] .dark-hidden {
display: none;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--background-color);
height: 100vh;
margin: 0;
color: var(--primary-text-color);
font-family: var(--monoFont);
}
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2em;
}
.header-container, .content-container {
width: 100%;
max-width: 730px;
}
/* header title */
.title {
color: var(--font-color);
font-size: 1.63rem;
}
/* theme toggle btn */
.theme-toggle-btn {
background-color: var(--background-color);
border: none;
color: var(--primary-text-color);
font-size: .7rem;
font-weight: 700;
letter-spacing: 1.5px;
cursor: pointer;
}
.theme-toggle-btn img {
margin: 0 0 -0.45em 0.75em;
width: 20px;
height: 20px;
}
/* search form */
.form {
position: relative;
display: flex;
align-items: center;
height: 69px;
}
.form input {
background-color: var(--container-background);
border: none;
width: 100%;
padding-left: 1.5em;
margin-bottom: 2em;
color: var(--font-color);
font-size: 1.05rem;
font-family: inherit;
font-weight: 400;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;;
}
.form input::placeholder {
color: var(--secondary-text-color);
}
.btn {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-80%);
width: 100%;
max-width: 106px;
height: 50px;
background-color: var(--accent-blue);
border: none;
color: #FFFFFF;
font-size: 1rem;
border-radius: 10px;
cursor: pointer;
}
.btn:hover {
background-color: var(--light-hover);
}
I think when you're clicking the "Search" button, it's refreshing the page and reloads the html template. Because you have "color-mode="light" within the html element, it will then load the page in light mode rather than dark mode.
I think the problem is: your not consuming the selection from localStorage. To persist the user selection, you should check the preference in localStorage when the page loads.
I have a custom select list which I did with checkbox and label elements.
Then I added a little JS script that changes options on click.
It works perfectly, except you can't close it on click outside of it or its child elements.
I tried to use event listener(commented in snippet) to track if the click was done outside and if it is - change checkbox status on 'false' and it kinda worked, however, it breaks the original checkbox functionality and you can't now close it in any way except for clicking outside of it. Is there a way I can fix this?
//SELECT FROM LIST
function selectList(id) {
let selected = document.getElementById('selected');
selected.innerHTML = id;
}
//BREAKS CHECKBOX
//window.addEventListener('mouseup', function(event){
// let checkbox = document.getElementById('checkbox');
// if (event.target != checkbox && event.target.parentNode != checkbox){
// checkbox.checked = false;
// }
// });
.btn {
display: block;
width: 100px;
height: 50px;
text-align: center;
color: white;
background: black;
border-radius: 15px;
line-height: 50px;
cursor: pointer;
user-select: none;
position: relative;
}
.btn:active {
background: grey;
}
.btn ul {
display: none;
list-style: none;
color: black;
flex-direction: column;
margin: 0;
padding: 2.5px 5px;
left: 0;
top: 50px;
background: grey;
border-radius: 15px;
position: absolute;
}
.btn ul li {
display: block;
width: 90px;
height: 35px;
line-height: 35px;
background: black;
border-radius: 15px;
color: white;
margin: 2.5px 0;
}
.btn ul li:active {
background: grey;
}
/* CHECKBOX CHEKCED */
#checkbox:checked + .btn ul {
display: flex;
}
<input type="checkbox" id="checkbox">
<label class="btn" for="checkbox">
<span id="selected">SELECT</span>
<ul>
<li onclick="selectList('Opt1')">Opt1</li>
<li onclick="selectList('Opt2')">Opt2</li>
<li onclick="selectList('Opt3')">Opt3</li>
</ul>
</label>
Your strategy uses css to style the state of the dropdown based on the radio option value.
So there's no event handler in place already catching that point in time and the only approach to close the dropdown when you click outside, was using a click event handler on the main document and check for the element triggering the event to be of type HTML. Not the best approach indeed. (I edited the question to use a better approach... there's a container having the class dropdown now and event.target gets checked for having an ancestor with such class to understand if the click was fired from the dropdown itself or outside of it)
document.addEventListener('click', function(event){
if(event.target.closest('.dropdown') === null){
document.querySelector('#checkbox').checked = false;
}
});
Anyway once there, the logic just force the radio option to unchecked and restore the dropdown collapse state.
//SELECT FROM LIST
function selectList(id) {
let selected = document.getElementById('selected');
selected.innerHTML = id;
}
document.addEventListener('click', function(event){
if(event.target.closest('.dropdown') === null){
document.querySelector('#checkbox').checked = false;
}
});
//BREAKS CHECKBOX
//window.addEventListener('mouseup', function(event){
// let checkbox = document.getElementById('checkbox');
// if (event.target != checkbox && event.target.parentNode != checkbox){
// checkbox.checked = false;
// }
// });
.btn {
display: block;
width: 100px;
height: 50px;
text-align: center;
color: white;
background: black;
border-radius: 15px;
line-height: 50px;
cursor: pointer;
user-select: none;
position: relative;
}
.btn:active {
background: grey;
}
.btn ul {
display: none;
list-style: none;
color: black;
flex-direction: column;
margin: 0;
padding: 2.5px 5px;
left: 0;
top: 50px;
background: grey;
border-radius: 15px;
position: absolute;
}
.btn ul li {
display: block;
width: 90px;
height: 35px;
line-height: 35px;
background: black;
border-radius: 15px;
color: white;
margin: 2.5px 0;
}
.btn ul li:active {
background: grey;
}
/* CHECKBOX CHEKCED */
#checkbox:checked + .btn ul {
display: flex;
}
<div class="dropdown">
<input type="checkbox" id="checkbox">
<label class="btn" for="checkbox">
<span id="selected">SELECT</span>
<ul>
<li onclick="selectList('Opt1')">Opt1</li>
<li onclick="selectList('Opt2')">Opt2</li>
<li onclick="selectList('Opt3')">Opt3</li>
</ul>
</label>
</div>
Trying to make counter(till 9) by javascript.
Hid the counting of 1 to 9. So, when the user enters the target then scroll the counter by its height so the hidden numbers will be shown. Used two set intervals in the code maybe that's why code not running according to expectation.
codepen link --> https://codepen.io/aryansharma-2002/pen/GRyZJJv
same code pasted here:-
HTML CODE
<div class="input">
<h1 class="heading">Enter a value between 0 and 9</h1>
<div class="left">
<input type="number" id="count" placeholder="Enter Number">
</div>
<div class="right">
<button class="submit-btn" id="submit-btn">Start Counter</button>
</div>
</div>
<div class="output">
<div class="count-output" id="count-output">
<span class="zero" data-count="0">0</span>
<span class="one" data-count="1">1</span>
<span class="two" data-count="2">2</span>
<span class="three" data-count="3">3</span>
<span class="four" data-count="4">4</span>
<span class="five" data-count="5">5</span>
<span class="six" data-count="6">6</span>
<span class="seven" data-count="7">7</span>
<span class="eight" data-count="8">8</span>
<span class="nine" data-count="9">9</span>
</div>
</div>
NO NEED TO READ FULL CSS CODE. THE MAIN CSS is that to div.count-output is given some fixed height and width and then the span tag inside it, is giving 100% height and width so that only one number shown at a time. And all the other numbers is hidden by using overflow: hidden; css rule. So, we will scroll the .count-output by using javascript.
CSS CODE
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Roboto', sans-serif;
}
.input{
width: 90%;
margin: 10px auto;
padding: 50px;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(44,177,204,0.5374883229659051) 0%, rgba(255,0,218,0.32180204845610116) 100%);
}
.heading{
color: white;
word-spacing: 4px;
font-weight: 700;
margin-bottom: 25px;
text-align: center;
}
.left{
float: left;
width: 50%;
/* border: 2px solid black; */
text-align: center;
}
.right{
width: 50%;
float: right;
/* border: 2px solid black; */
text-align: center;
}
.input::after{
content: "";
display: block;
clear: both;
}
.input input[type="number"]{
width: 50%;
font-size: 20px;
padding: 3px 5px;
outline: none;
border: none;
}
.submit-btn{
background: white;
font-size: 18px;
font-weight: 700;
padding: 10px;
border: none;
border-radius: 15px;
box-shadow: 0px 0px 10px 0px white;
}
.output{
width: 80%;
margin: 20px auto;
background: rgba(0, 0, 0, 0.685);
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}
.output .count-output{
/* border: 2px solid white; */
width: 75px;
/* height: 75px; */
height: 75px;
background: white;
box-shadow: 0px 0px 5px 0px white;
overflow: hidden;
}
.count-output span{
display: inline-block;
width: 100%;
height: 100%;
border-top: 2px solid red;
font-size: 70px;
/* text-align: center; */
display: flex;
justify-content: center;
align-items: center;
/* font-weight: 700; */
}
JS CODE
// when we click the submit button then take the data of the count, then start the counter and from 1 to 9 data hidden there so by js scroll it after 1sec when the target reaches stop and show alert
var input=document.getElementById("count");
var btn=document.getElementById("submit-btn");
var counter=document.getElementById("count-output");
console.log(input);
console.log(btn);
console.log(counter);
var scrollTillTarget=function (target) {
let count=0;
var heightCounter=counter.clientHeight;
console.log(heightCounter);
let intervalId=setInterval(function () {
if (count==target) {
alert("Target has reached");
clearInterval(intervalId);
counter.scrollTo(0,0);
return;
}
// By this line scrolling occurs instantly so the scrolling is not shown. So, used the setInterval so that do small scrolling in small time till the height of counter.
// counter.scrollBy(0,heightCounter);
let currentScroll=0;
let scrollId=setInterval(function () {
if (currentScroll==heightCounter) {
clearInterval(scrollId);
return;
}
counter.scrollBy(0,1);
currentScroll++;
},1);
count++;
},1000);
}
btn.addEventListener("click",function (event) {
var targetCount=input.value;
console.log(targetCount);
// now start the counter and scroll the count-output div to the span where the data-count attribute of span is equal to the targetCount
scrollTillTarget(targetCount);
});
Problem - Want that scrolling must show and also in 1 second. Then next scrolling till the target count.
This problem occuring maybe because the call stack is blocked by the setInterval callback function.
Solved this question by some other technique but want the answer why the above code is having some problem.
Solved Link- https://codepen.io/aryansharma-2002/pen/MWrjELL
I have this piece of code:
function dropdown() {
let dropdownText = document.querySelector(".dropdown-button");
let item = document.querySelector(".dropdown-items").getElementsByTagName("div")[0];
var aux = dropdownText.innerHTML;
dropdownText.innerHTML = item.innerHTML;
item.innerHTML = aux;
document.querySelector(".dropdown-items").style.display = "none";
}
.btn {
width: 150px;
height: 30px;
border-radius: 5px;
border: none;
box-shadow: 0 3px 1px 0 black;
text-align: center;
line-height: 30px;
color: black;
font-family: Consolas, monaco, monospace;
}
.dropdown {
margin: 0 50px 0 50px;
position: relative;
}
.dropdown-items {
display: none;
position: absolute;
}
.dropdown:hover .dropdown-button {
background: red;
}
.dropdown:hover .dropdown-items {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.dropdown-button {
background: orange;
font-size: 15px;
color: white;
}
.dropdown-button:hover {
cursor: pointer;
}
.dropdown-items div {
margin-top: 5px;
transform: scaleX(90%);
height: 20px;
line-height: 20px;
background: lightgray;
padding: 5px 0 5px 0;
text-align: center;
}
.dropdown-items div:hover {
cursor: pointer;
background: gray;
}
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn" onclick="dropdown();">Interrupt</div>
</div>
</div>
As you can see, I am trying to make a dropdown. I also want to make it so that when I click an option in the dropdown, the dropdown items stop showing as the option has been selected. That's why I added the line document.querySelector(".dropdown-items").style.display = "none"; in the JS file as I thought the .dropdown:hover .dropdown-items part of my CSS would change back the display of those elements to visible when hovering again, but when hovering again after the first click, the dropdown does not show anymore. Why is happening and how can I fix this?
Inline styles override any stylesheet styles, as they have maximum CSS specificity.
Instead of working with inline styles (el.style.display = "none"), work with a CSS class open that you toggle. Also don't make use of inline event listeners like onclick. Those are insecure and widely considered bad practice for a whole bunch of reasons. Use addEventListener instead.
// get all the dropdowns in a NodeList
const dropdowns = document.querySelectorAll('.dropdown');
// iterate over the list
for (const dropdown of dropdowns) {
// for each dropdown, add a mouseenter and mouseleave listener
dropdown.addEventListener('mouseenter', function(event) {
dropdown.classList.add('open');
});
dropdown.addEventListener('mouseleave', function(event) {
dropdown.classList.remove('open');
});
// Now add a click listener to each <div class="dropdown-items">
// that transfers the text and closes the dropdown
dropdown.querySelector('.dropdown-items').addEventListener(
'click',
function(event) {
this.previousElementSibling.textContent = this.textContent;
dropdown.classList.remove('open');
}
);
}
.btn {
width: 150px;
height: 30px;
border-radius: 5px;
border: none;
box-shadow: 0 3px 1px 0 black;
text-align: center;
line-height: 30px;
color: black;
font-family: Consolas, monaco, monospace;
}
.dropdown {
display: inline-block;
position: relative;
}
.dropdown-items {
display: none;
position: absolute;
}
.dropdown:hover .dropdown-button {
background: red;
}
.dropdown.open .dropdown-items {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.dropdown-button {
background: orange;
font-size: 15px;
color: white;
}
.dropdown-button:hover {
cursor: pointer;
}
.dropdown-items div {
margin-top: 5px;
transform: scaleX(90%);
height: 20px;
line-height: 20px;
background: lightgray;
padding: 5px 0 5px 0;
text-align: center;
}
.dropdown-items div:hover {
cursor: pointer;
background: gray;
}
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn">Interrupt</div>
</div>
</div>
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn">Whatever</div>
</div>
</div>
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn">Another one</div>
</div>
</div>
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn">Here we go</div>
</div>
</div>