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.
Related
<a href="myList/doctor">
<div>
<span> The important Info
<a data-toggle="modal" data-target="#mapModal">
<a data-toggle="modal" data-target="#mapModal"
id="obliqueIcon"> <oblique
class="iconSize">i</oblique></a>
</a>
</span>
</div>
</a>
document.getElementById("obliqueIcon").onclick = function(e) {
return false; // or use e.stopPropagation() and e.preventDefault()
}
I have the above code.Here the div can be clickable but the 'i' button here should open up a model box (data-target="#mapModal") but it is not since the anchor tag contains the 'href'.
What I am trying to do is let this code should not be changed but when I click on the oblique it should open up a model box but not redirecting to the link.Is there any way to restrict it.Please suggest help.Thanks.
So there are a couple of issues with your HTML: first, there isn't an <oblique> tag (did you mean <i>?), and second, you can't nest an <a> tag within another <a>.
That said, though, the more general form of what you're asking for -- a node within a link tag that will not fire that link if clicked -- is possible; all you need to do is prevent the click event from bubbling up from that node to the anchor tag:
document.getElementById("foo").onclick = function(e) {
// open your modal here
return false; // or use e.stopPropagation() and e.preventDefault()
}
<a href="https://example.com">
This should link to the other page...
<span id="foo">but this should not</span>
</a>
Added to the answer in response to comments below: here's the same code snippet applied to your HTML:
document.getElementById("obliqueIcon").onclick = function(e) {
return false; // or use e.stopPropagation() and e.preventDefault()
}
<a href="myList/doctor">
<div>
<span> The important Info
<a data-toggle="modal" data-target="#mapModal">
<a data-toggle="modal" data-target="#mapModal"
id="obliqueIcon"> <oblique
class="iconSize">i</oblique></a>
</a>
</span>
</div>
</a>
I do not get the error message you're reporting ("Cannot set property 'onclick' of null") but at a guess it may be because you're continuing to use invalid HTML (the nested <a> tags) -- possibly that's making those nodes inaccessible in some browsers? (I'll stress that this is only a guess; I don't have a lot of experience working with invalid HTML other than by fixing it, so I don't have a solid understanding of how all browsers might handle it. I've tested Safari, Chrome and FF, all work correctly even with the invalid HTML, but if you're using a different browser perhaps that's the cause. If you see the error on my second snippet but not on my first snippet, that would confirm the guess. If you see no errors in either snippet, then you have something else going wrong in your code.)
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>
I am trying to make it so that when I click an <a> tag a <div> appears on the first click and disappears on the second.
Easy enough right?
Just do this...
<a href ng-click="clicked=!clicked">Click me</a>
<div ng-show="clicked">
SOME CONTENT HERE
</div>
and that works perfectly.
But what I'm doing is setting a variable in Python equal to this <a href='"#"' ng-click='"clicked=!clicked"'>Click me</a> and then passing that through Flask into the front end (HTML). The passing works perfectly. It shows exactly the same code as I want it to (see below).
<a href ng-click="clicked=!clicked">Click me</a>
But for some reason, when I pass it, it loses the ng-show/ng-click functionality. When I click, nothing appears or disappears.
Why is this?
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>
I'm trying to figure out just how a particular function works on a Facebook page, and being no friend of JS syntax, am having trouble. Here's the question mark bit:
<a href="#" clicktoshowdialog="my_dialog" onclick="
(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=3b933f46f9c4c44981e51b90c754bfce&position=2&' + Math.random();
FBML.clickToShowDialog("app4949752878_my_dialog");
return false;">
<img src="linktopicture" title="Are your friends fans?" width="190" height="230" />
</a>
<div style="display:none">
<div id="app4949752878_my_dialog" fbcontext="aa3fcff8e653">
<div class="app_content_4949752878" style="padding:10px">
<div with hidden then exposed content...
The functionality of this is an image that, when clicked, pops out the previously hidden div. I know that the app###### is prepended to all JS used in Facebook to limit its scope. I'm confused by the anchor parameter of
clicktoshowdialog="mydialog"
What is that identifying, and how is it targeting the div that's exposed when the image is clicked? Thanks for any clarification, and let me know if I can post any more sample code.
According to the wiki it's just for opening the dialog (which is defined at the bottom). Facebook generates the JS to open the dialog. The attribute got post-processed and the JS code (that you see in the onclick= attribute) was generated on it's basis.