I'm trying to understand how to access the phone number here:
<div class="address__location">
<p>
Siddals Road
<br> Derby DE1 2QD
</p>
<p>Main Phone:
0800123123
</p>
</div>
I need to find the html element of the phone number so I can replace it with another number.
So if I were to use getElementbyID"xxx" it would return the phone number.
There is no id attribute set on that element.
You could use another selector, though, by using document.querySelector and passing a[href^="tel:"]. This will search for a elements that have an href attribute that starts-with (that is what ^= means) the text tel:.
so
var telephoneNode = document.querySelector('a[href^="tel:"]');
telephoneNode.textContent = 'some other phone'; // change the displayed text
telephoneNode.href = 'some other url'; // change the href and in effect where the link points to
Related
I'm trying to collect the text in a if href contains venue/, so I tried to do it this way:
var venue = $('.details > span > a:contains(href="venue/")');
sheet.getRange(3,17).setValue(venue.text().trim());
But returns with no value, how should I be able to retrieve such value?
As the site changes the positions of the elements from time to time, I need to define this contains.
Expected Result:
Estadio Manuel Ferreira (Asunción)
Map Example:
<div class="details ">
11/08/2021
<span class="divider"></span>
CONMEBOL Libertadores
<span class="divider"></span>
<span>KO</span>
<span>
19:15
</span>
<br>
<span>Venue</span>
<span>
Estadio Manuel Ferreira (Asunción)</span>
</div>
Link to site:
https://int.soccerway.com/matches/2021/08/12/south-america/copa-libertadores/club-olimpia/clube-de-regatas-de-flamengo/3579565/
It seems like the issue is right on the first line, as the “venue” variable does not return what you expect.
I propose you select the anchor you are looking for by getting the last element of type a in the div you provided and assign the value of its href attribute to a variable called venue. After that, check if the venue variable is equal to venue/. If the condition returns true, get the anchor’s inner text, assign it to a variable called result and log it.
You can make it work by using the following code:
let element = $('.details a').last()
let venue = element.attr('href');
if (venue === 'venue/') {
let result = element.text()
console.log(result) // this is the value you are looking for
}
Updated:
let elements = $('.details a')
elements.each((index, value) => {
let href = $(value).attr('href')
if (href === 'venue/') {
console.log($(value).text())
}
})
first am sorry for bad English / grammar
am creating something where you show and hide.
but my problem is that when I click show/hide it only brings input box 1 on both buttons. and I want it to show/hide each box.
my problem is that. I don't want to use the id to define show/hide Element
because if I have more than 10 div with input boxes I have to define them all by getElementById I don't want that.
I want when I click on the show/hide it brings input box without getElementById
so that even if I have more then 10 input box to show I only click and show/hide without defining its id
function myFunction(event) {
var x = document.getElementById("mydv");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
x.parentNode.insertBefore(x, event.target.nextSibling);
}
document.addEventListener('click', function(event){
if(event.target.className.includes("dv1")){
myFunction(event);
}
});
<!DOCTYPE html>
<html>
<head>
<title> SHOW / Hide </title>
</head>
<body>
<ul>
<li>
<div id="mydv" style="display:none;">
<p>input box 1
<input type="text" name="textfield">
</p>
</div>
<button class="dv1">SHOW/HIDE</button>
</li>
<li><div id="mydv" style="display:none;">
<p>input box 2
<input type="text" name="textfield">
</p>
</div>
<button class="dv1">SHOW/HIDE</button></li>
</ul>
</body>
</html>
If you want to specify an element on a page, that can be similar in every way to other elements except perhaps text content or something else, realistically you need an id, as this is how JavaScript defines a unique element.
But what you can do, is change your HTML button, to contain a rel, which is an attribute, and then get that attribute and use that to specify which element id you're looking for.
You can then call a function and simply pass "this" as an argument.
HTML :
<button onclick="hideShow(this)" rel="mydv">Show/Hide</button>
JavaScript :
<script>
function hideShow(elem){
var ele = document.getElementById(elem.getAttribute("rel"));
if(ele.style.display == "none"){
ele.style.display = "block";
}
else{
ele.style.display = "none";
}
}
</script>
If you are absolutely abhorrent to using ID's, you can use child nodes and specify which child by number, but this means if ever you change anything, you will break your code, which is foolish. I recommend using unique ID's and simply changing your code in the above ways.
Short and lazy answer to your problems - if you are going to keep your current hierarchy, you can simply find DIV tag inside your LI parentNode (since its the only DIV tag).
Basically it goes like this - button press -> change focus from button to parentNode LI -> finds DIV.
in short - in function myFunction(event) change
var x = document.getElementById("mydv");
to
var x = event.target.parentNode.getElementsByTagName("DIV")[0];
Working example:
https://jsfiddle.net/w2a9zg46/1/
The problem is that getElementById refers to the first element with that id. It simply ignores everything else. Using the same id for more than one element is a bad practice. An id should be a unique reference to that element, use class instead.
Is it possible to style the value in the attribute ngModel of an input tag?
Example:
<input class="input" type="text" [(ngModel)] = "myService.text">
Let's say the value of text is '28 packages', can I put 28 in bold?
So if i understand correctly you want to have it bold whenever the value is 28 ?
yes its possible you can use a ng-class with a ternary expression like this
.bold{
font-weight:600;
}
<input type="text" ng-class="myService.text == '28 ? 'bold' : '''" class="input" ng-model="myService.text" />
This is not angular-related rather a CSS related question.
You cannot style only a part of an input in HTML/CSS so you won't be able to do it in angular.
Instead, you can use an input that is hidden behind a div. The idea is that when the user clicks the div, you actually focus the input. When the user types text, you capture the content of the input and fill the div with it, eventually adding <span class"highlight"> around the number of packages.
I prepared you a stackblitz in pure CSS/JS. You can adapt it in angular if you want.
Relevant pieces of code :
HTML :
<span id="hiddenSpan">This is the hidden div. Click it and start typing</span>
<div>
<label for="in">The real input</label>
<input id="in" type="text">
</div>
JS :
const input = document.getElementById('in')
const hiddenSpan = document.getElementById('hiddenSpan')
function onInputChanged() {
let text = input.value
const regex = new RegExp('(\\d+) packages')
let result = regex.exec(text)
if(result) {
hiddenSpan.innerHTML = '<span class="highlight">'+result[1]+'</span> packages'
} else {
hiddenSpan.innerHTML = text
}
}
// Capture keystrokes.
input.addEventListener('keyup', onInputChanged)
// Focus the input when the user clicks the pink div.
hiddenSpan.addEventListener('click', function() {
input.focus()
})
CSS :
#hiddenSpan {
background-color: pink;
}
.highlight {
font-weight: bold;
background-color: greenyellow;
}
Note : the downside is that the blinking caret is not visible anymore. You can take a look at this resource if you want to simulate one.
It is not possible to style certain parts of a text <input> field in bold. However, you can use a contenteditable div instead of a text <input> field. Inside the contenteditable div you can have other HTML tags like <strong> to style certain parts of the text however you like.
I created an Angular directive called contenteditableModel (check out the StackBlitz demo here) and you can use it to perform 2-way binding on a contenteditable element like this:
<div class="input" contenteditable [(contenteditableModel)]="myService.text"></div>
The directive uses regular expressions to automatically check for numbers in the inputted text, and surrounds them in a <strong> tag to make them bold. For example, if you input "28 packages", the innerHTML of the div will be formatted like this (to make "28" bolded):
<strong>28</strong> packages
This is the code used in the directive to perform the formatting:
var inputElement = this.elementRef.nativeElement;
inputElement.innerHTML = inputElement.textContent.replace(/(\d+)/g, "<strong>$1</strong>");
this.change.emit(inputElement.textContent);
You can change the <strong> tag to something else (e.g. <span style="text-decoration: underline"> if you want the text to be underlined instead of bolded).
When performing the formatting, there is an issue where the user's text cursor position will be unexpectedly reset back to the beginning of the contenteditable div. To fix this, I used 2 functions (getOriginalCaretPosition and restoreCaretPosition) to store the user's original cursor position and then restore the position back after the text formatting is performed. These 2 functions are kind of complex and they're not entirely relevant to the OP's question so I will not go into much detail about them here. You can PM me if you want to learn more about them.
<div class="aw-widgets-cellListCellTitleBlock">
<h3 title="block1" class="aw-widgets-cellListCellTitle" id="CellTitle">block1</h3>
<label class="aw-widgets-cellListCellItemType aw-base-small">000027</label>
</div>
In given snippet title="block1" i want to take it in the form of variable foe
e.g. String sample="block1" and then it used as title=sample or //div[text()=sample].
I tried this one but its not working. Did you have any solution for it?
If you want to get the title value from HTML code, then you can use any one from the following code.
WebElement element = driver.findElement(By.xpath("//h3[contains(text(),'block1')]"));
or
WebElement element = driver.findElement(By.xpath("//h3[#id='CellTitle']"));
or
WebElement element = driver.findElement(By.xpath("//div[#class='aw-widgets-cellListCellTitleBlock']/h3"));
//get text
String text = element.getAttribute("title");
What's the regex which allows me to select all the attribute names from <form> and <input> tags but not from any other HTML tag?
For example:
<!-- all attribute names get selected -->
<input class="something" id="yes" type="text" name="my-field" value="Hello, world!">
<!-- class and id don't get selected because it's a div -->
<div class="something" id="no"></div>
<!-- class gets selected -->
<form class="my-form"></form>
I'm only after the attribute names
Such a regexp would be very complicated to build. Despite the fact that you can't match all HTML by regexes, it would need a very complicated lookbehind to check whether the attribute name which you want to match comes after a opening tag whose name is either "form" or "input". Don't try to build such a regex, you'd go crazy and/or end up with an unreadable, non-maintainable or -undestandable monster.
Instead, use a DOM parser (there will be one for your language) and apply DOM selectors and get the attribute names of the elements.
It is not easy task to do it with regex and actually it is not a good idea to do it with regex. But it is possible >>
input = '...';
var tmp = input, found, params = [];
var re = /(<(?:form|input)\b.*?\s)([\w\-]+)=(['"]).*?\3/gi;
do {
found = 0;
tmp = tmp.replace(re, function($0,$1,$2,$3) {
params.push($2);
found = 1;
return $1;
});
} while (found);
Check this demo.