Develop Reference

How do I programmatically click a button on this page when .click() does not work?

Actually, I am working on an extension which help to buy product from flipkart during flash sale. On teh product page I can't click on "Buy Now" button with the help of JavaScript its show me undefined this is the code of Buy Now button:
<form><button class="_2AkmmA _2Npkh4 _2kuvG8 _7UHT_c" type="button"><span class="_279WdV"></span> <!-- -->BUY NOW</button></form>
The Button is in this page
I am using the code to click this button in my JavaScript file
$("._2AkmmA._2Npkh4._2kuvG8._7UHT_c").click();
However, even when I go to the page on the site and, in the console, execute
$("._2AkmmA._2Npkh4._2kuvG8._7UHT_c").click();
The console shows undefined and does not start the "Buy Now" process that is started by manually using the mouse to click on the "Buy Now" button. In the console, executing
$("._2AkmmA._2Npkh4._2kuvG8._7UHT_c");
Shows:
<button class="_2AkmmA _2Npkh4 _2kuvG8 _7UHT_c" type="button"><span class="_279WdV"></span> <!-- -->BUY NOW</button>
which is the correct button that I desire to programmatically click. Note that even though I used $(), what is returned is not a jQuery Object.
If I click on that button manually, I'm shown the dialog for "Buy Now". You can go to this page and try it yourself.
I am not getting what is the problem here. Is there any problem in my code or its any kind of protection form filpkart website side?

I think you must use multi class selector in jQuery like this:
$("._2AkmmA, ._2Npkh4, ._2kuvG8, _7UHT_c").click()
As you see I use , between class
or reduce your class like this :
$("._2AkmmA").click()

You have to call the code only when All elements are full loaded, otherwise it won't find it. You must wrap in JQuery like :
$(document).ready(function(){
$("._2AkmmA._2Npkh4._2kuvG8._7UHT_c").click();
});

Your code is probably running before the DOM is fully loaded.
Try wrapping your code with $(document).ready(function(){... which will ensure that the code inside will only run once the page Document Object Model (DOM) is ready.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("._2AkmmA._2Npkh4._2kuvG8._7UHT_c").click();
});
function test(){
alert('clicked');
}
</script>
<form><button class="_2AkmmA _2Npkh4 _2kuvG8 _7UHT_c" type="button" onclick="test()"><span class="_279WdV"></span> <!-- -->BUY NOW</button></form>

How can I stop a navigation while keeping pop up modal on the screen?

On my page I have a button object declared as below.
<a class="button class" href="www.sometargeturl.com" onclick="makevisibile()">
The javascript makevisible() function just makes a <div> tag visible which acts then like a modal popup.
When the user hits the button, the the popup is displayed but after one second the user is navigated to sometargeturl.com. What I want is the popup to stop the navigation process until the user closes it, or clicks outside of it, only then do I want the navigation to resume.
Is this possible with plain html/css and javascript or do I have to use some fancy framework?
Cheers,
Bob

You need to prevent the default action by using return false;:
<a class="button class" href="www.sometargeturl.com" onclick="makevisibile();return false;">
Or put return false as the last line of your makevisible() function:
<a class="button class" href="www.sometargeturl.com" onclick="return makevisibile();">
function makevisibile(){
// ....
return false;
}

You want to prevent the default behaviour of the link (which is to navigate away).
You can either use another element instead of href for example a button or a code snippet similar to the one #Set Sail Media have suggested.
Keep in mind that in both cases you will manually need to change the url to the right location when the user closes the "pop-up".
EDIT 1
Bob, like you pointed out in your comments, if you disable the default behaviour of the href the page will not change when the user closes the pop-up window.
Let's assume you have a close function for the modal window which is called, close_modal() and it is called then the user closes the "pop-up"
function close_modal()
{
document.location='http://www.example.com';
}
You do NOT need to make a separate function for this, it all depends on how your page is currently looking.
For a better more complex answer please post a jsfiddle.

javascript to click a link every 5 seconds

I need a javascript routine that will click a link every n seconds until interrupted. I did find a routine that clicked a button but I don't know how to point the function to a link rather than a .button.
Thanks,
Wayne

Assuming you're actually trying to click a link that doesn't navigate to another page (what you asked, I suppose), you would probably use jQuery:
var variableToCancelInterval = setInterval(function(){
$("a.linkclass").click();
}, 5000);

If you want to trigger anchor as a click so you can use simulate function, jQuery team create this function which will support in in Chrome, Firefox, Opera and IE10.
so first you have to download this script for using simulate function after jQuery script. Here is a link and example:
$('a').simulate('click');
jquery.simulate.js

javascript createElement/append child -- new text dissapears after click

I have a javascript method that creates a bunch of elements on click. When I call it from a button, it only stays on the screen for the duration of that click. when I enter the exact same code into the console, however, it stays on the page until I reload or navigate away (which is exactly what I want).
JavaScript code: (it's the only method in the js file)
function post() {
var postTitle = document.createElement('h3');
var nodeTitle = document.createTextNode('Immigration is good.');
postTitle.appendChild(nodeTitle);
etc....
Where I'm calling it in the html:
<input type="submit" id="post-button" value="Post" onclick="post()">
The script tag is in the header of the html page.
How do I get it to stay on the page past the duration of the click? Any ideas why it's being immediately obliterated?

You still need to cancel the form's submission. A return false; from post, if it exists, won't work because the onclick attribute is calling post() but not returning anything.
You could change it to onclick="return post();", but it would be better to attach the handler directly, and to the submit event of the form and not the click event of the button (people do use Enter sometimes!):
document.getElementById('some-form').onclick = post;

Look at what the button does. It is posting!
When you click the button it is redirecting you back to the page you are currently on! It seems like it is showing up and disappearing what is actually happening though is that the page is refreshing.
There are a couple of options to do what you want. Submitting via Ajax or having your server respond with a hashbang/cookie set to direct the page to do as you wish.

jQuery dialog call redirecting page

I'm using the jQuery dialog plugin.
The dialog div is set up (but not opened) on page load:
$(document).ready(function(){
$('#foo').dialog({autoOpen:false});
});
Then a hyperlink is supposed to open the dialog:
Show dialogue box
But this opens the dialog then a fraction later redirects to a page with the URL javascript:$('#foo').dialog('open');!
I have tried returning false:
Show dialogue box
But then the link doesn't respond at all when I click on it.
I know this must be to do with one of JavaScript's infamous subtleties but I can't work it out.
Can anyone help?

Then a hyperlink is supposed to open the dialog:
Show dialogue box
But this opens the dialog then a fraction later redirects to a page with the URL javascript:$('#foo').dialog('open');!
That shouldn't be happening. The pseudo-protocol javascript: doesn't involve a page load, and certainly not one via HTTP. I don't recommend it (I'd use jQuery's click handler instead), but it should work.
I have tried returning false:
...
But then the link doesn't respond at all when I click on it.
That also shouldn't be happening.
Your code as quoted is fine (works here, for instance: http://jsbin.com/inixa5), so the problem must lie in some other part of the page.
Update: Okay, that's weird, IE6 and IE7 didn't like that; I think it's because dialog returns a value. You can get around that either by wrapping up your call to open the dialog in a function and doesn't explicitly return anything:
Click Me
<script>
$("#foo").dialog({autoOpen: false});
function showDialog(selector) {
$(selector).dialog('open');
}
</script>
Or (and this is mega-hacky) by making sure the last expression in the javascript: block is undefined:
Click Me
<script>
$("#foo").dialog({autoOpen: false});
</script>
Or by using onclick:
Click Me
<script>
$("#foo").dialog({autoOpen: false});
</script>
But in any case, strongly recommend hooking things up with a DOM2 style event handler:
<a href="#" name='openSesame'>Click Me</a>
<script>
// This _can_ be immediately after the anchor, but I'd put it in
// a separate, since .js file for the page that you load just before
// the closing body tag.
$("#foo").dialog({autoOpen: false});
$("a[name=openSesame]").click(function() {
$("#foo").dialog('open');
return false;
});
</script>
Live example (Obviously, you can use any selector that makes sense, you don't have to give the anchor a name [or id].)
One of the nice things about this is that you can then have the anchor take the user somewhere meaningful and/or useful if JavaScript is disabled (something called progressive enhancement).

Change the link to:
<a href="javascript:void(0)" onclick="$('#foo').dialog('open')">
Show dialogue box
</a>
Best avoid putting javascript in the href.
Even better would be giving it a class and than adding a click event to it through jquery.