I was following vid tutorial to create such menu. On the vid it works but NOT FOR ME.
When I click on the menu I get this msg: Uncaught TypeError: menuBtn.addEventListner is not a function.
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListner('click' , () => {
if(!menuOpen) {
menuBtn.classlist.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><CSS Hamburger Animation></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu-btn"></div>
<div class="menu-btn__burger"></div>
<script src="main.js"></script>
</body>
</html>
Related
Why is nothing displayed in the console when selecting text?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
dhksdh lsjkdlskdj s fjlkfjs d lsdjslkdj s sldjsldkj s
<script>
const onSelect = () => {
console.log('onSelect text')
}
document.body.addEventListener('select', onSelect)
</script>
</body>
</html>
Maybe I wrote something wrong?
I'm trying to follow a video, but the button isn't working. I cannot press the button. How do I fix my code?
My code
function increment() {
console.log("added");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Amount:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn" onclick="increment()">INCREMENT</button>
<script src="index.js"></script>
</body>
</html>
I'm not certain where to go from here
Your code seems running fine, I just added the increment function. You'll see the button work. :)
function increment() {
document.getElementById("count-el").innerHTML = eval(document.getElementById("count-el").innerHTML) + 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Amount:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn" onclick="increment()">INCREMENT</button>
<script src="index.js"></script>
</body>
</html>
why doesn't it work? i just want to add a paragraph to a div. Guys, why doesn't it work? i just want to add a paragraph to a div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="pobieranko.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="klasa">lalal</div>
</body>
</html>
const divek = document.querySelector(".klasa")
const paragraf = document.createElement("p")
paragraf.textContent = "paragrafik"
divek.appendChild (paragraf);
It appears you did not add a script tag to the page as so:
<script>
const divek = document.querySelector(".klasa")
const paragraf = document.createElement("p")
paragraf.textContent = "paragrafik"
divek.appendChild (paragraf);
</script>
// I'm trying to create div elements using a FOR loop but the event is not fired, although I found a solution, I wanna know why the event isn't fired
// load event here is not fired
document.addEventListener('load', () => {
for (i = 0; i <= 32; i++) {
let gridSquare = document.createElement('div');
gridSquare.className = 'grid-square'
document.querySelector('.container').appendChild(gridSquare);
console.log(gridSquare,i)
}
});
// Random Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
<title>Javascript Test run</title>
</head>
<body>
<header>
<h1 class="h1">Etch-A-Sketch</h1>
</header>
<main>
<--! Therefore DOM elements aren't created inside this div !-->
<div class="container"></div>
</main>
</div>
<script src="/main.js"></script>
</body>
</html>
// Random Text
Try with window.onload
window.onload = () => {
for (i = 0; i <= 32; i++) {
let gridSquare = document.createElement('div');
gridSquare.className = 'grid-square'
document.querySelector('.container').appendChild(gridSquare);
console.log(gridSquare,i)
}
}
I have two events: A button event and a container event. I want to apply stopPropagation() for container function, when I click on button. How to do this in vanilla js?
Now when I click on button #btn two functions will called. My goal is, when I click on button #btn, the code for #btn should only run. Click on div with id #container shall do it the same.
const btn = document.getElementById('btn');
btn.addEventListener('click', ()=> {
console.log('click on btn')
})
const container = document.getElementById('container');
container.addEventListener('click', ()=> {
console.log('click on container')
})
#container {
border: 1px solid red;
}
<!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">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Welcome</title>
</head>
<body>
<div id="container">
<button id="btn">click</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
You can use Element.closest() to detect click outside or inside specific element
check this example
const btn = document.getElementById('btn');
btn.addEventListener('click', ()=> {
console.log('click on btn')
})
const container = document.getElementById('container');
container.addEventListener('click', (e)=> {
if(!e.target.closest('#btn')){
console.log('click on container')
}
})
#container {
border: 1px solid red;
}
<!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">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Welcome</title>
</head>
<body>
<div id="container">
<button id="btn">click</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Simply add event.stopPropagation in your btn click handler
btn.addEventListener('click', ()=> {
console.log('click on btn')
event.stopPropagation()
})