I have a box 2 x 2 using flex property with number 0 inside each box, and a button to click
function click() {
var id = "item-";;
for(var i = 1; i <= 6; i++) {
id = id + i;
var element = document.getElementById(id);
var value = element.innerHTML;
value++;
document.getElementById(id).innerHTML = value;
}
}
<div class="flex-container">
<div class="container-1">
<div id="item-1">0</div>
<div id="item-2">0</div>
<div id="item-3">0</div>
</div>
<div class="container-2">
<div id="item-4">0</div>
<div id="item-5">0</div>
<div id="item-6">0</div>
</div>
</div>
<button class="btn" onclick="click()">Click</button>
I want to create a function click() that if I click a button then the number inside the box will increase, but not all numbers in all boxes. I want the number increasing box by box.
But my function only increases the value in the first box. Can someone let me know what should I do, please?
Currently, first iteration of the for () will work because id will become item-1, but the second iteration you will create the new id, but you just append i, so it becomes item-12 instead of item-2
Just only remember the id and prefix it with item- when you use it. Then after each press, update the innerHTML and increase the counter, or reset to 1 if we've just updated the last <div>
var currentIndex = 1;
function incrementButton() {
let element = document.getElementById('item-' + currentIndex);
element.innerHTML = ++element.innerHTML;
currentIndex = (currentIndex === 6) ? 1 : ++currentIndex;
}
<div class="flex-container">
<div class="container-1">
<div id="item-1">0</div>
<div id="item-2">0</div>
<div id="item-3">0</div>
</div>
<div class="container-2">
<div id="item-4">0</div>
<div id="item-5">0</div>
<div id="item-6">0</div>
</div>
</div>
<button class="btn" onclick="incrementButton()">Click</button>
Related
I want to calculate numbers in some DIV boxes and append the total in another DIV.
How can I make this work on-click of the box class as another function adds the values to the box dynamically?
I have tried various messy ways like wrapping the whole code in window.onclick.
https://jsfiddle.net/esw6dbLn/1/
var total =0;
$('.box > .box_content > .box_price').each(function(){
total += parseInt($(this).text());
});
$('.container').append("<div class='sum'>Total : "+total+"</div>");
console.log(total);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<div class="container">
<div class="box">
<div class="box_content">
<div class="box_price">100</div>
</div>
</div>
<div class="box">
<div class="box_content">
<div class="box_price">200</div>
</div>
</div>
</div>
You can use click event on box_price div then get value of div which is been clicked and also the sum div value add them and display them inside your sum div.
Demo Code :
var total = 0;
$('.box > .box_content > .box_price').each(function() {
total += parseInt($(this).text());
});
$('.container').append("<div class='sum'>Total :<span> " + total + "</span></div>");
console.log(total);
$(".box_price").click(function() {
//get price which is clicked then add with sum
var price = parseInt($(this).text()) + parseInt($(".sum span").text().trim())
$(".sum span").text(price) //display in span
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="box">
<div class="box_content">
<div class="box_price">100</div>
</div>
</div>
<div class="box">
<div class="box_content">
<div class="box_price">200</div>
</div>
</div>
</div>
You can put an empty div in your HTML and update it via an event listener that is added to each .box element, like:
// Finds all the boxes and calls `sumBoxes` whenever one is clicked
const boxes = document.getElementsByClassName("box");
for (let box of boxes){ box.addEventListener("click", sumBoxes); }
// Defines listener
function sumBoxes(event) {
var total = 0;
$('.box > .box_content > .box_price').each(function() {
total += parseInt($(this).text());
});
$('.sum').html("Total : " + total); // Replaces contents of `.sum`
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<div class="container">
<div class="box">
<div class="box_content">
<div class="box_price">100</div>
</div>
</div>
<div class="box">
<div class="box_content">
<div class="box_price">200</div>
</div>
</div>
<!-- Empty div to recieve sums -->
<div class="sum"></div>
</div>
You can listen for the .container click so anything inside the container will trigger the event and then do the calculation.
DEMO: https://jsbin.com/bokoman/edit?html,js,console,output
// Get the container
const container = document.querySelector('.container');
// Create an empty <span> and added to the end of the container
const totalEl = document.createElement('span');
container.appendChild(totalEl);
// listen for all the click but only do somethig if one of it childs was clicked
container.addEventListener('click', function(e) {
if (!e.target.classList.contains('container')) {
const prices = document.querySelectorAll('.box_price');
let total = 0;
prices.forEach(item => {
total += parseInt(item.innerText, 10)
})
// Add the total to the total element we created
totalEl.innerHTML = total
}
})
var total =0;
calculateResult = () =>{
total = 0;
$('.box > .box_content > .box_price').each(function(){
console.log()
total += parseInt($(this).text());
});
$('#sum').html("total:" + total);
}
$( "#target" ).click(function() {
$('.container').append("<div class='box'><div class='box_content'><div class='box_price'>100</div></div></div>");
calculateResult();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
</div>
<div id="result">
<div class='sum' id="sum">0</div>
</div>
<div id="target">
Add
</div>
I want to apply function to multiple div pairs in multiple wrappers. Divs should be selected in parallel by order from 2 different classes.
The best what I can think of is to make an array with n pairs of divs from n number of modules, but I don't know if the concept itself and syntax is right.
Now, I want to apply function to first/second/third/... object-1 and descript-1 divs inside only one module at the same time. And the same goes for next module, instead function should be applied to object-2 - descript-2 pair.
Updated code:
Now I have three different functions, one for next-prev buttons, one for thumbnail control and last one for showing object/description class divs and highlighting thumbs.
I've made nested functions attempt but it doesn't work. Should I declare vars, and get content before making 3 separate modules.forEach functions?
<script>
// nodes Array
let modules = Array.prototype.slice.call(document.querySelectorAll(".module"));
// Loop over the modules without index.
modules.forEach(function(module){
var divIndex = 1;
showDivs(divIndex);
// Objects, descr, thumbs
let objects = module.querySelectorAll(".object");
let descripts = module.querySelectorAll(".descript");
let thumbs = module.querySelectorAll(".thumb");
// next-prev buttons
function plusDivs(n) {
showDivs(divIndex += n);
}
// thumb control
function currentDiv(n) {
showDivs(divIndex = n);
}
// div display
function showDivs(n) {
if (n > objects.length) {divIndex = 1}
if (n < 1) {divIndex = objects.length}
// hide content, shade thumb
objects.style.display = "none";
descripts.style.display = "none";
thumbs.className = thumbs.className.replace(" active", "");
// show only selected object-descr pair and highlight thumb
for(var i = 0; i < objects.length; i++) {
objects[divIndex-1].style.display = "block";
descripts[divIndex-1].style.display = "block";
thumbs[divIndex-1].className += " active";
}
}
});
</script>
<div class="module">
<div class="content">LOREM IPSUM 1</div>
<div class="wrapper">
<div class="content">LOREM IPSUM 1</div>
<div class="object">o1</div>
<div class="object">o2</div>
<div class="object">o3</div>
<div class="descript">d1</div>
<div class="descript">d2</div>
<div class="descript">d3</div>
<div class="thumb" onclick="currentDiv(1)">t1</div>
<div class="thumb" onclick="currentDiv(2)">t2</div>
<div class="thumb" onclick="currentDiv(3)">t3</div>
<a class="prev" onclick="plusDivs(-1)">X</a>
<a class="next" onclick="plusDivs(1)">X</a>
</div>
</div>
<div class="module">
<div class="content">LOREM IPSUM 2</div>
<div class="wrapper">
<div class="content">LOREM IPSUM 2</div>
<div class="object">o4</div>
<div class="object">o5</div>
<div class="object">o6</div>
<div class="descript">d4</div>
<div class="descript">d5</div>
<div class="descript">d6</div>
<div class="thumb" onclick="currentDiv(1)">t4</div>
<div class="thumb" onclick="currentDiv(2)">t5</div>
<div class="thumb" onclick="currentDiv(3)">t6</div>
<a class="prev" onclick="plusDivs(-1)">X</a>
<a class="next" onclick="plusDivs(1)">X</a>
</div>
</div>
Is this what you are looking for? See comments inline. Also, don't use .getElementsByClassName().
// Convert the node list into an Array for the best browser compatibility with Array.forEach()
let modules = Array.prototype.slice.call(document.querySelectorAll("div[class^='module-']"));
// Loop over the modules.
// The Array.forEach() method is much simpler than manual loops because you don't have
// to maintain the loop indexer.
modules.forEach(function(module){
// Get the objects and descriptions (no arrays needed here because we're just
// going to need to use indexes against the node lists.
let objects = module.querySelectorAll("div[class='object']");
let descriptions = module.querySelectorAll("div[class='descript']");
// Clear out the objects and descriptions in the module.
// Start by getting all the objects and descriptions into an array.
let objectsDescriptions = Array.prototype.slice.call(
module.querySelectorAll("[class='object'], [class='descript']"));
// Then remove each item in the array from the document
objectsDescriptions.forEach(function(element){ element.parentNode.removeChild(element); });
// Loop the amount of times that matches the number of items in one of the arrays.
// Here, a regular counting loop makes the most sense because it's all about looping
// the correct number of times, not looping over DOM elements.
for(var i = 0; i < objects.length; i++){
// Repopulate the module with the current child elements, but in the new sequence
module.insertBefore(objects[i], module.querySelector(".thumb"));
module.insertBefore(descriptions[i], module.querySelector(".thumb"));
}
// Set up all the clickable elements to have click event handlers
module.addEventListener("click", function(evt){
// Check to see if it was a thumb or a prev/next that was clicked
if(evt.target.classList.contains("thumb")){
// Show the div that has the same index as the thumbnail that was clicked
let thumbs = Array.prototype.slice.call(evt.target.parentNode.querySelectorAll(".thumb"));
showDiv(evt.target.parentNode, thumbs.indexOf(evt.target));
} else if(evt.target.classList.contains("prev") || evt.target.classList.contains("next")){
// Show the div according to the data-offset attribute of the clicked element
showDiv(evt.target.parentNode, +evt.target.dataset.offset, true);
}
});
});
// ****************************************************************
// CODE TO SHOW DIVS
// ****************************************************************
let currentIndex = 0;
// div display
function showDiv(parent, index, nav) {
// Hide all the objects and descriptions
let items = parent.querySelectorAll(".object, .descript");
Array.prototype.slice.call(items).forEach(function(el){
el.classList.add("hidden");
});
if(nav){
currentIndex += index; // Adjust for the offset
if(currentIndex < 0){
currentIndex = 0;
} else if(currentIndex > (items.length / 2) - 1){
currentIndex = (items.length / 2) - 1;
}
// Show just the ones that are supposed to be shown
parent.querySelectorAll(".object")[currentIndex].classList.remove("hidden");
parent.querySelectorAll(".descript")[currentIndex].classList.remove("hidden");
} else {
// Show just the ones that are supposed to be shown
parent.querySelectorAll(".object")[index].classList.remove("hidden");
parent.querySelectorAll(".descript")[index].classList.remove("hidden");
}
}
.hidden { display:none; }
.thumb, .prev, .next { cursor:pointer; color:blue; }
<div class="module-1">
<div class="object">o1</div>
<div class="object">o2</div>
<div class="object">o3</div>
<div class="descript">d1</div>
<div class="descript">d2</div>
<div class="descript">d3</div>
<div class="thumb">t1</div>
<div class="thumb">t2</div>
<div class="thumb">t3</div>
<span class="prev" data-offset="-1"><</span>
<span class="next" data-offset="1">></span>
</div>
<div class="module-2">
<div class="object">o4</div>
<div class="object">o5</div>
<div class="object">o6</div>
<div class="descript">d4</div>
<div class="descript">d5</div>
<div class="descript">d6</div>
<div class="thumb">t4</div>
<div class="thumb">t5</div>
<div class="thumb">t6</div>
<span class="prev" data-offset="-1"><</span>
<span class="next" data-offset="1">></span>
</div>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I have 3 different buttons that when clicked on will increment specific variable by 1.
Instead of writing 3 different on clicks, is there more efficient way to do this?
I know i can use data attributes to bind button with correct element, but i don't know how to do that with variables.
var x1 = 0;
var x2 = 0;
var x3 = 0;
$('.btn1').on('click', function() {
x1 += 1;
$('#panel1').html(x1);
});
$('.btn2').on('click', function() {
x2 += 1;
$('#panel2').html(x2);
});
$('.btn3').on('click', function() {
x3 += 1;
$('#panel3').html(x3);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="panel1">
0
</div>
<div id="panel2">
0
</div>
<div id="panel3">
0
</div>
<button class="btn1">#btn1</button>
<button class="btn2">#btn2</button>
<button class="btn3">#btn3</button>
An approach using id's or whatever attribute and arrays:
var x = [];
x[1] = 0;
x[2] = 0;
x[3] = 0;
$('.btn').on('click', function() {
var pos = $(this).attr("id");
x[+pos] += 1;
$('#panel'+pos).html(x[pos]);
});
in HTML:
<button class="btn" id="1">#btn1</button>
<button class="btn" id="2">#btn2</button>
<button class="btn" id="3">#btn3</button>
Give them the same class and make it one click listener and put a data attr on each button with the variable name and the panel name. something like this, put all the variables in one object so you can access them also if they are global variables you can access them like this window[variableName]
As always, use a function to abstract over duplicated code.
function counter(buttonSelector, outputSelector) {
var x = 0;
$(buttonSelector).on('click', function() {
x += 1;
$(outputSelector).text(x); // btw, don't use `html`
});
}
counter('.btn1', '#panel1');
counter('.btn2', '#panel2');
counter('.btn3', '#panel3');
You can further remove repetition by putting those calls (or just the function body) in a loop, and/or adjust your selectors appropriately, but for three calls it's not yet worth it.
you can use an array instead of multi variables.
now give all buttons a specific class like btn.
then :
var ar=[0,0,0];
$('.btn').on('click',function(){
var x=$(this).html(); //if text of buttons is #btn1,#btn2 , ....
var num=parseInt(x.substr(x.length - 1));
ar[num]++;
});
Store the count in data attributes instead of a variable.
$('button[data-out]').on('click', function() { // bind on every button
// $(document).on('click, 'button[data-out]', function() { // or use event delegation with one click event
var btn = $(this) // reference the element
var cnt = (btn.data('count') || 0) + 1 // read count or default to zero and increment
btn.data('count', cnt) // update the count data attribute
$(btn.data('out')).text(cnt) // update your text output
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="panel1">
0
</div>
<div id="panel2">
0
</div>
<div id="panel3">
0
</div>
<button class="btn1" data-out="#panel1">#btn1</button>
<button class="btn2" data-out="#panel2">#btn2</button>
<button class="btn3" data-out="#panel3">#btn3</button>
I would either give your buttons a common class, or you could just bind your click event to the button element if you don't have others you need to worry about. Then use the index of the button being clicked to match it to the div you want to change. Essentially a one-liner:
$('button').on('click', function() {
$('div').eq($(this).index('button')).html(+$('div').eq($(this).index('button')).text() + 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="panel1">
0
</div>
<div id="panel2">
0
</div>
<div id="panel3">
0
</div>
<button class="btn1">#btn1</button>
<button class="btn2">#btn2</button>
<button class="btn3">#btn3</button>
Parts explained:
$(this).index('button') gets the index of the button among the button elements. See .index().
$('div').eq($(this).index('button')).text() select the div using the index above. See .eq()
+ converts the string content of the div to a number. Also could have used parseInt()
Store the variables as properties of an object.
Use a data-* attribute on each button to store what variable it is
supposed to match.
Bind all buttons to one handler.
In the handler, check the clicked button's data- attribute and
update the associated Object property as needed.
let variableObject = {
x1:0,
x2:0,
x3:0
}
$('.btn').on('click', function() {
variableObject[this.dataset.key]++;
$('#panel' + this.dataset.key.charAt(1)).text(variableObject[this.dataset.key]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="panel1">0</div>
<div id="panel2">0</div>
<div id="panel3">0</div>
<button class="btn" data-key="x1">#btn1</button>
<button class="btn" data-key="x2">#btn2</button>
<button class="btn" data-key="x3">#btn3</button>
Having said that, do you really need the variables in the first place? Why can't you just adjust the HTML content directly and anytime you may need that data, simply extract it.
$('.btn').on('click', function() {
// Get current value of associated panel
let current = $("#" + $(this).data("key")).text();
// Set text of associated panel to old value plus one
$("#" + $(this).data("key")).text(++current);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="panel1">0</div>
<div id="panel2">0</div>
<div id="panel3">0</div>
<button class="btn" data-key="panel1">#btn1</button>
<button class="btn" data-key="panel2">#btn2</button>
<button class="btn" data-key="panel3">#btn3</button>
Here is a version that generates the initial variables too, so it should be scalable.
bindVars = {}
$('[data-bind-id]').each(function() {
var xi = "x" + $(this).data('bind-id');
var pi = "#panel" + $(this).data('bind-id');
bindVars[xi] = 0;
$(this).on('click', function() {
bindVars[xi] += 1;
$(pi).text(bindVars[xi]);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="panel1">0</div>
<div id="panel2">0</div>
<div id="panel3">0</div>
<button data-bind-id='1'>#btn1</button>
<button data-bind-id='2'>#btn2</button>
<button data-bind-id='3'>#btn3</button>
Something like this
vars = {
'x1':0,
'x2':0,
'x3':0
}
$('.btn').on('click', function(){
var vn = $(this).data('varname');
var ps = $(this).data('panel-selector');
vars[vn] += 1;
$(ps).text(vars[vn]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="panel1">
0
</div>
<div id="panel2">
0
</div>
<div id="panel3">
0
</div>
<button class="btn" data-varname='x1' data-panel-selector='#panel1'>#btn1</button>
<button class="btn" data-varname='x2' data-panel-selector='#panel2'>#btn2</button>
<button class="btn" data-varname='x3' data-panel-selector='#panel3'>#btn3</button>
UPD:
For variables can use eval, but this not secure and useless. Do not use this, it's just for demonstration.
var x1 = 0;
var x2 = 0;
var x3 = 0;
$('.btn').on('click', function(){
var vn = $(this).data('varname');
var ps = $(this).data('panel-selector');
eval(vn + '+=1');
$(ps).text(eval(vn));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="panel1">
0
</div>
<div id="panel2">
0
</div>
<div id="panel3">
0
</div>
<button class="btn" data-varname='x1' data-panel-selector='#panel1'>#btn1</button>
<button class="btn" data-varname='x2' data-panel-selector='#panel2'>#btn2</button>
<button class="btn" data-varname='x3' data-panel-selector='#panel3'>#btn3</button>
You can add every button HTML onclick event and create one function.
function add() {
this.innerHTML(parseInt(this.innerHTML()) + 1);
}
<button onclick=add()>1</button>
<button onclick=add()>1</button>
<button onclick=add()>1</button>
Is it possible to get the ids of the 2 div tags on clicking the button, using javascript?
<div id="main">
<div id="content">
</div>
<button onclick="function();">show it</button>
</div>
I have 2 div tags here. The 1st div is in the main div while the content div is inside the main div and the button is inside the main div as well.
Is it possible to get the main and content id of the 2 div tags on clicking the button?
EXPECTED OUTPUT when I press the button:
alert: main
alert: content
You need to pass the element to the function. Then you can use parentNode to get the DIV that contains the button. From there, you can use querySelector to find the first DIV in the parent.
function showIt(element) {
var parent = element.parentNode;
alert(parent.id);
var content = parent.querySelector("div");
alert(content.id);
}
<div id="main">
<div id="content">
</div>
<button onclick="showIt(this);">show it</button>
</div>
<div id="main2">
<div id="content2">
</div>
<button onclick="showIt(this);">show it</button>
</div>
<div id="main3">
<div id="content3">
</div>
<button onclick="showIt(this);">show it</button>
</div>
document.getElementById('button').onclick = function () {
var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
var id = divs[i].getAttribute('id');
alert(id);
}
};
http://jsfiddle.net/jm5okh69/1/
This should work in all browsers and uses the cleaner .id method.
var button = document.getElementById('button');
button.onclick = getIDs;
function getIDs(){
var id,divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
id = divs[i].id // .id is a method
alert(id);
}
}
<div id="main">
<div id="content"></div>
<button id="button">show it</button>
</div>
I have already 3 existing boxes on a page (divs) with a unique ID (1,2,3) each. I want to have a button by each one of them that allows the user to add new boxes right below. These boxes should follow the already existing numbering. However, doing this will also imply to update the IDs of the already existing boxes underneath the new ones so the numbers match.
This is my code:
function add_box(n) {
document.getElementById("box"+(n<)).setAttribute("id", "box");
var div = document.createElement("div");
div.id="box"+(n+1);
var txt = document.createTextNode("A new box");
div.appendChild(txt);
var newbox = document.getElementById("box"+n);
insertAfter(div,newbox);
}
HTML
<div id="box1">Whatever</div><input type="button" onclick="add_box(1)">
<div id="box2">Whatever</div><input type="button" onclick="add_box(2)">
<div id="box3">Whatever</div><input type="button" onclick="add_box(3)">
Its obviously not working because i guess i need to have an array with all the elements that contain "box" in the ID and then somehow update their numbers but i dont know how to do all that.
Thank you.
The following does what you ask, but I suspect it isn't the result you want.
<script>
// Append a new div after one with id boxn
function add_box(n) {
var el = document.getElementById('box' + n);
var div = document.createElement('div');
div.id = 'box' + ++n;
div.appendChild(document.createTextNode('New box ' + n));
el.parentNode.insertBefore(div, el.nextSibling);
renumberDivs(div, n);
}
// Renumber all sibling divs after el
function renumberDivs(el, n) {
// Note assignment, not equality
while (el = el.nextSibling) {
if (el.tagName && el.tagName.toLowerCase() == 'div'){
el.id = 'box' + ++n;
}
}
}
</script>
<div id="box1">Whatever</div><input type="button" value="add below 1" onclick="add_box(1)">
<div id="box2">Whatever</div><input type="button" value="add below 2" onclick="add_box(2)">
<div id="box3">Whatever</div><input type="button" value="add below 3" onclick="add_box(3)">
Note that in the above, numbers are passed as arguments that are treated as numbers but also implicitly converted to strings when used for the ID value. That sort of type conversion isn't really liked, consider using a more explicit method.
After a few clicks, you may end up with something like:
<div id="box1">Whatever</div>
<div id="box2">New box 2</div>
<div id="box3">New box 3</div>
<div id="box4">New box 4</div>
<div id="box5">New box 4</div>
<div id="box6">New box 4</div>
<div id="box7">New box 2</div><input type="button" value="add a box" onclick="add_box(1)">
<div id="box8">Whatever</div><input type="button" value="add a box" onclick="add_box(2)">
<div id="box9">Whatever</div><input type="button" value="add a box" onclick="add_box(3)">