In Google+, the button that is used to post a comment is made from a div:
<div role="button" id=":1vq.post" class="d-s-r tk3N6e-e tk3N6e-e-qc" aria-disabled="false" style="-webkit-user-select: none; " tabindex="0">Post comment</div>
I think I can click it with:
document.getElementById(":1vq.post").click();
But it says that the element have no attribute click, and I found that onclick is null. So how could I click the button with JavaScript?
EDIT: After a chat with wong2 who started this question and a lot of failed guesses for what this question is really about (the question is quite poorly written), what they are trying to do is to write a Greasemonkey userscript to make the enter key press the Post Comment button in Google+ streams. Since I don't have an invite into Google+ yet, I can't even see the relevant code so not much I can do. This question is not about putting anything related to Google+ in your own site - it's about trying to use Greasemonkey to modify the behavior of Google's site in your own browser.
Earlier attempts to help:
id=":1vq.post" is not a legal CSS id name. You can't use the ":" character in a selector name. This causes multiple issues because not only is it not a legal character, but it's also a meaningful character in the CSS selector syntax. So, I see that you have two issues.
First, your selector logic is not working. Second, as others have said, you can't just assign to click in this way with plain javascript (e.g. no framework).
If you change your selector logic to work correctly, you can get it to work properly (using jQuery) like this:
<div role="button" id="aPost" class="d-s-r tk3N6e-e tk3N6e-e-qc" aria-disabled="false" style="-webkit-user-select: none; " tabindex="0">Post comment</div>
$("#aPost").click(function() {
alert("I was clicked.");
});
And, you can see it in action in this jsFiddle: http://jsfiddle.net/jfriend00/Yfnc7/. Click Run and then click on the Post Comment.
click() applies only to elements like input and button.
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361
onclick would appear in 1990 and not at Google. They should be using addEventListener.
Try to set a breakpoint and see what function is called on click. Then call the function directly.
To trigger a click event handler one can use createEvent plus dispatchEvent.
See example: http://jsfiddle.net/DzVg9/
Note, that Google Plus may actually be using mousedown or mouseup events.
Are you sure you are acurately selecting the button with $(":1vq.post")? Perhaps you need to change it to $("#:1vq.post") or something like that (I'm not sure how JQuery handles the : and . characters).
Related
I need to click a div to do an action.
I do desktop version succesfully, but when I go to mobile, click action does not work. I try several ways that found here in Stack Overflow and other websites, but any works...
My code for desktop:
document.getElementById('BtMisDocumentos').click();
My code for mobile (3 attempts);
$('BtMisDocumentos').trigger('vclick');
$('BtMisDocumentos').trigger('tap');
$('BtMisDocumentos').trigger('touchstart');
Div;
<div id="BtMisDocumentos" class="dx-button dx-button-normal dx-button-mode-text dx-widget dx-button-has-text" onclick="void(0)" role="button" aria-label="Mis Documentos" style="width: 140px;"><div class="dx-button-content"><span class="dx-button-text">Mis Documentos</span></div></div>
Any idea? maybe does not work, because I am using a user agent, despite of a "real" mobile?
I think you are missing something:
//Use a . for a element class and # for a element id. Use it in the $('#...') part.
$('.BtMisDocumentos').trigger('vclick');
$('#BtMisDocumentos').trigger('tap');
$('.BtMisDocumentos').trigger('touchstart');
Try this with .click() aswell.
jQuery docs:
https://api.jquery.com/click/
EDIT #TWISTY:
If you want to just copy and paste:
//With a HTML class attribute. Example: <div class="BtMisDocumentos"></div>
$('.BtMisDocumentos').trigger('vclick');
$('.BtMisDocumentos').trigger('tap');
$('.BtMisDocumentos').trigger('touchstart');
$('.BtMisDocumentos').click();
//With a HTML id attribute. Example: <div id="BtMisDocumentos"></div>
$('#BtMisDocumentos').trigger('vclick');
$('#BtMisDocumentos').trigger('tap');
$('#BtMisDocumentos').trigger('touchstart');
$('#BtMisDocumentos').click();
When using jQuery versus JavaScript, you will use CSS Style Selectors.
$('#BtMisDocumentos').trigger('vclick');
$('#BtMisDocumentos').trigger('tap');
$('#BtMisDocumentos').trigger('touchstart');
For your code, the following should work still on Mobile:
$('#BtMisDocumentos').click();
Newer to javascript and trying to learn why this works, searching Google has led to no answers (although I maybe searching using the incorrect terms).
I'm am making a call to a function during an onclick event within an <a></a>. I was able to get the function finally working (with a suggestion from a coworker) by adding in 'javascript:' before making the function. Without the javascript: portion in the onclick, my function was not being called upon.
It now works but I don't understand what that is doing, the other programmer who suggested putting it in the call also isn't sure what exactly it does.
Here is a simplified version of the code used:
#1 .jspf higher up which includes page #2 to display it's contents
function createTagging(1, 2) {
cmCreateElementTag(1 + ", " + 2,"TagName");
}
HTML in .jspf file #2 further down website makes the call to function in file #1
<a id="CatEntry" href="https://aurl"
onclick="javascript: createTagging('parameter1', 'parameter2');"
title="atitle" aria-label="alabel">
<img id="ThumbNailImage_59244" src="https://image.jpg"
alt="" border="0"/>
</a>
-Troy
Why do I need 'javascript:' in the call to my javascript function?
You don't. It's an onclick handler. You use the javascript: pseudo-protocol where a URL is expected (for instance, if you'd used href instead of onclick). onclick expects JavaScript code.
In fact, it only works because JavaScript has labelled statements, and javascript: is a valid label. It's completely ignored.
Without the javascript: portion in the onclick, my function was not being called upon.
With respect, that must have been observational error. Again, in an onclick handler, it makes no difference whether you have javascript: in front of it or not. If it wasn't working, and then it was working, you changed something else at the same time you added javascript:.
onclick attribute is always calling javascript in HTML.
onclick="createTagging('parameter1', 'parameter2');"
It is only necessary if you use not an event, but href. There you need to add the protocoll as well for Javascript.
I'm studying for a HTML, CSS, JS exam and found various resources to help me study. In doing a practice quiz, I found this question.
You are creating a page that contains detailed employee information for a company portal. The page uses a jQuery library. The page contains a hidden button named btnEdit that is defined by the following code.
<button id="btnEdit" style="display: none;">Edit</button>
The button is not displayed by default.
The button must be displayed only if the user is logged on.
You need to add code to the document.ready() function to meet the requirements for the button.
Which line of code should you use?
A. $ ('#btnEdit').appear();
B. $ ('#btnEdit').visible = true;
C. $ ('#btnEdit').show();
D. $ ('#btnEdit').Visible();
The quiz telling me that option A is correct.
I haven't use appear() method before.
My question is:
.appear(), Is this function really as a part of jQuery library?
I could not find .appear() function in jQuery doc. No results in jQuery API
Is that option A is correct? If it is correct can anyone tell me why?
As of my conscience option C is correct(If I'm wrong correct me).
Can anyone please tell me difference between appear() and show()?
And when to use appear(), when to use show()?
Show is a function to show a selected element.
e.g:
<i id='element' style='display:none;'></i>
to show hidden element
$('#element').show()
As Jquery says disappear/appear is a custom event you can fire once the element is shown. so it should look something like -
$('#element').appear(function() {
... code goes here
});
For jQuery reference
show - http://api.jquery.com/show/
appear/disappear - https://plugins.jquery.com/appear/
Edit - i think it's also safe to say that show is packed with options and a 'complete' callback which is fired once the element has finished shown.
I am looking for a way to be able to rig a shortcut to a youtube controll button. I want to be able to click on the left and right arrow to activate "Previous video" and "Next video" on a playlist. I used to be easily able to do it myself, but they made some changes and since those I can't quite replicate what i used to have working.
I use the Google Chrome Shortkey Plug-in to manage my short cut keys. I make the right key execute a javascript code only on "https://www.youtube.com*"
The problem reside in the script to execute. I used to simply do a document.getElementById but now they use class instead of id and I cant get it to work. Their buttons are divs and they go like this:
<div class="ytp-button ytp-button-prev" role="button" aria-label="Previous" tabindex="6050" style="display: inline-block;">
</div>
<div class="ytp-button ytp-button-next" role="button" aria-label="Next" tabindex="6051" style="display: inline-block;">
My code actualy comes from another Stackoverflow Question
Still, if I put all of that together to make the folowing code it doesn't work.
simulate(document.getElementsByClassName("ytp-button ytp-button-prev"), "click");
getElementsByClassName returns an array, since you can have multiple elements with the same class name. You can pick them by document.getElementsByClassName("ytp-button ytp-button-prev")[index]
jQuery is not the best solution for all our projects, but for simulate events it's not bad option
(function($){
$('.element').click();
// same for others ex: $('.element').keyup();
})(jQuery);
example: http://jsfiddle.net/h0po3q3w/
If you are using jQuery, you can target the element then trigger a click event like this:
$( ".ytp-button-prev" ).trigger( "click" );
Jason has your answer, but an alternative is to use document.querySelector. If there is only one button with those classes, or you want the first one, then:
var button = document.querySelector('.ytp-button.ytp-button-prev');
I am new to watir and ruby. I have two questions for which I am unable to get the solution. I have googled and have still not got working solution. Any assistance will be of great help.
Question 1 : How to fire Javascript event.
The html is as mentioned below.
img onclick="javascript:previousScreen(1);" alt="Back" src="/WSWeb/images/someimage.gif"/
I have tried most of the solutions likes, fireevent etc. which was on Google. Please write me a piece of code which will work for the mentioned scenario.
Question 2 : How to click or validate if the element exists for html mentioned below.
Scenario 1 : This is the html text
input onclick="history.go(-1)" type="button" value="Back"/
Scenario 2 : <center> under this-> Text - Login Id. This is all what is present. This is a cell in a table which is in a frame. Please write me a code for both the scenarios.
Well, if you have two questions, post two questions. :)
If the page is public, post a link to it, that is the best way for us to help.
Regarding javascript events, see How to find out which JavaScript events fired?
You can click the button like this:
browser.button(:value => "Back").click
For the center element, you will have to provide more HTML. I am not sure what you need to do with it.
First of all, as to selecting elements that do not have an attribute, see the answers (all three) to this SO question asked a little while back: Accessing an element with no attributes in Watir
With regard to your specific examples/question here: If you refer to the watir wiki's listing of methods supported for selecting elements you will see that an image element (img tag) can be selected by the src. So for your first thing, just do this
browser.image(:src => '/WSWeb/images/someimage.gif').click
if for some reason the click method does not work, then you could try firing the onclick event directly
browser.image(:src => "/WSWeb/images/someimage.gif").fire_event('onclick')
For the second part, you will also notice that value can be used to select 'button' elements which includes input tags of type=button. thus to see if the button is there
browser.button(:value => 'Back').exists? #(will return true or false)
For the second scenario there, Watir does not currently support selecting by most formatting tags like center, so you would need to look at what element contained that text. You say it is a table cell (td) inside a frame (which I don't know how to identify since you provide no html) and if that is the case and I am understanding it right then
browser.frame(:how => 'what').cell(:text => 'Login Id').exists?
should work (presuming the text is actually 'Login Id' and not 'Login ID')