I want the count to increase in the navbar for every time the "add to cart" button is clicked on an item, but I can't see why my code isn't working, when I click add to cart button currently the counter does not increase. If anyone could tell me what I'm missing or give me a better solution to what I have I'd appreciate it, thanks!
$('.addCart').on('click', function() {
console.log(completedIncrements.indexOf(this.id));
if (completedIncrements.indexOf(this.id) == -1) {
var count = parseInt($("#count").text());
$("#count").html(count + 1);
completedIncrements.push(this.id);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
Shopping Cart (<span id="count">0</span>)
Shop
Contact Us
</div>
<a href="shoe1.html"><img id="shoe3" img src="images/shoe1.jpg" alt="shoe1">
<div id="cart1" class="addCart" href="#"><button>Add to cart</button></div>
<a href="shoe2.html"><img id="shoe4" img src="images/shoe2.jpg" alt="shoe2">
<div id="cart2" class="addCart" href="#"><button>Add to cart</button></div>
I just checked your code. The completeIncrements is throwing error in the console and preventing the execution of your logic. Please give information about that or else use the code below to solve it.
$('.addCart').on('click', function() {
var count = parseInt($("#count").text());
$("#count").html(count + 1);
})
$('.addCart').on('click', function(e) {
e.preventDefault();
var completedIncrements =0;
var count = parseInt($("#count").text());
$("#count").html(count + 1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
Shopping Cart (<span id="count">0</span>)
Shop
Contact Us
</div>
<a href="shoe1.html"><img id="shoe3" img src="images/shoe1.jpg" alt="shoe1">
<div id="cart1" class="addCart" href="#"><button>Add to cart</button></div>
<a href="shoe2.html"><img id="shoe4" img src="images/shoe2.jpg" alt="shoe2">
<div id="cart2" class="addCart" href="#"><button>Add to cart</button></div>
Use prevent default function so that link should not be refreshed and also removed unnecessary code
$('.addCart').on('click', function(e) {
e.preventDefault();
var count = parseInt($("#count").text());
$("#count").html(count + 1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Related
I want to make a button (out of divs) and a paragraph (or any text field) below the divs that counts the clicks.
$(document).ready(function() {
$('#butt').mousedown(function() {
$("#butt").hide();
});
$("#pushed").mouseup(function() {
$("#butt").show();
});
$("#butt").click(function() {
button_click();
});
});
var clicks = 0;
function button_click() {
clicks = parseInt(clicks) + parseInt(1);
var divData = document.getElementById("showCount");
divData.innerHTML = "Clicks:" + clicks;
}
<!-- <link type="text/css" rel="stylesheet" href="CSS.css"/> -->
<form name="ButtonForm">
<div id="container">
<div id="pushed"></div>
<div id="butt"></div>
</div>
<div id="showCount"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<!--<script src="Untitled-1.js" type="text/javascript"></script>-->
</form>
Your div elements are empty and there is no CSS to give them any explicit size, so they will never be visible for you to click on them.
Also, the mousedown event handler can and should be combined with the click handler for butt and the mouseup event handler should just be a click event as well.
Additionally, you only need to update the number of clicks, not the word "Clicks", so make a separate placeholder for the number with a span element and then you can hard-code the word "Clicks" into the div.
Lastly, to increment a number by one, you can just use the pre or post-increment operator (++).
$(document).ready(function() {
var clicks = 0;
var divData = $("#clickCount");
$("#pushed").on("click", function() {
$("#butt").show();
});
$("#butt").on("click", function() {
$("#butt").hide();
clicks++; // increment the counter by one
divData.html(clicks);
});
});
#pushed, #butt {height:50px; width:150px; background-color:green; margin:5px;}
<body>
<form name="ButtonForm">
<div id="container">
<div id="pushed"></div>
<div id="butt"></div>
</div>
<div id="showCount">Clicks <span id="clickCount"></span></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
</form>
</body>
First of all, you should simplify your code. Hiding and showing the button is not necessary to produce the result you are looking for.
Second, change the #butt element to an actual button so that you have something to see and click.
Third, make sure your script is loading after jquery is included.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<button id="butt">I'm a button</button>
<div id="showCount"></div>
<script>
$(document).ready(function() {
$("#butt").click(function() {
button_click();
});
var clicks = 0;
function button_click() {
clicks = parseInt(clicks) + parseInt(1);
var divData = document.getElementById("showCount");
divData.innerHTML = "Clicks:" + clicks;
}
});
</script>
Brief synopsis of what I am doing: As of now I am trying to build a 6 x 6 grid and get some sign of life when I click on any of the grid boxes.
The result I want for now, is by clicking in any of the boxes I get a console message saying a piece was picked.
My main goal is to be able to differentiate between which box I picked, but first I need to figure it out generally.
HTML:
<div class="container">
<div class="row">
<div class="btn btn-lg btn-success col-lg-offset-4 col-md-4" id="makeBoard">Generate Board</div>
</div>
<div id="spacer"></div>
<div class="row">
<div class="col-md-12" id="newBoard"></div>
</div>
</div>
JQuery:
$(function(){
$('#makeBoard').click(function() {
var boardSize = 6;
makeBoard(boardSize);
});
function makeBoard(boardSize){
for(i = 0; i < boardSize; i++){
$('#newBoard').append("<div class='row' id='row"+i+"'>");
var row = "#row"+i;
for(j = 0; j < boardSize; j++){
var content = "<div class='col-md-2 boardPiece' id='"+i+"_"+j+"'></div>";
$(row).append(content);
}
$('#newBoard').append("</div>");
}
}
$('div.boardPiece').click(function() {
console.log("You clicked a piece!");
});
});
I double checked the html output by inspecting the element and indeed all the squares have the class 'boardPiece' but whenever I click on anywhere in the grid nothing gets logged in the console.
However, I have tried to console log the id 'newBoard' by clicking anywhere in the box and that worked. I'm assuming it has something to do with the boardPiece not being hardcoded in using HTML like newBoard is?
I'm using JS/JQuery so I can eventually change the board size from a form.
Thank you in advance.
Edit (Answer Below)
//Changed from this
$('div.boardPiece').click(function() {
console.log("You clicked a piece!");
});
//To this
$('.row').on("click", "div.boardPiece", function() {
console.log("You clicked a piece!");
});
I need help. I want elements to be shown when clicking on their siblings. I want to do this stuff with pure javascript.
When I run my code and I click on the neither nothing happens nor errors are shown in the browser console (Chrome and Firefox).
I think one problem could be the onclick event inside de window.onload function, but I don't find the way to fix it.
Here's my HTML code:
<div class="year_element">
<h3 class="year">2015</h3>
<ul class="hide_months months">
<li>Marzo
</li>
</ul>
</div>
<div class="year_element">
<h3 class="year">1998</h3>
<ul class="hide_months months">
<li>Mayo
</li>
</ul>
</div>
<div class="year_element">
<h3 class="year">1987</h3>
<ul class="hide_months months">
</ul>
</div>
And here's my JavaScript code:
window.onload = function() {
var years = document.getElementsByClassName('year');
//When doing click on a year, show months
for (var i = 0; i < years.length; i += 1) {
//Function needs event as parameter to work
years[i].onclick = function(event) {
var selectedYear = event.target;
var month_list = selectedYear.nextSibling.nextSibling;
//Showing months
if (month_list.classList.contains('hide_months')) {
month_list.classList.remove('hide_months');
//Hiding months
} else {
month_list.classList.add('hide_months');
}
};
};
}
Your answers telling me the code worked, gave me the key of the problem: another file js was executing a window.onload function so this one didn't work. This has been fixed by using.
window.addEventListener("load", one_function, false);
window.addEventListener("load", another_function, false);
Thanks.
Are you running your javascript correctly?
I pasted everything into a html file, and the click seems to work.
It adds and removes the hide_months class. I don't have your css to make Marzo/Mayo dissapear, but looks like the loading and clicking are working as expected.
<script type="text/javascript">
window.onload = function() {
var years = document.getElementsByClassName('year');
//When doing click on a year, show months
for (var i = 0; i < years.length; i += 1) {
console.log('found some elements');
//Function needs event as parameter to work
years[i].onclick = function(event) {
var selectedYear = event.target;
var month_list = selectedYear.nextSibling.nextSibling;
//Showing months
if (month_list.classList.contains('hide_months')) {
month_list.classList.remove('hide_months');
//Hiding months
} else {
month_list.classList.add('hide_months');
}
};
};
}
</script>
Hm I try your example and it work fine in chroma.
I just add CSS that should work for this purpose.
<html>
<body>
<div class="year_element">
<h3 class="year">2015</h3>
<ul class="hide_months months">
<li>Marzo
</li>
</ul>
</div>
<div class="year_element">
<h3 class="year">1998</h3>
<ul class="hide_months months">
<li>Mayo
</li>
</ul>
</div>
<div class="year_element">
<h3 class="year">1987</h3>
<ul class="hide_months months">
</ul>
</div>
<script>
window.onload = function() {
var years = document.getElementsByClassName('year');
//When doing click on a year, show months
for (var i = 0; i < years.length; i++) {
//Function needs event as parameter to work
years[i].onclick = function(event) {
var selectedYear = event.target;
var month_list = selectedYear.nextSibling.nextSibling;
//Showing months
if (month_list.classList.contains('hide_months')) {
month_list.classList.remove('hide_months');
//Hiding months
} else {
month_list.classList.add('hide_months');
}
};
};
}
</script>
<style>
.year_element{font-weight: normal;}
.year{font-weight: bold; cursor: pointer;}
.months{color: green;}
.hide_months{display: none;}
</style>
</body>
</html>
I had a look out on the interwebs for a jQuery image gallery and couldn't find one that suited what I wanted to do. So I, ended up creating one myself and am trying to figure out how to get the prev and next buttons to work.
<div class="gallery portrait">
<nav>
<div class="close"></div>
<div class="prev"></div>
<div class="next"></div>
</nav>
<div class="cover">
<img src="image.jpg">
</div>
<ul class="thumbs">
<li class="thumb">
<img src="image.jpg">
</li>
...
</ul>
</div>
I'm also using a bit of jQuery to add a class of .full to the .thumb a element, which makes the thumbnails go fullscreen.
$( ".thumb a" ).click(function() {
$( this ).toggleClass( "full" );
$( "nav" ).addClass( "show" );
});
Now I can't work out this next bit, I need a way when the .prev or .next buttons are clicked for it to remove the class of .full from the current element and add it to the next or previous .thumb a element, depending on which was clicked.
I've got a demo setup here: http://codepen.io/realph/pen/hjvBG
Any help is appreciated, thanks in advance!
P.S. If this turns out well, I plan on releasing it for free. I guess you can't have too many jQuery image galleries, eh?
You can use $.next() and $.prev():
$(".prev").click(function () {
var current = $('.full');
current.prev('.thumb').addClass('full');
current.removeClass('full');
return false; // stop propagation; prevents image click event
});
$(".next").click(function () {
var current = $('.full');
current.next('.thumb').addClass('full');
current.removeClass('full');
return false; // stop propagation; prevents image click event
});
I suggest the following additions to your code to handle wrapping around with your next and previous links:
$(".next").click(function (event) {
navigate("next");
return false;
});
$(".prev").click(function (event) {
navigate("prev");
return false;
});
function navigate(operation) {
var $thumbs = $(".thumb"),
$full = $thumbs.find("a.full").closest(".thumb"),
$next;
$thumbs.find('a').removeClass('full');
if (operation == 'prev' && $full.is($thumbs.first()))
$next = $thumbs.last();
else if (operation == 'next' && $full.is($thumbs.last()))
$next = $thumbs.first();
else
$next = $full[operation]();
$next.find('a').click();
}
Here is a forked CodePen.
Something like this will get you started, but what you're wanting to do takes a little time to get just right.
<script type="text/javascript">
var imgSrcs = ['/imgs/this.jpg', '/imgs/will.jpg', '/imgs/work.jpg', '/imgs/just.jpg', '/imgs/fine.jpg'];//img url loaded into an array
var btnPrev = document.getElementById('prev'),
btnNext = document.getElementById('next'),
cover = document.getElementById('cover'),
thumb = document.getElementById('thumb'),
currImgIx = 0;
btnPrev.onclick = function () {
if (currImgIx === 0) { return; };
currImgIx--;
cover.src = imgSrcs[currImg];
thumb.src = imgSrcs[currImgIx];
};
btnNext.onclick = function () {
if (currImgIx === imgSrcs.length - 1) { return; };
currImgIx++;
cover.src = imgSrcs[currImgIx];
thumb.src = imgSrcs[currImgIx];
};
</script>
<div class="gallery portrait">
<nav>
<div class="close">X</div>
<div id="prev" class="prev">Prev</div>
<div id="next" class="next">Next</div>
</nav>
<div class="cover">
<img id="cover" src="image.jpg">
</div>
<ul class="thumbs">
<li class="thumb">
<img id="thumb" src="image.jpg">
</li>
...
</ul>
</div>
http://jsfiddle.net/bUjx7/31
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.fieldsgame1 {
display:none;
}
.fieldsgame2 {
display:none;
}
.fieldsgame3 {
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.tablereplace a').click(function () {
$('.fieldsmatch').fadeOut(0);
$('.fieldsgame1').fadeOut(0);
$('.fieldsgame2').fadeOut(0);
$('.fieldsgame3').fadeOut(0);
var region = $(this).attr('data-region');
$('#' + region).fadeIn(0);
});
});
</script>
Put this into my WordPress header. CSS is fine. HTML is fine. Javascript isn't working. Help?
I'm not really sure what "isn't working" (since the Fiddle you're showing is working fine), but I did manage to clean up your code a bit. It's more DRY, fadeOut with speed of 0 is the same as hide()/show(), & jQuery.data() is used to retrieve the data-region.
HTML
<div class="tablereplace">
<a data-region="fieldsmatch" href="#">Match</a>
<a data-region="fieldsgame1" href="#">Game 1</a>
<a data-region="fieldsgame2" href="#">Game 2</a>
<a data-region="fieldsgame3" href="#">Game 3</a>
<div id="fieldsmatch" class="fieldsmatch">8-0</div>
<div id="fieldsgame1" class="fieldsgame">7-1</div>
<div id="fieldsgame2" class="fieldsgame">6-2</div>
<div id="fieldsgame3" class="fieldsgame">1-0</div>
</div>
CSS
.fieldsgame {
display:none;
}
JS
$('.tablereplace a').click(function () {
$('#fieldsmatch, .fieldsgame').hide();
var region = $(this).data('region');
$('#' + region).show();
});
JSFiddle.
=== UPDATE ===
Based on your comment, I found the following difference on the live page:
Match
Game 1
Game 2
Game 3
<div class="tablereplace">
<div class="fieldsmatch" id="fieldsmatch">8-0</div>
<div class="fieldsgame" id="fieldsgame1">7-1</div>
<div class="fieldsgame" id="fieldsgame2">6-2</div>
<div class="fieldsgame" id="fieldsgame3">1-0</div>
</div>
Your specified click function is based on the .tablereplace a selector. But, on your site, there isn't any a found inside the .tablereplace . In other words, your HTML is wrong.