I'm just learning Javascript after starting out in PHP.
I'm trying some basic stuff, but for some reason the below code doesn't act as I expect. I have researched it, and from what I can tell it should work.
<script type="text/javascript">
showIndex=4;
function test(){
showIndex++;
alert(showIndex);
}
</script>
I am calling the script with an image:
<div style="display:inline-block;margin-left:25px;">';
<a href="" onclick="test()" ><img src="_images/next.png" width="100" /> </a>
</div>
It runs fine the first time, but when I hit the button again, it still has the initial variable plus one. (which makes me think it's acting as a local variable...)
It seem so straight forward... what am I doing wrong?
Remove the <a> and have the event on the image, it's refreshing the page. You don't need to have it wrapped in an <a> tag for a onclick event:
<img src="_images/next.png" onclick="test()" width="100" />
The empty link just reloads the page. You can insert # in it:
<div style="display:inline-block;margin-left:25px;">
<a href="#" onclick="test()" >www </a>
</div>
Then everything works as intended.
The empty href attribute on the <a> tag is messing you up. Either remove the href attribute, or change it to # or javascript:void(0)
Alternatively, you can call your method from the href attribute like this
<div style="display:inline-block;margin-left:25px;">';
<a href="javascript:test()" ><img src="_images/next.png" width="100" /> </a>
</div>
Related
I have issues with using click function in chrome console.
I am using the following:
document.getElementById('example').click();
and it works only if I inspect element, after that the element (example) is null.
I can reload it only by inspecting the element once again.
Is there any way to reload the element and make sure it is not null? Basically, I want it to be clicked automatically every 1 minute.
The code looks like this:
<a href="javascript:void(0)" class="th-bt th-bt-text" onclick="thBtMgr.click(this);return htmlbSL(this,2,'example:Go','0')" onmousedown="thBtMgr.press(this,event);" onfocusout="thBtMgr.unpress(this);" onfocus="thSaveKbFocus(this);" oncontextmenu="return false;" ondragstart="return false;" id="example">
<span class="th-bt-span">
<b class="th-bt-b">Go</b>
</span>
</a>
Thanks in advance for your help.
I have tried this several different ways but can't seem to figure out how to toggle the span's class from "die2" to "die3" along with the toggle of the div's display style from 'block' to 'none'. Anybody have any solutions? (Basically when the page loads, this ad will be displayed and when you click the red x (die2) the add disappears and the red x should change to a green check box (die3). Here's the code that does work for the div toggle that I'm using.
<div id="mydiv" style="display:block">
<img src='http://www.test.com/mypopad.png' alt='' />
</div>
<span id="myspan" class="die2"><!-- --></span>
Thanks guys, I think I got it going now ... I added another class to the stylsheet and then just reused what JKing answered. I could get the divHide to work but it would just add the class and remove the class. So I decided to just add a divShow and use the same code for the span. Thanks guys!
<div id="mydiv" class="divShow">
<img src='http://www.northpointemobilehomesales.com/wp-content/gallery/support-images/big-daves-sidebar-ad_03.png' alt='' />
</div>
<a href="javascript:;" onmousedown="document.getElementById('mydiv').classList.toggle('divHide');document.getElementById('mydiv').classList.toggle('divShow');document.getElementById('myspan').classList.toggle('die2');document.getElementById('myspan').classList.toggle('die3');">
<span id="myspan" class="die2"><!-- --></span>
</a>
Since the above did not work in IE I Used Sven's code and got it to work, we were missing the # when we called the #mydiv...
<script type="text/javascript">
$("document").ready(function(){
$("#myspan").click(function(){
$(this).toggleClass("die2").toggleClass("die3");
$("#mydiv").toggle();
});
});
</script>
<div id="mydiv" class="">
<img src='http://www.northpointemobilehomesales.com/wp-content/gallery/support-images/big-daves-sidebar-ad_03.png' alt='' />
</div>
<a href="#">
<span id="myspan" class="die2"><!-- --></span>
</a>
I'll work with this code for a bit and see if it will suite my needs. :) Thanks guys!
<script type="text/javascript">
$("document").ready(function(){
$("#myspan").click(function(){
$(this).toggleClass("die2").toggleClass("die3");
$("#mydiv").toggle();
});
});
</script>
That's it
You don't need jQuery, though you might like it. All you need to do is use an element's classList object.
You can do a lot of cool things with classList:
el.classList.add("myClassName") //adds class (does nothing if el already has that class)
el.classList.remove("myClassName") //removes class (does nothing if el doesn't have that class)
el.classList.toggle("myClassName") //toggles class
el.classList.contains("myClassName") //returns true if el has that class, false if not.
Here's a modified version of your code, as an example of what you could do - though I'm not sure it's exactly what you want to do, but it should point you in the right direction.
<div id="mydiv" class="divHide">
<img src='http://www.test.com/mypopad.png' alt='' />
</div>
<a href="javascript:;" onmousedown="document.getElementById('mydiv').classList.toggle('divHide');document.getElementById('myspan').classList.toggle('die2');document.getElementById('myspan').classList.toggle('die3');">
<span id="myspan" class="die2"><!-- --></span>
</a>
(I'm toggling a class on the div as well to show/hide it, instead of your if/else checking of the style attribute.)
I sugest jQuery:
mydiv.toggle() or mydiv.removeClass("die2").addClass("die3")
This might be a little confusing to explain, but I've been up all night pondering it and I can't seem to get in right.
I have an Iframe running on my website, inside the iframe is one image with one link. This is what is inside of the iframe from what I grabbed out of FireBug.
<head>
<body style="background-color:transparent; margin:0; outline-offset:0;">
<div style="text-align:center;">
<a onclick="document.location.reload(true);" href="http://randomwebsite.com/THE-URL-I-NEED" target="_blank">
<img width="160" height="600" border="0" src="http://randomwebsite.com/RANDOM-IMAGE.JPG">
</a>
</div>
</body>
</html>
Now, I need to grab that single URL and set it as a variable using Jquery, then set the variable as a link outside the iframe. So I was thinking something like this.
<a id="myiframelink" href=""></a>
<script>$("#myiframelink").attr("href","URL-FROM-INSIDE-IFRAME");</script>
if the embedded iframe url is not same as your domain, there is no way to grab that url. Otherwise, you can use something like
$($('iframe')[0].contentWindow.document.body).search("a").attr('href')
I have some mockup in HTML
<img title="next page" alt="next page" src="/themes/me/img/arrn.png">
I got the response from server when I sent the request.
With this mockup I got as a response of AJAX request that sends my code to server.
Well, everything is fine but when I click on the link the browser wants to open the function as link; meaning after click I see the address bar as
javascript:ShowOld(2367,146986,2)
means browser thing that's url if I want to do this in firebug that's work. Now I want to do that then when anyone clicks the link then the browser tries to call the function already loaded in the DOM instead of trying to open them in browser.
That syntax should work OK, but you can try this alternative.
<a href="javascript:void(0);" onclick="ShowOld(2367,146986,2);">
or
<a href="javascript:ShowOld(2367, 146986, 2);">
UPDATED ANSWER FOR STRING VALUES
If you are passing strings, use single quotes for your function's parameters
<a href="javascript:ShowOld('foo', 146986, 'bar');">
If you only have as "click event handler", use a <button> instead. A link has a specific semantic meaning.
E.g.:
<button onclick="ShowOld(2367,146986,2)">
<img title="next page" alt="next page" src="/themes/me/img/arrn.png">
</button>
Try to make your javascript unobtrusive :
you should use a real link in href attribute
and add a listener on click event to handle ajax
I use a little CSS on a span to make it look like a link like so:
CSS:
.link {
color:blue;
text-decoration:underline;
cursor:pointer;
}
HTML:
<span class="link" onclick="javascript:showWindow('url');">Click Me</span>
JAVASCRIPT:
function showWindow(url) {
window.open(url, "_blank", "directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes");
}
Your should also separate the javascript from the HTML.
HTML:
<img title="next page" alt="next page" src="/themes/me/img/arrn.png">
javascript:
myLink = document.getElementById('function-click');
myLink.onclick = ShowOld(2367,146986,2);
Just make sure the last line in the ShowOld function is:
return false;
as this will stop the link from opening in the browser.
<a href="#" onclick="javascript:ShowOld(2367,146986,2)">
href is optional for a elements.
It's completely sufficient to use
<a onclick="ShowOld(2367,146986,2)">link text</a>
In the above code, I am appending a javascript onclick method to the image tag. When I click the image once and I press back, it should go back to the page it came from. Instead its staying on the same page. Is there any way I can avoid that? (probably set something else instead of href="#"). The reason I set href="#" is to make my cursor turn into hand, other than that it has no use.
This is occuring in Firefox. In IE it works fine.
Please help. Thanks.
The reason I set href="#" is to make
my cursor turn into hand, other than
that it has no use.
You can remove the <a href="#"> and add the cursor: pointer style to the image:
<img src="logo.gif" style="cursor: pointer;" />
... to turn the cursor into a hand.
On the other hand, it is probably better to follow the guidelines for progressive enhancement, as David suggested in another answer.
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" onClick="alert('hi'); return false;"/>
you need add return false; to your onclick events if you don't want to load the link.
<a href="#">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif"
onClick="alert('hi'); return false;"/>
</a>
return false prevents the default action from occurring (in this case navigating to "#"), and then navigating back will return you to the previous page, instead of to the current page without "#".
Follow the pragmatic guidelines for progressive enhancement. In particular: Build on things that work.
Use this instead:
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" onClick="alert('hi')" style="cursor:pointer"/>