Let's say that I got code like that:
<div class="div">
<input type="submit" value="Button" class="button1">
</div>
And then when I put in the console this code:
document.getElemetsByClassName('button1')[0].click();
It does click the button, but when I try the same thing in jQuery with arrays:
array = document.getElementsByClassName('div');
$(array[0]).find('button1').click();
It does not work and does not return any error messages so I don't know what is wrong. Thanks from above for help.
button1 is class. You should add a dot(.) before button1 to select button1 class like following.
$(array[0]).find('.button1').click();
The selector you are using is a tag selector. Change it to class selector:
$(array[0]).find('.button1').click();
//----------------^ Add a . here.
I would also better change this to:
$(".div .button1").trigger("click");
Works better this way, using trigger().
Related
I'm a newcomer when it comes to javascript and selenium. I have created a simple add to cart project, but the one i am currently working on im having some troubles. The HTML code is:
<div class="buttons-set" id="shipping-method-buttons-container">
<button type="button" class="dark" onclick="shippingMethod.save()" onkeypress="shippingMethod.save()">Continue</button>
<span id="shipping-method-please-wait" class="please-wait icon icon--notch" style="display:none;">
Loading next step... </span>
</div>
I can't seem to figure out anyway where i can click the Continue button. I have tried things such as
driver.findElement(By.linkText("Continue")).click();
driver.findElement(By.xpath(//*[#id='shipping-method-buttons-container']/button)).click();
and many other combinations but none seemed to work.
Try getting the element by its class name:
driver.find_element_by_class_name("dark").click();
I believe you have used implicit wait. If not we need to add it.
driver.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);
Also try this below xpath.
driver.findElement(By.xpath("//button[contains(text(),'Continue']")).click();
Hope this helps. Thanks.
Try this below code using cssSelector locator.
driver.findElement(By.cssSelector("button[class='dark'][type='button']")).click();
OR
Try to click the button using java-script executor.
WebElement continue_button = driver.findElement(By.cssSelector("button[class='dark'][type='button']"));
((JavascriptExecutor) driver).executeScript("arguments[0].click();", continue_button);
I'm trying to append a piece of text to a div using jQuery. I try to do this using the following code:
<html><head></head><body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sendButton").click(function(){
$("#conversation").append("<P>This is a message");
});
});
</script>
<div class="conversation"><p>some message</div>
<form><input type="button" id="sendButton" value="Send Message"></form>
</body></html>
Seeing the multitude of tutorials on the subject it seems to be such a simple thing to do, but I can't seem to figure out what I'm doing wrong here. Any help would be greatly appreciated.
You need to use class selector, As #conversation referes to element with id conversation
$(".conversation").append("<P>aergerag");
Fiddle DEMO
EDIT
You should look at this To Close or Not To Close Tags in HTML5 and a good question Closing tags in HTML5
replace # with . in your selector (conversation is a CLASS)
$(".conversation").append("<P>aergerag");
I am not any good at jQuery but from one of my projects I had to simply target the div with html as:
var someData = "This is a message";
$("#conversation").html(someData);
If some contents exists before this, then you can retrieve them, concatenate, and write it back into the target div.
I have a button:
<button type="button" onclick="toggleColor('white');" >White</button>
Which makes this:
Is there any way to get what is written on the button using jQuery. For example this button would return White because its in-between the 2 button tags.
You can get it by using .text(),
$('button').text();
Please read here to know more about it.
add id to your button like this
<button type="button" onclick="toggleColor('white');" id="your_button_id" >White</button>
now you can use JS like this
var button_text = document.getElementById('your_button_id').innerHTML;
and also you can use JQUERY like this
var button_text = $('#your_button_id').text();
Try
$("button").click(function(){
var title=$(this).attr("value");
alert(title);
});
You can do this with Vanilla JS, after you've added an ID so you can fetch the element.
Assuming:
<button type="button" onclick="toggleColor('white');" id='myButton'>White</button>
You can do in JavaScript:
var someVar = document.getElementById('myButton').innerHTML; // -> White
var anotherVar = document.getElementById('myButton').textContent; // -> White
Both will hold "White"
give the button an ID
<button id="btnTest" type="button" onclick="toggleColor('white');" >White</button>
JQuery:
alert($("#btnTest").text());
Just provide one id to button and use it with JQuery
<button id=btn type="button" onclick="toggleColor('white');" >White</button>
then use jquery like this
$("#btn").val();
it will work for your condition.
Try this event.target
$("button").click(function(event){
var text=$(event.target).attr("value")
alert(text);
});
This worked for me on chrome.
$("#your-button-id").val();
If you prefer to use the Name= identifier (rather than id), you can get the button text by using:
$('button[Name="buttonNameHere"]').text();
and you can set the text by using:
$('button[Name="buttonNameHere"]').text("Replacement Text Here");
In Jquery you can use the following code:
$("#button").val();
The above line will give the text written on the button. And for setting text on the button through Jquery use the following code:
$("#button").val("SAVE");
<div class='fixed_button homes hidden'>
<a class='btn btn-primary homes'>Continue →</a>
</div>
jQuery
$(".homes").on('click', function(){
$("choose_style").addClass('hidden');
$("choose_town").removeClass('hidden');
});
I need the .choose_town div to show and the .choose_style div to hide when I click the button.
Nothing happens when the button gets clicked though.
Don't forget the .
$(".choose_style").addClass('hidden');
$(".choose_town").removeClass('hidden');
You forgot the '.' (for a class) or '#' (for an Id)
Check it $(".class") or it $("#id")
$(".choose_style").addClass('hidden');
$(".choose_town").removeClass('hidden');
It looks like your $("choose_style") and $("choose_town") are missing . or #
It is very simple by jQuery and Love this method:
$("id").addClass('class');
$("id").removeClass('class');
just place and understand these classes functionality what you want to do.
I have a form that I create a checkbox on a click of a button. I am using https://github.com/pixelmatrix/uniform which provides an update function to style dynamically create elements which does not work. I got a work around but my problem is that it also reset the already created elements so they double, triple etc.
They are wrapped in a div with a class of checker. Is there a way to check if the div is around it first before applying my $('.table').find('input:checkbox').uniform(). I have tried different examples but they dont seem to work with my code and my jQuery is still limit.
Thanks
<div class="checker" id="uniform-160">
<span>
<input type="checkbox" name="chbox" id="160" style="opacity: 0;">
</span>
</div>
jQuery:
$(".fg-button").live("click", function(){
$('.table').find('input:checkbox').uniform()
});
Try this:
$('.table input:checkbox').not('div.checker input').uniform()