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
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.
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;
}
});
});
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)">
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.
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