This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
What is DOM Event delegation?
(10 answers)
Closed 5 days ago.
I have made some bubbles on my site and I want to let the clicked bubble dissapear. for one or another reason it keeps telling 'bellen.addEventListener is not a function'. I don't understand what's wrong with my code.
const bellen = document.querySelectorAll(".bubble");
bellen.addEventListener("click", () => {
bellen.style.display = "none";
console.log("hey");
});
<div id="background-wrap">
<div class="bubble x1"></div>
<div class="bubble x2"></div>
<div class="bubble x3"></div>
<div class="bubble x4"></div>
<div class="bubble x5"></div>
<div class="bubble x6"></div>
<div class="bubble x7"></div>
<div class="bubble x8"></div>
<div class="bubble x9"></div>
<div class="bubble x10"></div>
</div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 23 days ago.
Improve this question
I am trying to playing an animation when clicked on a button but it does not work.
I want to play the 'logo_animation' when the pricing_logo got clicked.What is the problem ?
id="pricing-div">
<i id="pricing-logo" class="fa-solid fa-money-bill"></i>
<div id="pricing-display-div">
<img src="iphone-black.png" alt="" id="pricing-photo-div">
<div id="pricing-text-div"><h1 id="pricing-text">Pricing</h1></div>
<div id="pricing-storage-and-color-div">
<div id="pricing-storage-div">
<div id="pricing-storage-128-gb-button"><p id="pricing-storage-128-gb">128 GB</p></div>
<div id="sep-div"></div>
<div id="pricing-storage-256-gb-button"><p id="pricing-storage-256-gb">256 GB</p></div>
<div id="sep-div"></div>
<div id="pricing-storage-512-gb-button"><p id="pricing-storage-512-gb">512 GB</p></div>
<div id="sep-div"></div>
<div id="pricing-storage-1024-gb-button"><p id="pricing-storage-1024-gb">1 TB</p></div>
</div>
<div id="pricing-color-div">
<div id="color-space-black"></div>
<div id="sep-div"></div>
<div id="color-gold"></div>
<div id="sep-div"></div>
<div id="color-silver"></div>
<div id="sep-div"></div>
<div id="color-purple"></div>
</div>
</div>
</div>
</div>
<script>
var pricing_logo=document.getElementById("pricing-logo");
pricing_logo.addEventListener("click",function(){
pricing_logo.style.animationName="logo_animation";
pricing_logo.style.fontSize="0vw";
});
</script>
Here is a version as a snippet with a guess (well not a guess so much as an example) for the CSS code necessary for animation:
var pricing_logo = document.getElementById("pricing-logo");
pricing_logo.addEventListener("click", function() {
pricing_logo.style.animationName = "logo_animation";
});
#keyframes logo_animation {
from { font-size: 0; }
to { font-size: 18px; }
}
#pricing-logo {
animation-duration: 5s;
}
<div id="pricing-div">
<i id="pricing-logo" class="fa-solid fa-money-bill">FA</i>
<div id="pricing-display-div">
<img src="iphone-black.png" alt="" id="pricing-photo-div">
<div id="pricing-text-div">
<h1 id="pricing-text">Pricing</h1>
</div>
<div id="pricing-storage-and-color-div">
<div id="pricing-storage-div">
<div id="pricing-storage-128-gb-button">
<p id="pricing-storage-128-gb">128 GB</p>
</div>
<div id="sep-div"></div>
<div id="pricing-storage-256-gb-button">
<p id="pricing-storage-256-gb">256 GB</p>
</div>
<div id="sep-div"></div>
<div id="pricing-storage-512-gb-button">
<p id="pricing-storage-512-gb">512 GB</p>
</div>
<div id="sep-div"></div>
<div id="pricing-storage-1024-gb-button">
<p id="pricing-storage-1024-gb">1 TB</p>
</div>
</div>
<div id="pricing-color-div">
<div id="color-space-black"></div>
<div id="sep-div"></div>
<div id="color-gold"></div>
<div id="sep-div"></div>
<div id="color-silver"></div>
<div id="sep-div"></div>
<div id="color-purple"></div>
</div>
</div>
</div>
</div>
The code basically works. The main thing I did other than the CSS was to introduce content to that Font Awesome <i> tag so that there's something to click on.
You're probably switching css property wrong since only entering animation name in css wouldn't work. Example of working animation in css:
.class {
animation: animationName 1s (duration) 1 (or once, how many times animation is played out)
}
So what you can do is to apply already created class with this keyframes animation as described above with properties that you need or change the .style.animation property of element like that:
.addEventListener('click', () => {
const animationText = 'keyframes_name 1s forwards ease once'
element.style.animation = animationText
})
You can also add properties one by one from defined variables in your js.
There is also animate API in js which you can read on more here:
MDN docs js animation
This question already has an answer here:
how to ADD class in every to div using loop
(1 answer)
Closed 1 year ago.
This is my HTML structure I want to check every two productItem div how can I check every two div
which JavaScript loop structure I need to use
<div class="custompsps">
<div class="ProductItem">
</div>
<div class="ProductItem">
</div>
<div class="ProductItem">
</div>
<div class="ProductItem">
</div>
</div>
<div class="custompsps">
<div class="ProductItem">
</div>
<div class="ProductItem">
</div>
<div class="ProductItem">
</div>
<div class="ProductItem">
</div>
</div>
You can select all elements, and then loop over them,
This is an example if you want to add classes
let allProds = document.querySelectorAll(".ProductItem");
for(let i = 0; i< allProds.length; i+2){
allProds[i].classList.add("everyOddItem");
}
This question already has answers here:
Get index of element as child relative to parent
(6 answers)
Closed 2 years ago.
I need a simple script that would alert me with index number of certain div within a div.
Hovering over first box gives it's index (0) then another gives 1,2,3 etc.
Result I'm looking for is so third and fourth .box div would give their indexes within .box-container so 0 then 1 and not index of them within whole document. How would I approach such task? I know my code is close just not close enough.
$(".box").mouseover(function() {
console.log($(".box").index($(this)));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-container">
<div class="box">0</div>
<div class="box">1</div>
</div>
<div class="box-container">
<div class="box">2</div>
<div class="box">3</div>
</div>
You are searching .box class specific index() function to get index of element. There is issue due to its getting incremental ways index of element.
if you do using $this their index() it works.
Below is example :
$(".box").mouseover(function() {
console.log($(this).index());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-container">
<div class="box">0</div>
<div class="box">1</div>
</div>
<div class="box-container">
<div class="box">2</div>
<div class="box">3</div>
</div>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
Currently having issues with this code for a while, and I keep getting errors no matter how much i check it out.
The errors are all the same:
TypeError: Cannot set property 'textContent' of null
when i'm using querySelector or when i'm using getElementById as well. I don't know if it's my HTML or if i'm imputing it wrong.
what i'm getting confused in is it works here... but the error pops up when i'm using my VSC (visual studio code) and running it on chrome, the error shows up. Is it my code or the VSC?
var dice = Math.floor(Math.random()* 6) +1;
document.querySelector("#current-0").textContent = dice;
<div class="wrapper clear-fix">
<div class="player1-panel active">
<div class="player-name" id="player-1">Player 1</div>
<div class="player-score" id="score-1">100</div>
<div class="player-current-box">
<div class="player-current-label">Current</div>
<div class="player-current-score" id="current-0">11</div>
</div>
</div>
<div class="player2-panel">
<div class="player-name" id="player-2">Player 2</div>
<div class="player-score" id="score-2">00</div>
<div class="player-current-box">
<div class="player-current-label">Current</div>
<div class="player-current-score" id="currentScore-2">00</div>
</div>
</div>
<button class="btn-rules"><i class="material-icons">
help</i>Rules</button>
<button class="btn-newGame"><i class="material-icons">
add_circle_outline
</i>New Game</button>
<button class="btn-rollDice"><i class="material-icons">
autorenew</i>Roll dice</button>
<button class="btn-hold"><i class="material-icons">
play_for_work</i>Hold</button>
<input type="text" placeholder="Goal" class="finalScore">
<img src="images/dice5.png" atl="dice" class="dice" id="dice1">
<img src="images/dice5.png" atl="dice" class="dice" id="dice2">
</div>
You have something that is calling this initially and getting a null value and then resolving later i think. So try this...
var element = document.querySelector("#current-0")
if (element) {
element.textContent = dice
}
This question already has answers here:
getElementById() returns null even though the element exists [duplicate]
(5 answers)
Closed 6 years ago.
I'm having a problem when I try to get a element by using querySelectorAll.
Here is the part of HTML that I want to get from JS:
<div id="paginacao">
<div class="pag-base"> {{1}} </div>
<div class="pag-base">{{2}}</div>
<div class="pag-base">{{3}}</div>
<div class="pag-base">{{4}}</div>
<div class="pag-base">{{5}}</div>
<div class="pag-base">{{6}}</div>
<div class="pag-base">{{7}}</div>
<div class="pag-base">{{8}}</div>
<div class="pag-base">{{9}}</div>
<div class="pag-base">{{10}}</div>
<div class="pag-base">...</div>
</div>
I'm doing this on JavaScript:
var pages = document.querySelectorAll(".pag-base a");
console.log(pages[0].textContent);
but this always returns undefined. Anyone knows what am I doing wrong?
that's because the script file is loading before your dom is ready .
try script tag below your div tag
Nothing wrong with your code.
Everything working as expected, see below
var pages = document.querySelectorAll(".pag-base a"); console.log(pages[0].textContent);
for(var i =0; i < pages.length; i++){
console.log(pages[i].textContent);
}
<div id="paginacao">
<div class="pag-base"> {{1}} </div>
<div class="pag-base">{{2}}</div>
<div class="pag-base">{{3}}</div>
<div class="pag-base">{{4}}</div>
<div class="pag-base">{{5}}</div>
<div class="pag-base">{{6}}</div>
<div class="pag-base">{{7}}</div>
<div class="pag-base">{{8}}</div>
<div class="pag-base">{{9}}</div>
<div class="pag-base">{{10}}</div>
<div class="pag-base">...</div>
</div>