ok here is what i got from you can you check if this is right i cant edit to much of it from what the book says so it has to stay somewhat in this format im guessing..hope you can help
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
document.getElementById( news ) .innerHTML='newsItem1';
var newsItem1 = "L'AQUILA, ITALY (AP) - L'Aquila's chief prosecutor announced an investigation into allegations of shoddy construcation as workers continued to scour the rubble for people still missing after a devastating earthquake five days ago. http://in.reuters.com/article/idUSWBT01103020090411;
var newsItem2 = "WASHINGTON (Reuters) - President Barack Obama said on Friday the recession-hit US ecomony was showing 'glimmers of hope' despite remaining under strain and promised further steps in coming weeks to tackle the finicial crisis. http://in.reuters.com/article/idUSWBT01103020090411";
var newsItem3 = "(eWeek.com) - Apple is close to hitting 1 billion downloads from its App Store and plans on prize giveaway for whoever downloads the billionth application that includes a MacBook Pro and an iPod Touch. http://www.eweek.com/c/a/application-development/eweek-newsbreak-april-13-2009/";
var newsItem4 = "ALTANTA (AP) - Chipper Jones drove in two runs, including a tiebreaking single, and the Atlanta Braves beat Washington 8-5 on Sunday to hand the Nationals their sixth straight loss to start the season. http://www.newsvine.com/_news/2009/04/11/nationals-8-5?category=sports";
</script>
</head>
<body>
<form action="" name="newsHeadlines" method="get">
</form>
<table style="border: 0; width: 100%">
<tr valign="top">
<td>
<select name="headline" multiple="multiple"
style="height: 93px">
<option onclick="document.newsHeadlines.news.value=newItem1">Investigation of building standards in quake zone</option>
<option onclick="document.newsHeadlines.news.value=newsItem2">Obama sees signs of economic progress</option>
<option onclick="document.newsHeadlines.news.value=newsItem3">Apple App Downloads Approach 1 Billion</option>
<option onclick="document.newsHeadlines.news.value=newsItem4">Jones, Braves beat winless Nationals 8-5</option>
</select>
</td>
<td>
<textarea id="news" name="news" cols="50" rows="10"
style="background-color: transparent"></textarea>
</td>
</tr>
</table>
</body>
</html>
can someone help me fix the problem everytime i click on "Investigation of building standards in quake zone" nothing shows in the textarea i created.
Although it might be too late for your assignment, I thought I should point out some errors in the code and try to implement what you are intending to, i.e. displaying different newsItems upon clicking corresponding select option.
document.getElementById( 'news' ).innerHTML='newsItem1';
should be written after the textbox tag with id 'news' is declared, or else will give null value.
In <option onclick="document.newsHeadlines.news.value=newItem1>,
there's a typo (newItem1 should be newsItem1) and the onclick attribute value is not correct. To correctly select the textbox and display intended text in it, you should use the following: onclick="document.getElementById('name').value=newsItem1". Use similar values for rest of the options.
Related
OK, so I mentioned Selenium Basic as that is the use of the XPath and I believe Selenium Basic uses Selenium version 2 so maybe it won't be able to understand some/all answers that might require the latest Selenium. But someone might take that into account if necessary.
There are dynamic classes at play here.
Criteria for selection.
1. Class starting with 'NextToJump__eventWrapper' (the outer one) must be used.
2. Class starting with 'NextToJump__venue' must contain text = 'Ballarat'
3. Class starting with 'NextToJump__race' (and/or span) must contain text = 'Race 2'
I need to be able to click on the <a> tag that contains Points 2 and 3.
The best that I've been able to do (and checked) using ChroPath in Chrome Devtools is...
//div[starts-with(#class,'NextToJump__eventWrapper')]//descendant::*[contains(text(),'Ballarat')]
But note that there are 2 cases of Point 2 in the HTML but only 1 case that satisfies Points 2 and 3.
Thanks
<div class="NextToJump__eventWrapper--13zZJ">
<div>
<div class="NextToJump__raceEvent--bfMON" data-testid="next-to-jump-item">
<a class="Link__link--9x4YY" href="/racing-betting/greyhound-racing/crayford-am/20200708/race-1-1801951-58544404">
<div class="NextToJump__iconWrapper--1yG60"></div>
<div class="NextToJump__eventDetail--CUzdX">
<div class="NextToJump__venue--1jwWA">Ballarat</div>
<div class="NextToJump__race--3JydR"><span>Race 1</span></div>
</div>
<div class="NextToJump__countdown--EG8mR"><span class="Countdown__countdown--4vRpD Countdown__imminent--2yc2K">52s</span></div>
</a>
</div>
<div class="NextToJump__raceEvent--bfMON" data-testid="next-to-jump-item">
<a class="Link__link--9x4YY active" href="/racing-betting/greyhound-racing/rockhampton/20200708/race-4-1799474-58466521" aria-current="page">
<div class="NextToJump__iconWrapper--1yG60"></div>
<div class="NextToJump__eventDetail--CUzdX">
<div class="NextToJump__venue--1jwWA">Rockhampton</div>
<div class="NextToJump__race--3JydR"><span>Race 4</span></div>
</div>
<div class="NextToJump__countdown--EG8mR"><span class="Countdown__countdown--4vRpD Countdown__imminent--2yc2K">2m 52s</span></div>
</a>
</div>
<div class="NextToJump__raceEvent--bfMON" data-testid="next-to-jump-item">
<a class="Link__link--9x4YY" href="/racing-betting/greyhound-racing/ballarat/20200708/race-4-1799454-58465201">
<div class="NextToJump__iconWrapper--1yG60"></div>
<div class="NextToJump__eventDetail--CUzdX">
<div class="NextToJump__venue--1jwWA">Ballarat</div>
<div class="NextToJump__race--3JydR"><span>Race 2</span></div>
</div>
<div class="NextToJump__countdown--EG8mR"><span class="Countdown__countdown--4vRpD Countdown__imminent--2yc2K">5m 52s</span></div>
</a>
</div>
</div>
</div>
The xpath expression you need to use to select your target <a> tag is long and convoluted, but that's life....
[formatted for ease of reading, but you can use that in one line]
//a
[ancestor::div[starts-with(#class,'NextToJump__eventWrapper')]]
[.//div[.="Ballarat"]
[starts-with(#class,'NextToJump__venue-')]
[./following-sibling::div[.="Race 2"]
[starts-with(#class,'NextToJump__race-')]
]
]
Edit:
In "plain English":
Find an <a> node which meets ALL these conditions (i) has an ancestor (not a parent) node which is a <div>, which <div> has a class attribute with an attribute name which starts with NextToJump__eventWrapper; and (ii) it has <div>descendant (not just a child) node, which has Ballarat as a text node AND which has a class attribute with an attribute name which starts with NextToJump__venue-, where that <div>descendant itself has a following sibling which is a <div> which itself has a Race 2 text node AND which has a class attribute with an attribute name which starts with NextToJump__race-...
Yes, the word "plain" doesn't really fit here, but that's the closest I could get. I like xpath, and it's very powerful, but sometimes it's very hard to follow... As an aside, it would have been somewhat less cryptic if xquery was used instead of straight xpath.
NOTE: Please see edit below. Primary issue is that I did something dumb.
This question is a duplicate, but the accepted answer didn't actually address the problem, and the listed workaround didn't work for me.
My HTML looks like this:
<div class="row checkbox_row">
<div class="col-xs-1 checkbox_cell">
<input type="radio" class="answerCheckbox assessmentQuestion" name="currently_employed_select" value="yes" id="currently_employed_select_1"/>
</div>
<div class="col-xs-11">Yes</div>
</div>
<div class="row checkbox_row">
<div class="col-xs-1 checkbox_cell">
<input type="radio" class="answerCheckbox assessmentQuestion" name="currently_employed_select" value="no" id="currently_employed_select_2"/>
</div>
<div class="col-xs-11">No</div>
</div>
Neither this jQuery:
var name = $(this).attr('name');
var value = $('input[name=' + name + ']:radio:checked').val();
Nor this Javascript:
var radios = document.getElementsByTagName(name);
for(var x = 0; x < radios.length; x++){
if(radios[x].checked){
return radios[x].value;
}
}
... are getting a value out of the radio button.
Is there something obvious and stupid I'm overlooking here? Is there some Bootstrap formatting that's mandatory when using radio buttons?
EDIT: I've figured out what piece of code is killing me, and it has bugger-all to do with Bootstrap.
This:
$(document).ready(function() {
$('.answerCheckbox').val(function() {
highlightCheckedRow(this);
});
... is meant to highlight the container rows of any checked boxes (including radio buttons) on page load. Which it does, admirably, but apparently at the expense of nuking the values of said radio buttons.
... which, given that val() overwrites the value when you give it a parameter, should not come as a surprise to me.
That'll teach me to do cargo cult programming.
Right, so, need to figure out some other way to run that function on all my answerCheckbox elements on page load, and I'm all set.
I want to find the element of this link "us states" in <h5>. I am trying this on Craigslist. How can I do it?
Here is the URL: http://auburn.craigslist.org/
<html class="">
<head>
<body class="homepage w1024 list">
<script type="text/javascript">
<article id="pagecontainer">
<section class="body">
<table id="container" cellspacing="0" cellpadding="0"
<tbody>
<tr>
<td id="leftbar">
<td id="center">
<td id="rightbar">
<ul class="menu collapsible">
<li class="expand s">
<li class="s">
<li class="s">
<h5 class="ban hot">us states</h5>
<ul class="acitem" style="display: none;">
</li>
<li class="s">
<li class="s">
Only using class names is not sufficient in your case.
By.cssSelector(".ban") has 15 matching nodes
By.cssSelector(".hot") has 11 matching nodes
By.cssSelector(".ban.hot") has 5 matching nodes
Therefore you need more restrictions to narrow it down. Option 1 and 2 below are available for CSS selector, 1 might be the one that suits your needs best.
Option 1: Using list items' index (CssSelector or XPath)
Limitations
Not stable enough if the site's structure changes
Example:
driver.FindElement(By.CssSelector("#rightbar > .menu > li:nth-of-type(3) > h5"));
driver.FindElement(By.XPath("//*[#id='rightbar']/ul/li[3]/h5"));
Option 2: Using Selenium's FindElements, then index them. (CssSelector or XPath)
Limitations
Not stable enough if a site's structure changes
Not the native selector's way
Example:
// Note that By.CssSelector(".ban.hot") and //*[contains(#class, 'ban hot')] are different, but doesn't matter in your case
IList<IWebElement> hotBanners = driver.FindElements(By.CssSelector(".ban.hot"));
IWebElement banUsStates = hotBanners[3];
Option 3: Using text (XPath only)
Limitations
Not for multilanguage sites
Only for XPath, not for Selenium's CssSelector
Example:
driver.FindElement(By.XPath("//h5[contains(#class, 'ban hot') and text() = 'us states']"));
Option 4: Index the grouped selector (XPath only)
Limitations
Not stable enough if the site's structure changes
Only for XPath, not CssSelector
Example:
driver.FindElement(By.XPath("(//h5[contains(#class, 'ban hot')])[3]"));
Option 5: Find the hidden list items link by href, then traverse back to h5 (XPath only)
Limitations
Only for XPath, not CssSelector
Low performance
Tricky XPath
Example:
driver.FindElement(By.XPath(".//li[.//ul/li/a[contains(#href, 'geo.craigslist.org/iso/us/al')]]/h5"));
By.cssSelector(".ban") or By.cssSelector(".hot") or By.cssSelector(".ban.hot") should all select it unless there is another element that has those classes.
In CSS, .name means find an element that has a class with name. .foo.bar.baz means to find an element that has all of those classes (in the same element).
However, each of those selectors will select only the first element that matches it on the page. If you need something more specific, please post the HTML of the other elements that have those classes.
You can describe your CSS selection like cascading style sheet rows:
protected override void When()
{
SUT.Browser.FindElements(By.CssSelector("#carousel > a.tiny.button"))
}
i have this html code
<div class="name">
<span id="businessNumOnMap2" class="resultNumberOnMap" style="display:none;">2</span>
<span>
Bangsar Seafood Garden Restaurant</span><span id="phoneSpan1"></span>
<script type="text/javascript">
var d=document.getElementById('phoneSpan1');d.innerHTML+='0';d.innerHTML+='3';d.innerHTML+=0?'8':'-';d.innerHTML+=1?'2':'1';d.innerHTML+='2';d.innerHTML+=1?'8':'1';d.innerHTML+=0?'0':'2';d.innerHTML+='2';d.innerHTML+=0?'4':'5';d.innerHTML+='5';d.innerHTML+=1?'5':'0';
</script>
</div>
i start my regex with this : <div class="name"[^>]*>[\s\S]+?</div>
and i remove the html. im using this : <[^>]*>
how ever, the out put is Bangsar Seafood Garden Restaurant <script type = "text/javascript"> ...</script><div>
the one that i want is on Bangsar Seafood Garden Restaurant..can anyone help me?
If all you want is the business name, can't you just do a text search for class="businessName" and then take everything between the next > and <. It might not work if the HTML changes, but you run the same risk with Regex.
I am trying to make a Google custom search (I just need some sort of search engine on my site), and I need to make it so that I can use my own search box (input field). I need it to be of exact size. I also need to be able to make my own button to search. I am going to need to be able to change the size and background of the search button. I am not completely sure yet, but I might actually need it to be a regular img.
Does anyone know how to do this?
If you cannot do this with Google, do you know of another way to do it?
If there is no other way besides using your own search engine, can I please get a link to a very simplified tutorial on how to make my own. I am willing to put in the extra work to learn, but I tried a bit, and after looking at three different tuts, I gave up because they were very very long and confusing. I hope I was just looking in the wrong places.
Here is the one I am using, you just need to add some styles to <input id='q' which is the search box, and <input value='MyButton' is the button to click
<!-- Google CSE Search Box Begins -->
<center>
<form id="searchbox_XXXXXXXXXX:YYYYYYYYY" action="http://myblog">
<input value="XXXXXXXXXX:YYYYYYYYY" name="cx" type="hidden"/>
<input value="FORID:11" name="cof" type="hidden"/>
<input id="q" style="width:600px;" name="q" size="75" type="text"/>
<input value="MyButton" name="sa" type="submit"/>
</form>
</center>
....
Edit: Above is my answer from 2010, I cannot confirm it is working or not anymore, but here is the one working.
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXX:YYYYYYYYYYYYYY');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setAutoComplete(true);
customSearchControl.draw('cse', options);
}, true);
</script>
For more info: refer to https://developers.google.com/custom-search/docs/js/cselement-devguide
For Googlers who are looking for a solution with new "Overlay Results" option under "Look and Feel" . I used YOU's answer and added some minor hacks to make it work. Basic idea is get the code Google gives you, hide Google's search box and button, and use YOU's answer with the proper XXXXX:YYYY codes. While hiding <gcse:search></gcse:search>" do not use display:none otherwise search results will not work.
<script>
(function() {
var cx = 'XXXXXXXXXX:YYYYYYYYY';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
<div style="width:0px;overflow:hidden;height:0px;"> <!-- if you use display:none here, it doesn't work-->
<gcse:search></gcse:search>
</div>
<form id="searchbox_XXXXXXXXXX:YYYYYYYYY" action="">
<input value="XXXXXXXXXX:YYYYYYYYY" name="cx" type="hidden"/>
<input value="FORID:11" name="cof" type="hidden"/>
<input id="q" style="" name="q" size="75" type="text"/>
<button class="btn">Search</button>
</form>
ge stackoverflow,
the issue really got me fired-up enough to do a mini walk-through - if you are trying to set up a v2 bar, dealing with the flat spyglass, just want to get the spyglass to work, want to replace the custom bar altogether using v2, finding and locating the styles used and overriding them. Hope it helps! http://t.co/9nvx2l0DeD #eb_p1
long address: http://eburnett.hubpages.com/hub/googlecustomsearchenginev2