i am trying to write a Greasemonkey-Script that finds a certain string in innerHTML and gets me the spanID of that object as a string in a variable.
This is the Code on the Website:
<span id="spanID_Text">MatchText</span>
So i need to get the "spanID_Text" as a Variable when MatchText ist the correct value.
Can you please help me?
Is this what you are looking for!
var spans = document.getElementsByTagName('span')
for(var i= 0; i<spans.length;i++){
if(spans[i].innerHTML.search("MatchText")>-1){
var idMatchingSpan = spans[i].id;
console.log(idMatchingSpan)
}
}
<span id="spanID_Text">This is MatchText</span>
<span id="spanID_1">NotMatching</span>
<span id="spanID_2">NotMatching</span>
<span id="spanID_3">NotMatching</span>
Related
I have the following innerHTML in element id "word":
<span class="green">h</span><span class="white">e</span><span class="white">l</span><span class="green">l</span><span class="white">o</span
I would like to create a function (wordReverter) that removes all of the tags, leaving in the above example, only the word "hello".
Any help would be greatly appreciated, thank you!
function wordReverter() {
var word = document.getElementById("word").innerHTML;
//var rejoinedWord = rejoined word with <span> tags removed
document.getElementById("word").innerHTML = rejoinedWord;
}
Get the innerText and use it as a new innerHtml like below
(function wordReverter() {
var word = document.getElementById("word").innerText;
document.getElementById("word").innerHTML = word;
})()
<div id="word">
<span class="green">h</span><span class="white">e</span><span class="white">l</span><span class="green">l</span><span class="white">o</span>
</div>
If you have the containing element, you can target it and retrieve it's textContent, otherwise, you can select all the elements of interest and retrieve their content as below:
function wordReverter() {
let letters = document.querySelectorAll('.white,.green')
return Array.from(letters).map(l=>l.textContent).join('')
}
console.log(wordReverter())
<span class="green">h</span><span class="white">e</span><span class="white">l</span><span class="green">l</span><span class="white">o</span>
I want to create a paragraph element and add content to it. Basically i want to let the textContent of a paragraph element be a string.
What i have tried doing is:
var st="Hello";
con=document.getElementById("content");
var pv=document.createElement("p");
con.appendchild(pv);
pv.setAttribute("",st);
<span id="content"> </span>
What attribute should i use to add in the setAttribute function here? I tried using textContent but it's not an attribute. Any other way i can do this?
You could do with elem.innerText instead of setAttribute
var st = "Hello";
var con = document.getElementById("content");
var pv = document.createElement("p");
con.appendChild(pv);
pv.innerText= st;
<span id="content"> </span>
You should use innerText to do this.
pv.innerText = "hello"
You can set and get the text value of an element using innerText.
More info on innerText can be found here:
https://www.w3schools.com/jsref/prop_node_innertext.asp
You can also use innerHTML which can change not just the text but also the HTML.
let con_txt = document.getElementById("content_text");
let pv_txt = document.createElement("p");
con_txt.appendChild(pv_txt);
pv_txt.innerText = "From innerText";
let con_html = document.getElementById("content_html");
let pv_html = document.createElement("p");
con_html.appendChild(pv_html);
pv_html.innerHTML = "<b>innerHTML also works!</b>"; //You can use HTML tags here
<span id="content_text"></span>
<span id="content_html"></span>
Above result in HTML
<span id="content_text">
<p>From innerText</p>
</span>
<span id="content_html">
<p><b>innerHTML also works!</b></p>
</span>
More info about innerHTML
I have this html:
<span class="price-amount amount"><span class="price-currencySymbol">£</span>49.99</span>
I want to extract just the value of '49.99' without the html and currency symbol.
I have tried this:
function() {
var element = document.querySelector('.price-amount');
var price = element.innerHTML.replace('£', '');
return price;
}
But the result is this:
<span class="price-currencySymbol">£</span>49.99
Rather than: 49.99
Try this
var price = element.innerHTML.match(/\d+\.\d+/)[0];
where
.match searches the pattern of price using regex.
[0] returns the first match, and in your case it would be the only match.
If you want to delete what's in the '.price-currencySymbol' span in every case, you juste have to empty its html:
document.querySelector(".price-amount").innerHTML = "";
By using selector logic and accessing the proper text node you don't even need to use regexp.
var price = document.querySelector(".price-amount")
.childNodes[1].textContent;
console.log(`Extracted price: ${price}`);
<span class="price-amount amount"><span class="price-currencySymbol">£</span>49.99</span>
Html Code
<div id="price-tag"><i class="fa fa-inr"></i> <span id="price"></span></strong></div>
have a java script function that append value to a span
$("#price").html(Price);
Now I want to get the price value -
java script code
document.getElementById('price-tag').onclick = function(e){
alert(document.getElementById('price').value);
}
its returning undefined.
is there any way to get the value?
span is not an input, hence it haves no value. You should work with it's innerText as you are dealing with element's text content:
$("#price").text(Price);
var price = $("#price").text();
// Or
document.getElementById('price').innerText = Price;
var price = document.getElementById('price').innerText;
I have a variable account_number in which account number is stored. now i want to get the value of the element having id as account_number. How to do it in javascript ?
I tried doing document.getElementById(account_number).value, but it is null.
html looks like this :
<input class='transparent' disabled type='text' name='113114234567_name' id='113114234567_name' value = 'Neeloy' style='border:0px;height:25px;font-size:16px;line-height:25px;' />
and the js is :
function getElement()
{
var acc_list = document.forms.editBeneficiary.elements.bene_account_number_edit;
for(var i=0;i<acc_list.length;i++)
{
if(acc_list[i].checked == true)
{
var account_number = acc_list[i].value.toString();
var ben_name = account_number + "_name";
alert(document.getElementById("'" + ben_name.toString() + "'").value);
}
}
}
here bene_account_number_edit are the radio buttons.
Thanks
Are you storing just an integer as the element's id attribute? If so, browsers tend to behave in strange ways when looking for an element by an integer id. Try passing account_number.toString(), instead.
If that doesn't work, prepend something like "account_" to the beginning of your elements' id attributes and then call document.getElementById('account_' + account_number).value.
Why are you prefixing and post-fixing ' characters to the name string? ben_name is already a string because you've appended '_name' to the value.
I'd recommend doing a console.log of ben_name just to be sure you're getting the value you expect.
the way to use a variable for document.getElementById is the same as for any other function:
document.getElementById(ben_name);
I don't know why you think it would act any differently.
There is no use of converting ben_name to string because it is already the string.
Concatenation of two string will always give you string.
var account_number = acc_list[i].value.toString();
var ben_name = account_number + "_name";
try following code it will work fine
var ben_name=acc_list[i]+ "_name";
here also
alert(document.getElementById("'" + ben_name.toString() + "'").value);
try
alert(document.getElementById(ben_name).value);
I have tested similar type of code which worked correctly. If you are passing variable don't use quotes. What you are doing is passing ben_name.toString() as the value, it will definitely cause an error because it can not find any element with that id viz.(ben_name.toString()). In each function call, you are passing same value i.e. ben_name.toString() which is of course wrong.
I found this page in search for a fix for my issue...
Let's say you have a list of products:
<div class="rel-prod-item">
<img src="assets/product-photos/title-of-the-related-product_thumbnail.jpg" alt="Western Digital 1TB" />
<p class="rel-prod-title">Western Digital 1TB</p>
<p class="rel-prod-price" id="price_format_1">149.95</p>
add to cart
</div>
<div class="rel-prod-item">
<img src="assets/product-photos/title-of-the-related-product_thumbnail.jpg" alt="Western Digital 1TB" />
<p class="rel-prod-title">Western Digital 1TB</p>
<p class="rel-prod-price" id="price_format_2">139.95</p>
add to cart
</div>
<div class="rel-prod-item">
<img src="assets/product-photos/title-of-the-related-product_thumbnail.jpg" alt="Western Digital 1TB" />
<p class="rel-prod-title">Western Digital 1TB</p>
<p class="rel-prod-price" id="price_format_3">49.95</p>
add to cart
</div>
The designer made all the prices have the digits after the . be superscript. So your choice is to either have the cms spit out the price in 2 parts from the backend and put it back together with <sup> tags around it, or just leave it alone and change it via the DOM. That's what I opted for and here's what I came up with:
window.onload = function() {
var pricelist = document.getElementsByClassName("rel-prod-price");
var price_id = "";
for (var b = 1; b <= pricelist.length; b++) {
var price_id = "price_format_" + b;
var price_original = document.getElementById(price_id).innerHTML;
var price_parts = price_original.split(".");
var formatted_price = price_parts[0] + ".<b>" + price_parts[1] + "</b>";
document.getElementById(price_id).innerHTML = formatted_price;
}
}
And here's the CSS I used:
.rel-prod-item p.rel-prod-price b {
font-size: 50%;
position: relative;
top: -4px;
}
I hope this helps someone keep all their hair :-)
Here's a screenshot of the finished product