I am having a problem with the code below.
The code should handle the slider and changes between them when the img is
clicked, it works only once.
when I changed the onClick event to
document.getElementById("left").onclick = function(){
console.log("0");
}
It worked fine, but when I reverted, it doesn't change the slider more than once
snippet:
var index = 0;
document.getElementById("left").onclick = function(){
console.log("0");
}
document.getElementById("left").onclick = function(){
var slider = document.getElementsByClassName("slider");
slider[index].style.display = "none";
if(index == 0){ index = slider.length;}
slider[--index].style.display = "block";
}
document.getElementById("right").onclick = function(){
var slider = document.getElementsByClassName("slider");
slider[index].style.display = "none";
if(index >= slider.length){ index = 0;}
slider[++index].style.display = "block";
};
<div class="slider" style="display: block">
<div id = "left"><img src="Images/arrow-left.png" alt=""></div>
<div class="text">
<h2>welcome to the <span>classic</span></h2>
<p>Lorem ipsum is a name for a common type of placeholder text. Also known as filler or dummy text, this is simply copy that serves to fill a space</p>
</div>
<div id = "right"><img src="Images/arrow-right.png" alt=""></div>
</div>
thanks guys, the problem was that I gave multiple div the same ID which made the onclick event only fire once (with the first div only)
Related
so i am building a defi app. it has three divs at the top and a table below(there is a main div which is larger than the other 2). i want to make so when i click on one div it becomes the main div and all the text from the large one switches to one of the smaller box. so far i can only move text from div 1 to div 2 but cant figure out how to move text from div 2 to div 1 in the same onclick event. please help.
<div class="row stats-row border rounded">
<div class="col-8 stats1" id="stats1">
<div class="stats1-title-amount" id="stats1-title-amount">
<div class="stats1-title">
Total Volume
</div>
<div class="stats1-amount">
$20,000,000
</div>
</div>
</div>
<div class="col-4">
<div class="row stats2a border rounded" id="stats2a">
<div class="stats2a-title-amount" id="stats2a-title-amount">
<div class="stats2-title">
Total gains
</div>
<div class="stats2-amount">
15%
</div>
</div>
</div>
<div class="row stats2b border" id="stats2b">
<div class="stats2b-title-amount" id="stats2b-title-amount">
<div class="stats2-title">
Total Volume Traded
</div>
<div class="stats2-amount">
$1,500,560
</div>
</div>
</div>
</div>
</div>
document.getElementById('stats2a').addEventListener('click', function(){
changePage1();
changePage2();
});
function changePage1 () {
document.body.style.background = 'red';
document.getElementById('stats1-title-amount').innerText = document.getElementById('stats2a-title-amount').innerText;
}
function changePage2 () {
document.body.style.background = 'red';
document.getElementById('stats2a-title-amount').innerText = document.getElementById('stats1-title-amount').innerText;
}
Use this:
document.getElementById('stats2a').addEventListener('click', function(){
const page1 = getpage1text();
const page2 = getpage2text();
changePage1(page2);
changePage2(page1);
});
function getpage1text(){
return(document.getElementById('stats1-title-amount').innerText);
}
function getpage2text(){
return(document.getElementById('stats2a-title-amount').innerText);
}
function changePage1 (text) {
document.body.style.background = 'red';
document.getElementById('stats1-title-amount').innerText = text;
}
function changePage2 (text) {
document.body.style.background = 'red';
document.getElementById('stats2a-title-amount').innerText = text;
}
document.getElementById('stats2a').addEventListener('click', function(){
let tmp = document.getElementById('stats1-title-amount').innerText;
document.getElementById('stats1-title-amount').innerText = document.getElementById('stats2a-title-amount').innerText;
document.getElementById('stats2a-title-amount').innerText = tmp;
document.body.style.background = 'red';
});
The problem you had is that you set the value of stats1 to the value stats2, and after that you set stats2 to stats1. These run one after each, you cannot run them at the same time, so in the second assignment the stats2 is already overwritten by the first assignment, so you have to store one of the values in a variable temporarily.
you can just define visibiliy for each div instead of moving content :
var visible = true;
function(){
document.getElementById('div1').style.visibility = visible ? 'hidden' : 'visible'; // use short if/else to decide which value to user
document.getElementById('div2').style.visibility = visible ? 'visible' : 'hidden'; // short if/else is called ternairy
visible = !visible; // reverse the value of itself
}
In my web-page I have various buttons (in the class .addbutton). When the first of these is clicked, a <div> appears with a drop-down, from which the user can select any of 2 options (#p1, `#p2), which vary depending on which button was clicked.
When each of these options is clicked, I want it to appear in the <div> that corresponds with the initial .addbutton that was clicked. (e.g if the first .addbutton is clicked (#bradd) I want the options selected in the first div (#bdiv))I managed to do this so that they always appear in the #bdiv, no matter what .addbutton was clicked, but I can't work out how to make each appear in the corresponding one.
JS to set the innerHTML of the 2 options
document.getElementById("bradd").onclick = function() {
document.getElementById("p1").innerHTML = "Cereal"
document.getElementById("p2").innerHTML = "Juice"
}
document.getElementById("mmadd").onclick = function() {
document.getElementById("p1").innerHTML = "2x small fruit"
document.getElementById("p2").innerHTML = "Big fruit"
}
JS to change the innerHTML of the first div (#bdiv)
document.getElementById("p1").onclick = function() {
var newItem = document.createElement("div")
newItem.innerHTML = document.getElementById("p1").innerHTML document.getElementById("bdiv").appendChild(newItem)
}
document.getElementById("p2").onclick = function() {
var newItem = document.createElement("div")
newItem.innerHTML = document.getElementById("p2").innerHTML
document.getElementById("bdiv").appendChild(newItem)
}
My HTML:
<h1>Meal Plan Customizer</h1>
<div id="list">
<input type="checkbox">
<p>Breakfast:</p>
<button class="addbutton" id="bradd">+</button>
<div id="bdiv"></div>
<br>
<input type="checkbox">
<p>Mid-Morning:</p>
<button class="addbutton" id="mmadd">+</button>
<div id="mdiv"></div>
<br>
<input type="checkbox">
<div id="dropdownList">
<p id="p1">Option1</p><br><br>
<p id="p2">Option2</p><br><br>
</div>
</div>
</div>
Your code should work.
Please check this:
https://jsfiddle.net/oliverdev/3wsfgov1/
If your code is not working, it is because Javascript code is loaded before loading the HTML.
You can modify the Javascript code like this:
window.onload = function(e){
document.getElementById("bradd").onclick = function() {
document.getElementById("p1").innerHTML = "Cereal"
document.getElementById("p2").innerHTML = "Juice"
}
document.getElementById("mmadd").onclick = function() {
document.getElementById("p1").innerHTML = "2x small fruit"
document.getElementById("p2").innerHTML = "Big fruit"
}
}
It will work for you
You are making this far more complicated and repetitive than necessary.
By storing your data in a structured object and using classes for the content elements you can make generic event listeners for all of this
Following is by no means complete but will give you a good idea how to approach something like this
var data = {
bradd: {
p1: "Cereal",
p2: "Juice"
},
mmadd: {
p1: "2x small fruit",
p2: "Big fruit"
}
}
var selectedButton = null;
var opts = document.querySelectorAll('#dropdownList p');
for (let p of opts) {
p.addEventListener('click', updateContent)
}
// generic event handler for all the options
function updateContent() {
const content = selectedButton.closest('.item').querySelector('.content')
content.innerHTML = this.innerHTML
togglePopup()
}
document.querySelector('#xbutton').addEventListener('click', togglePopup)
// generic event handler for all buttons
function addButtonClicked() {
selectedButton = this;// store selected for use when option selected
var wantedData = data[selectedButton.id];
for (let p of opts) {
p.innerHTML = wantedData[p.id]
}
togglePopup();
}
for (let btn of document.getElementsByClassName("addbutton")) {
btn.addEventListener("click", addButtonClicked)
}
function togglePopup() {
var popStyle = document.getElementById("addPopUp").style;
popStyle.display = popStyle.display === "block" ? 'none' : 'block'
}
#addPopUp {
display: none
}
<h1>Meal Plan Customizer</h1>
<div id="list">
<div class="item">
<p>Breakfast:</p>
<button class="addbutton" id="bradd">+</button>
<div class="content"></div>
</div>
<div class="item">
<p>Mid-Morning:</p>
<button class="addbutton" id="mmadd">+</button>
<div class="content"></div>
</div>
</div>
<div id="addPopUp">
<h3 id="h3">Select what you would like to add:</h3>
<span id="xbutton"><strong>×</strong></span>
<div class="dropdown">
<div id="dropdownList">
<p id="p1">Option1</p>
<p id="p2">Option2</p>
<!-- <p id="p3">Option3</p><br><br>
<p id="p4">Option4</p>-->
</div>
</div>
</div>
I'm trying the count the total number of divs clicked and exactly which ones were clicked. I'm using an event listener because the onclick is already used. Let me clarify a bit more, first, here's my code:
<div class="wrapper">
<div class="square" onclick="classList.toggle('selected')">1</div>
<div class="square" onclick="classList.toggle('selected')">2</div>
<div class="square" onclick="classList.toggle('selected')">3</div>
</div>
<div id="dis"></div>
.selected {
background: white;
}
var numClicked = document.querySelectorAll('.wrapper');
numClicked.forEach(numClicked =>
numClicked.addEventListener('click', clickedDivs)
)
function clickedDivs () {
i = 0;
numClicked.forEach(numClicked =>
i++
var x = document.getElementById("dis");
x.innerHTML = "Squares selected: " + i;
}
What I'm trying to do with my javascript is count how many divs are selected. I'm also trying to tell exactly where ones were clicked. Let's say 1 and 2 were clicked, how do I find those were clicked and total number of divs clicked using js?
What you are doing wrong here is:
You are initialising i within the onClick event fn. which will always reset the value to 0 when ever the div will be clicked.
you are not storing anywhere which div is clicked
You are adding you'r listener on wrapper instead of .square (if you are not trying to get the value of clicked wrappers instead of clicked square)
So you can modify you'r javascript like this
<style>
.square{width: 100px; height: 100px; background: grey;}
.selected {
background: white;
}
</style>
<div class="wrapper">
<div class="square" onclick="classList.toggle('selected')">1</div>
<div class="square" onclick="classList.toggle('selected')">2</div>
<div class="square" onclick="classList.toggle('selected')">3</div>
</div>
<div id="dis"></div>
<script>
var numClicked = document.querySelectorAll('.square');
numClicked.forEach(numClick => {
numClick.addEventListener('click', clickedDivs)
}
)
var itemsClicked = [] //to store which div is clicked
function clickedDivs (e) {
var value = e.target.innerHTML;
//edit
if(itemsClicked.indexOf(value) != -1) itemsClicked.splice(itemsClicked.indexOf(value), 1)
else
itemsClicked.push(value);
var x = document.getElementById("dis");
x.innerHTML = "Squares selected: " + itemsClicked.join(",");
}
</script>
edit:
added to code to remove data from the list if already exist.
Rather than attach a handler to each div, you can use 1 window event listener. Give each clickable div an id that contains "clickable" so the event listener can filter out divs you aren't tracking. When you first click a tracked div, set its id as a key within a global object and assign 1 as the value; on additional clicks, increase value by 1.
const clicks = {};
window.addEventListener("click", (e)=> {
const id = e.target.id;
if(!id.includes("clickable"))return;
clicks[id]? clicks[id] += 1 : clicks[id] = 1;
console.log(clicks);
},)
<div class="wrapper">
<div id="clickable1" class="square">1</div>
<div id="clickable2" class="square">2</div>
<div id="clickable3" class="square">3</div>
</div>
My solution, I haven't tested it yet, test it and tell me how we adjusted it.
<div class="wrapper">
<div class="square" id="d-1">1</div>
<div class="square" id="d-2">2</div>
<div class="square" id="d-3">3</div>
</div>
<div id="result"></div>
var count = [];
var wrappers = document.querySelectorAll('.wrapper');
wrappers.forEach(square => square.addEventListener('click',() => onClickwrapperSquare(square.id));
function onClickwrapperSquare(id) {
var result = document.getElementById('result');
if(count.indexOf(id) == -1){
count.push(id);
}else{
count = count.slice(count.indexOf(id)+ 1);
}
result.innerHTML = `Squares selected: ${count.length}`;
}
This can be simply achieved by jQuery.
var count;
$(".square").click(function (){
count = count+1;
$("#dis").html(count);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class=square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
<div id="dis"></div>
I am trying to add different classes to a div based on what is clicked, which I've managed to do, but need to remove the previously clicked/selected class and replace with the clicked one, Can't seem to get the remove part right. Most of the solutions I've come across are either toggles or adding and removing between two classes, but not 3 or more.
Thanks
This is what I have tried so far and the add part works as expected but when I click a different button it does not remove the previous clicked one
The HTML
<button id="btn-1" data-width="w-1/3">Mobile</button>
<button id="btn-2" data-width="w-2/3">Tablet</button>
<button id="btn-3" data-width="w-full">Desktop</button>
<div class="frame">
Some Content
</div>
The Javascript
let setMobile = document.querySelector('#btn-1');
let setTablet = document.querySelector('#btn-2');
let setDesktop = document.querySelector('#btn-3');
let btns = [setMobile, setTablet, setDesktop];
function getBtnId(btn) {
btn.addEventListener('click', function() {
let frame = document.querySelector('.frame')
frame.classList.add(this.dataset.width)
if(frame.classList.contains(btns)){
frame.classList.remove(this.dataset.width)
}
console.log(this.dataset.width);
});
}
btns.forEach(getBtnId);
Basically, what I am trying to do is a responsive frame which will adjust its width depending on what is clicked.
You can store the current class in a variable and use the remove() to remove the previous class on each click.
let setMobile = document.querySelector('#btn-1');
let setTablet = document.querySelector('#btn-2');
let setDesktop = document.querySelector('#btn-3');
let btns = [setMobile, setTablet, setDesktop];
var currentClass;
function getBtnId(btn) {
btn.addEventListener('click', function() {
let frame = document.querySelector('.frame')
if (currentClass) {
frame.classList.remove(currentClass);
}
currentClass = this.dataset.width;
frame.classList.add(currentClass);
console.log(this.dataset.width);
});
}
btns.forEach(getBtnId);
<button id="btn-1" data-width="w-1/3">Mobile</button>
<button id="btn-2" data-width="w-2/3">Tablet</button>
<button id="btn-3" data-width="w-full">Desktop</button>
<div class="frame">
Some Content
</div>
Here's a generalized version to work with multiple elements. I've wrapped each frame and buttons in a section element. Then I've bound the event listeners to the sections and used event bubbling / event delegation to perform the switch. I've also used a data attribute on the target frame to hold the current state.
function setWidthClass(event) {
var newWidth = event.target.dataset.width;
//This identifies a button click with our dataset
if (newWidth) {
//get the target div
var target = this.querySelector(".frame");
//if the target has a class set remove it
if (target.dataset.width) {
target.classList.remove(target.dataset.width);
}
//Add the new class
target.classList.add(newWidth);
//Update the data on the target element
target.dataset.width = newWidth;
}
}
//Add the event listener
var sections = document.querySelectorAll(".varyWidth");
for (var i = 0; i < sections.length; i++) {
sections[i].addEventListener("click", setWidthClass);
}
.w-third {
color: red;
}
.w-half {
color: blue;
}
.w-full {
color: green;
}
<section class="varyWidth">
<button data-width="w-third">Mobile</button>
<button data-width="w-half">Tablet</button>
<button data-width="w-full">Desktop</button>
<div class="frame">
Some Content
</div>
</section>
<section class="varyWidth">
<button data-width="w-third">Mobile</button>
<button data-width="w-half">Tablet</button>
<button data-width="w-full">Desktop</button>
<div class="frame">
Some Content
</div>
</section>
<section class="varyWidth">
<button data-width="w-third">Mobile</button>
<button data-width="w-half">Tablet</button>
<button data-width="w-full">Desktop</button>
<div class="frame">
Some Content
</div>
</section>
Rather than track the current class, you can also just reset it:
let setMobile = document.querySelector('#btn-1');
let setTablet = document.querySelector('#btn-2');
let setDesktop = document.querySelector('#btn-3');
let btns = [setMobile, setTablet, setDesktop];
function getBtnId(btn) {
btn.addEventListener('click', function() {
let frame = document.querySelector('.frame')
// reset the classList
frame.classList = ["frame"];
frame.classList.add(this.dataset.width)
console.log(this.dataset.width);
});
}
btns.forEach(getBtnId);
<button id="btn-1" data-width="w-1/3">Mobile</button>
<button id="btn-2" data-width="w-2/3">Tablet</button>
<button id="btn-3" data-width="w-full">Desktop</button>
<div class="frame">
Some Content
</div>
Okay so I'm making a dropdown for my social media website, and I wanted to add a slider button:
<div class = \"dropdown\">
<img id = \"navPFP\" style = \"margin-top: 2px;margin-left:20px; margin-right: 20px;\" class = \"pfp\" width = \"30\" height = \"30\" src=\"$pfpNAV\" alt=\"$userNAV's pfp\">
<div id = \"dropdown\" class = \"dropdown-content\">
<div id = \"names\" style = \"border-bottom: thin solid #BDBDBD;\">
<h2>$fnNAV $lnNAV</h2>
<p style = \"color:grey;margin-top:-40px;\">#$userNAV</p>
</div>
<div id = \"settings\" style = \"border-bottom: thin solid #BDBDBD;\">
Accout Settings
</div>
<label class = \"switch\">
<input type = \"checkbox\">
<span class = \"slider round\"></span>
</label>
Log out #$userNAV
Reset password #$userNAV
</div>
Problem is: unless it is just the #dropdown div, not any children, when you click it the dropdown closes
I have the following JS code to close the dropdown when anything other than the dropdown content is clicked:
window.onclick = function(event) {
if (!event.target.matches('#dropdown') && !event.target.matches('#navPFP')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
Even if I add a && !event.target.matches('.switch') (or any of the other div ids) to the if statement, the dropdown still closes when the slider is clicked. How can I fix this so that the dropdown stays open?
Instead of matches(), use closest():
if (!event.target.closest('#dropdown')) {
// target is neither #dropdown or one of its descendants; close the dropdown
}
element.closest('#dropdown') starts at element and walks upward through the DOM looking for #dropdown. If closest() finds #dropdown, it returns it, and element must be a child of #dropdown. If not, it returns null, and element must be outside #dropdown.
Recently, I have the same problem with event.target.matches().
Apart from using event.target.closest(), you can set the pointer-events CSS property to none.
document.querySelector("#container").addEventListener("click", (event) => {
if (event.target.matches(".click-here")) {
console.log("You clicked inside 'click-here' div.");
const result = document.querySelector("#result");
result.innerText = "You clicked inside 'click-here' div.";
}
})
.no-click {
pointer-events: none;
}
<div id="container">
<div class="click-here">
<div class="no-click">
<div>div1</div>
<div>
<div>nested</div>
</div>
<p>text</p>
</div>
</div>
</div>
<div id="result">
</div>