0

I'm trying to click a button that brings up an edit screen on the same page.

Eg. Click "edit user", edit screen pops up on the same page without redirecting, change name, save. This button does not redirect to a new page.

The code for this button is the following: 

<a href="javascript:;" data-id="29508" class="btn btn-xs btn-inverse btn-modify"><i class="fa fa-pencil"></i> Edit</a>

For some reason I can click every other button on this website that's in the same exact form but I can't click this one. There are no IDs at all so calling by the class name is the only other method I know.

This is what I've tried:

setTimeout(function() {
   document.getElementsByClassName(" btn btn-xs btn-inverse btn-modify")[0].click();
}, 3000);

I tried using some Jquery instead as well but no luck. Am I doing something wrong or is this all that I can really do? The other buttons I clicked either redirected me to a different site or just brought up some information on the same screen.

Thanks in advance.

Edit:

It seems that when I try iterating through the different buttons, who all have similar starting class names, I can iterate and click every button except for the edit button. So it's safe to assume that this isn't an issue with the code, so thank you everyone for the help and suggestions.

Edit #2:

Here is the code for all three buttons:

 <div class="btn-group"><a href="https://google.com" target="_blank" class="btn btn-xs btn-inverse"><i class="stm stm-goog"></i>&nbsp;&nbsp</a>

<a href="javascript:;" data-id="29508" class="btn btn-xs btn-inverse btn-modify"><i class="fa fa-pencil"></i> Edit</a>

<a href="javascript:;" data-page-modal="https://*randomwebsite*.com/manage/stats/301&amp;q=11" class="btn btn-xs btn-inverse"><i class="fa fa-bar-chart"></i></a><button type="submit" class="btn btn-xs btn-danger btn-submit"><i class="fa fa-trash-o"></i></button></div>
Tony
  • 11
  • 6

3 Answers3

0

If you want to fetch the element having all the class, try this:

JQuery

$(".btn.btn-xs.btn-inverse.btn-modify")

Plain JavaScript

document.querySelectorAll(".btn.btn-xs.btn-inverse.btn-modify")

Giving a space in between a class names in a css like selector meant that (next one) is a nested element in any depth. use . to indicate its a class, and write them together (without a space) you are searching for elements having all the lasses. And getElementsByClassName is not a css like selector, its can take only a class name and all those element having that class.

Koushik Chatterjee
  • 4,106
  • 3
  • 18
  • 32
  • Oh I see. Yeah I thought you always had to have the space inbetween, still doesn't work though. Had the exact same JQuery code but nothing – Tony Jul 21 '17 at 20:43
  • @Tony I missed a `.` at starting, I edited the answer, now you can try again :) – Koushik Chatterjee Jul 21 '17 at 20:53
  • Wanted it to work so badly but nope :/ I feel almost everyone's suggestions here should work. I can click all the buttons on the site and they're the EXACT same form, I just can't click the edit button. – Tony Jul 21 '17 at 20:57
  • may be it is clicking, how you are verifying that it is not getting ciicked? – Koushik Chatterjee Jul 21 '17 at 21:00
  • When you click it, a little screen on the same page opens up(not a new window) and allows you to edit information then save. Think of it as going on Facebook and editing notification settings for a chat for example. – Tony Jul 21 '17 at 21:02
  • when you are manually clicking, then its happening? did you checked? – Koushik Chatterjee Jul 21 '17 at 21:04
  • Yup, pops up instantly. I also just watched the Chrome code to see if anything happened when manually/automatically clicking. It's definitely not clicking at all. When you click it, some code changes quickly and nothing happened when running the script. – Tony Jul 21 '17 at 21:08
  • I'm pretty new to this but is it at all possible that sometimes you can't click certain buttons? Everyone is posting the exact same code and it works for everything else... – Tony Jul 21 '17 at 21:11
  • can you create a plunker, so that we can check exactly what is happening and an help you more on this – Koushik Chatterjee Jul 21 '17 at 21:14
0

Because you are trying to select the element by its class you need to loop through the elements. So if you wanna use jQuery you would do like so:

$(".btn-modify").each(function(){

    $(this).click(function(){

    your code here

    });

});
Marco
  • 624
  • 1
  • 6
  • 21
0

When searching for elements by class, it's better to use:

document.querySelector();  // Finds first matching element only

and 

document.querySelectorAll(); // Finds all matching elements

instead of document.getElementsByClassName() as this returns a "live node list" and hinder performance.

When searching for classes with these methods, remember to include the dot (.) to signify classes and when multiple classes are used, do not include spaces. The spaces are only used when setting multiple classes.

Also, if there is only one class that is unique to the element you wish to find, you only need to search on that one class.

Lastly, only use a elements for navigation. If you simply need something to click, just about any object can have a click event handler.

var edit = document.querySelector(".btn-modify");

edit.addEventListener("click", function(){ console.log("clicked")});

setTimeout(function() {
   edit.click();
}, 3000);

// Addtional test
var edit = document.querySelectorAll(".btn.btn-xs.btn-inverse")[1];

edit.addEventListener("mouseover", function(){
  console.log("moused over");
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="btn-group">
   <a href="https://google.com" target="_blank" class="btn btn-xs btn-inverse">
     <i class="stm stm-goog">X</i>&nbsp;&nbsp; <!-- <-- You missed a semi-colon here. -->
   </a>
   <a href="#" data-id="29508" 
      class="btn btn-xs btn-inverse btn-modify">
     <i class="fa fa-pencil"></i> Edit
   </a>
   <a href="#" data-page-modal="https://*randomwebsite*.com/manage/stats/301&amp;q=11" 
      class="btn btn-xs btn-inverse">
     <i class="fa fa-bar-chart">X</i>
   </a>
   <button type="button" class="btn btn-xs btn-danger btn-submit"><i class="fa fa-trash-o"></i>TEST</button></div>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • Although, since the OP is styling it as a button, might as well use `button` :). – Heretic Monkey Jul 21 '17 at 20:49
  • Nope :/ There's something odd that I'm noticing. So I mentioned I could click the other buttons, the classes are called "btn btn-xs btn-inverse". I can click each button by just incrementing through the buttons but when it comes to every edit button, it just does nothing. Could it just be possible that you can't click it? Sounds odd but not sure why else it wouldn't work – Tony Jul 21 '17 at 20:50
  • @MikeMcCaughan Yes. My answer was just trying to show that just about any visible element can become a "button". – Scott Marcus Jul 21 '17 at 20:50
  • @Tony You have to show us all the relevant code to know for sure, but this is the correct technique. – Scott Marcus Jul 21 '17 at 20:51
  • Oh sorry didn't see your comment. This is pretty much all the code, just duplicates of what I entered above for different buttons. And yeah everyone seems to have given essentially the same code so it's probably safe to assume it's not an issue with the code. Thank you anyways – Tony Jul 21 '17 at 21:15
  • @Tony Well, it can't be all the code because you are talking about having other buttons, but you only posted one. – Scott Marcus Jul 21 '17 at 21:16
  • @Scott Fair enough, edited my original post with all three buttons. First one is just a redirect to a website, the second one is the button in question and the third button brings up a similar little window with some stats on it. – Tony Jul 21 '17 at 21:20
  • @Tony I'm not sure I'm following what the issue is. I've added your code and it still seems to work with my solution. – Scott Marcus Jul 21 '17 at 21:27
  • @Scott See that's the issue, I can click the other buttons. I was always able to, I just can't click the second button which was the problem I mentioned in my original post. It really doesn't make sense. The code I had at the start pretty much matched all the suggestions posted here. – Tony Jul 21 '17 at 21:29
  • @Tony But, with my code you **can** click the second button. – Scott Marcus Jul 21 '17 at 21:31
  • @Scott Really don't know what to say :/ I tried using your code for the first button and it works fine but it still does nothing for the second one...Really don't know why. Works perfectly for EVERYTHING except the edit buttons.. – Tony Jul 21 '17 at 21:36
  • @Tony When you run my code (right here in Stack Overflow) and click the Edit button, do you see the word "Clicked" appear in the console? – Scott Marcus Jul 21 '17 at 21:39
  • And with your code I tried iterating through all the buttons with: document.querySelectorAll(".btn.btn-xs.btn-inverse")[1]; and it doesn't work for the second button. First and third button work fine. Really have no idea. @ScottMarcus – Tony Jul 21 '17 at 21:39
  • @Scott Yup it says clicked. – Tony Jul 21 '17 at 21:40
  • @Tony So, that shows that it's working. I'm not sure I understand what else you are looking for. Just change my code of `console.log("clicked")` to whatever you need the button to do. – Scott Marcus Jul 21 '17 at 21:42
  • @Tony I have even added another test to my code that uses the `document.querySelectorAll(...)[1]` to add a mouseover event and that is working as well. Try mousing over the Edit button, you'll see a different message. – Scott Marcus Jul 21 '17 at 21:44
  • @Scott Nothing pops up though, so it's going through but the site doesn't respond to the automatic click? That's why I assumed something other than the code was at fault here because all the different code variations suggested should have worked – Tony Jul 21 '17 at 21:45
  • @Tony The automatic click works as well. Run the snippet again and don't do anything. After 3 seconds, you'll see "clicked" appear because of the `setTimeout()` code. Everything is working as it should. – Scott Marcus Jul 21 '17 at 21:46
  • @Scott I moused over the button and it said "Moused over" and then clicked, said clicked. Page comes up when manually clicked – Tony Jul 21 '17 at 21:47
  • @Scott the page just refuses to open for some reason when automatically clicked.. – Tony Jul 21 '17 at 21:48
  • @Tony Explain what "page just refuses to open". What page? What is it that isn't working for you because you are telling me that my code is working. – Scott Marcus Jul 21 '17 at 21:49
  • When the edit button is clicked, it should open a small window where you can further edit stuff on the website. That window isn't opening when I use the code to automaticallyclick – Tony Jul 21 '17 at 21:50
  • @Tony **You do know that that hyperlink has no valid `href` value set for it, right? Right now, it should not take you anywhere. You have to set the `href`** – Scott Marcus Jul 21 '17 at 21:51
  • When manually clicking, this window pops up on the screen: http://i.imgur.com/KaVgMrb.png – Tony Jul 21 '17 at 21:56
  • With all the buttons in the background behind this little window. By a window opening I didn't mean redirecting to anywhere else. When you manually click the edit button, that opens up. Is there anything in the code I have to add on the side to have this screen open up? The code for the buttons that I gave you is all that's there. Not really sure what there is to do at this point – Tony Jul 21 '17 at 21:57
  • @Tony Oh, well, that being the case, yes, you absolutely need more code than what's here. That's a completely different question. That "window" doesn't open because there is no code asking it to. You'd have to add that code in place of where my `console.log("clicked')` code is. – Scott Marcus Jul 22 '17 at 16:57
  • @Scott I see. Is it possible that I just can't access it? All that I see on the code of the website is what I gave you along with some more information like the data-id, such as data-name and a few other random pieces of information. The other buttons actually have links whereas this one doesn't. I figured that simply getting my script to click on the button would be the same as clicking it manually, not having to do anything extra. Either way thanks for attempting to help – Tony Jul 22 '17 at 19:50
  • @Tony There has to be code that shows that section. You have not provided anything that would related to that. Your question about making the click work is answered, but you have some more work do do to be able to move forward. – Scott Marcus Jul 22 '17 at 19:57
  • This is legit all I have for that button : Edit But I understand. I'll have to look into it a bit more I guess. Thanks – Tony Jul 22 '17 at 20:00
  • @Tony. I get it. You can tell by the `href=javascript:;` that someone intended to initiate some JavaScript via the clicking of the button, but as I've shown in my answer, that isn't the correct way to do it and there is no code after the `javascript:` part, so we don't know what that code would have been. – Scott Marcus Jul 22 '17 at 20:28
  • @Scott I see. So out of our hands. Alright thanks again for the help, still learned a few things :) – Tony Jul 22 '17 at 23:13