Increment a variable from jQuery .click - javascript

So, I'm trying to make a game where basically you click the picture, it disappears, and then 1 is added to a javascript variable.
So, I have this:
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
and I have some pictures and when you click on them, they disappear. For example:
<center><p><img src="test.jpg" border="0"></p></center>
I just want it so that the code below, as you can see above, adds 1 to a javascript variable called picturesRemoved
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>

Define the variable (as a global most likely)
var picturesRemoved = 0;
Then increment inside your handler:
picturesRemoved++;
Overall:
$(document).ready(function(){
var picturesRemoved = 0;
$("p").click(function(){
$(this).hide();
picturesRemoved++;
});
});

Given HTML like this:
<div>
Show Count
<ul>
<li>
<img src="test.jpg" border="0">
</li>
<li>
<img src="test.jpg" border="0">
</li>
</ul>
</div>
You could use the following to do what you are trying to accomplish:
$(document).ready(function(){
var picturesRemoved = 0;
$('li').click(function(){
$(this).hide();
picturesRemoved++;
});
$('.showCount').click( function(e){
e.preventDefault();
alert(picturesRemoved);
});
});
var picturesRemoved = 0; sets a default value to the variable and initializes it.
picturesRemoved++; will increment the value as an item is selected.
I also included a link and click handler that will show you the current value of the variable as an example of how you could use it in you JS later on.
e.preventDefault(); will prevent the default action of the anchor. Otherwise the anchor will behave based on the set HREF value.
alert(picturesRemoved); uses the standard JS alert function to show the variable.

Related

how to set both the href and title attributes and give it a callback function at the same time?

am learning jquery but am having a hard time figuring out how to set two attributes and give it a call back function at the same time.... i have te code to how to set multiple attributes and i have the code to how to give it a callback function but how do i pu them together in one...
here's the code for setting multiple atrributes:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3schools.com/jquery",
"title" : "W3Schools jQuery Tutorial"
});
});
});
</script>
</head>
<body>
<p>W3Schools.com</p>
<button>Change href and title</button>
<p>Mouse over the link to see that the href attribute has changed and a title attribute is set.</p>
And here's the code with a callback function
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
});
</script>
</head>
<body>
<p>W3Schools.com</p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
so how do i put them together? thanks in advanced to anyone who takes the time.
You can use chaining (more about jQuery chaining here: http://www.jquery-tutorial.net/introduction/method-chaining/), like this:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
}).attr('title','Tutorial');
});
});
</script>
<body>
<p>W3Schools.com</p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
http://jsfiddle.net/FHD84/
Sure, you can do in this way (store the function in a variable and then assign it to attribute)
working example --> http://jsfiddle.net/HKEeB/2/
$(document).ready(function(){
$("button").click(function(){
var func= function(i,origValue){
return origValue + "/jquery";
};
$("#w3s").attr({
"href" : func,
"title" : "W3Schools jQuery Tutorial"
});
});
});
My understanding of what you were trying to do is:
When the button is clicked, the <a> tag will change its href to the jQuery page.
When that link is clicked, the original values will be reset
If this is correct, here is how I would do it:
//-- $(function () {...}) is shorthand notation for $(document).ready(function () {...});
$(function () {
//-- I stored the lookup for #w3s to prevent duplicate calls to $()
var $link = $('#w3s');
//-- store the original attribute values using jQuery data()
$link.data({
'href': $link.attr('href'),
'title': $link.attr('title')
});
//-- This is essentially the same as your $('button').click(), but using delegation
$(document).on('click', 'button', function () {
//-- update the attributes
$link.attr({
'href': 'http://www.w3schools.com/jquery',
'title': 'W3Schools jQuery Tutorial'
})
//-- on click, reset the original values
$link.on('click', function (event) {
//-- event.preventDefault() will stop the link from performing its default functionality
//-- in this case, that would be following the href
event.preventDefault();
//-- pull the original values from jQuery data()
$link.attr({
'href': $link.data('href'),
'title': $link.data('title')
});
});
});
});
JSFiddle link: http://jsfiddle.net/9x56L/
Note: I disabled the link in this example. I am not sure what the context of this is, but redirecting away from the page is probably not the intended result.

Jquery change variable on click

Right, what I'd like to happen is when a button (or in this case, some text) is pressed, Jquery shows a div tag that contains an image, fades out the image after 2 seconds then displays some text.
This all works nicely, however I only want it to work once.
I decided to do this by using a variable and an if statement, so the variable changes from 0 to 1 and then the button cannot be clicked again due to the variable being changed.
Or at least, that's the badly worded version.
Anyhow, this is what I have so far, but for some reason the variable won't change from 0 to 1 after the button has been clicked, other than that, it works well.
The JS:
$(document).ready(function(){
$("#text2").css("display","none");
$("#ltt").css("display","none");
var clicked = '0';
if(clicked == 0) {
$(".clicker").click(function() {
$("#ltt").fadeIn("slow");
$('#ltt').delay(2000).fadeOut('slow');
$("#text2").delay(3000).fadeIn(1000);
$clicked = '1';
});
}
});
The HTML:
<div class="clicker">
click to see text
</div>
<div id="ltt">
<img src="Images/LoadingCircle.gif" width="24" height="24">
</div>
<div id="text2">
SOME TEXT
</div>
Try to use .one() in this context,
$(".clicker").one('click', function() {
$("#ltt").fadeIn("slow");
$('#ltt').delay(2000).fadeOut('slow');
$("#text2").delay(3000).fadeIn(1000);
});
You should use .one() instead:
Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
$(".clicker").one('click',function() {
$("#ltt").fadeIn("slow");
$('#ltt').delay(2000).fadeOut('slow');
$("#text2").delay(3000).fadeIn(1000);
$clicked = '1';
});
You declared the variable to
var clicked = '0';
but calling
$clicked = '1';
later on, so your variable will not be found.
Other than in PHP you don't need the Dollar $ to declare a variable, it's just a simple typo :)
well this should work :)
$(document).ready(function(){
$("#text2").css("display","none");
$("#ltt").css("display","none");
window.clicked = false;
$(".clicker").click(function() {
if(!window.clicked){
$("#ltt").fadeIn("slow");
$('#ltt').delay(2000).fadeOut('slow');
$("#text2").delay(3000).fadeIn(1000);
window.clicked = true;
}
});
});

Change the OnClick event using Javascript

I have an HTML anchor tag like
<a href="anchorid" onclick="callEvent(1)">
Here I call the Javascript function like
<script>
function callEvent(anchor) {
alert("Anchor ID is - "+anchor);
document.getElementById("anchorid").onClick = function () { callEvent(0) }; // BY using this code, update the onclick callEvent(0), like toggle
}
</script>
I wants to update the anchor tag like
<a href="anchorid" onclick="callEvent(0)">
When using this code, it is not updating as per my requirement.
document.getElementById("anchorid").onClick = function () { callEvent(0) };
How do I get it to update?
for using document.getElementById("anchorid").. you need to have id in your element, which you currently dont have, try doing:
//add id to your anchor
<a href="javascript:void(0);" id="anchorid" onclick="return callEvent(1);">
test
</a>
and js
<script type="text/javascript">
function callEvent(num) {
alert("Anchor ID is - "+num);
document.getElementById('anchorid').onclick = function () { callEvent(0) };
}
</script>
Store the toggle value in tag itself and then use.
<script>
function callEvent(val) {
var val = document.getElementById("myId").getAttribute('data-val');
alert(val);
// toggle value
val = val==1?0:1;
document.getElementById("myId").setAttribute('data-val',val);
}
</script>
<a id="myId" data-val="0" onClick="callEvent()">Click</a>
here value is stored in data-val value so that is toggled in the callEvent function itself, so no need to rebind the event.
See Example fiddle
try:
document.getElementById("anchorid").onclick
Better:
document.getElementById("anchorid").addEvenetListener('click', function(){
});
Tested: http://jsfiddle.net/Yca5W/
document.getElementById("anchorid").onclick =
function () {
alert("clicked");
};
if you only change parameter of calling function then you dont have to change complete event. You can do it like this:
HTML
<a id="anchorid" href="#">click me !</a>
JS
<script>
var anchor = 1;
document.getElementById("anchorid").onclick = function(){
alert("Anchor ID is: " + anchor);
anchor = anchor == 1 ? 0 : 1; //toggle 0 and 1
}
<script>
try This:
var anchor= document.getElementById('anchorid');
anchor.addEventListener('click', function() {
callEvent(0);
});
OR
$( "#anchorid" ).click(function() {
callEvent(0);
});
if you only want changes passing parameter from 1 to 0 or vice verse then do this one:
<input type="hidden" name="para" id="para" value="1" >
<a href="anchorid" onclick="callEvent($('#para').val())">
$( "#anchorid" ).click(function() {
if ($('#para').val()==1) {
$('#para').val(0)
} else {
$('#para').val(1)
}
});
try this, it may solve your problem demo Fiddle
Add id="anchorid" to your anchor tag
When you click it next time it will callEvent by argument 0,
function callEvent(anchor) {
alert("Anchor ID is - "+anchor);
var ele = document.getElementById("anchorid");
ele.setAttribute("onclick","callEvent(0)");
}
It will update your link like you wanted
<a href="anchorid" id="anchorid" onclick="callEvent(0)">

get and performing function + parameters from HTML5 data- element with jquery

I am making a phonegap program and I want to use a .on('tap') event instead of onClick="blah(param1,param2)" because of the 400ms delay. What I wanted to do was give a list of "tappable" items a class of "button1" and with each item give it a data-meth="dosomething3()" and then retrieve that when something is tapped. So far my example does not use tap but click instead.
<script>
$(document).ready(function() {
console.log('document ready');
$(".button1").on('click', function(e){ //this will changed to 'tap' eventually
e.preventDefault();
console.log("logged click");
var tempp=$(this).data("meth");
alert(tempp);
tempp; // thought this would call the function as it is written in the data-meth value but it doesn't
});
});
function dosomething(){
console.log('dosomething called');
}
function dosomething(var1,var2){
alert('hello:' +var1+' just showing var2'+var2);
}
</script>
My simple html is
<ul>
<li style="text-align:center" class="button1" data-meth="dosomething()" >One</li>
<li style="text-align:center" class="button1" data-meth="dosomething2(var1,var2)">Two</li>
<li style="text-align:center" class="button1" data-meth="dosomething3()">Three</li>
</ul>
How can i grab and call the function based or what is stored in the data-meth value?
Off the top of my head:
$(".button1").click(function() {
var functionName = $(this).attr("data-meth").split("(")[0];
var functionParams = $(this).attr("data-meth").split(")")[0].split[","];
window[functionName](functionParams);
});​
functionParams would be an array containing your values. That may or may not be what you need. You could also use the ever-evil eval like so:
$(".button1").click(function() {
eval($(this).attr("data-meth"));
});​
In which case you could pass in your parameters and treat them as usual.

How to assign a variable using onclick of html?

I am writing a code where the onclick of html should cause a javascript variable to be assigned a value which causes a function to trigger.
<script type="text/javascript">
function set_str(numb)
{
if(numb == 1)
var str_in_func = 'a.tab_1';
else if(numb == 2)
var str_in_func = 'a.tab_2';
return str_in_func;
}
jQuery(window).bind("load", function() {
str = set_str(num);
// When a link is clicked
$(str).click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
I want the javascript variable str to have a value of 'a.tab_1' when the link below is clicked
Topics
This doesn't seem to work though. The above jQuery function doesn't run at all.
There is a much easier approach to this that doesn't require all the mucking about with HTML attributes:
HTML:
<nav>
tab 1
tab 2
</nav>
<div id="content">
<section>Content 1</section>
<section>Content 2</section>
</div>
JS
$(document).ready(function() {
$('.tab').on('click', function() {
$('.active').removeClass('active');
$(this).addClass("active");
$('#content section')
.slideUp()
.eq($(this).index()).slideDown()
;
});
});
See demonstration here.
Topics
The problem is the var before your variable's name. Remove it and you will be fine. var tells javascript that you are declaring a variable for the local scope, not the context of the window, making it unavailable outside of the current context.
You want:
Topics

Categories