Is it possible to get a value from append/html function - javascript

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;

Related

only first value is changed when iterating through express-handlebars each

I am using express-handlebars in my node application. In one of my forms I am storing data in the format 2018-12-01 (YYYY MM DD) as a string. I am also storing time as string in 24 hour format 13:45:00
I have defined a script to use moment for changing the date format:
<script type="text/javascript">
(function () {
var NowMoment = $('#displayMoment').val();
var Date = moment(NowMoment);
var eDisplayMoment = document.getElementById('output');
// display output in the preferred format
eDisplayMoment.innerHTML = Date.format('MMM Do YYYY');
})();
</script>
in my .handlebars template I am displaying the data received using the following code:
{{#each tasks}}
<input id="displayMoment" value="{{taskDate}}" hidden>
<p>{{taskName}} {{taskDate}} {{taskTime}} {{taskStatus}} <span id="output"></span>
<a class="btn u-btn-primary g-rounded-50 g-py-5" href="/starttask/{{id}}">
<i class="fa fa-edit g-mr-5"></i> start task
</a>
</p>
{{/each}}
as you can see I have a hidden input which is assigned the {{taskDate}}, I fetch its value in the script and format it to display in the span tag.
The Problem is:
Only the first task is formatting the date and showing it, the second or consecutive tasks do not show the formatted date.
The id cannot be the same. The HTML specification requires it to be unique. So can lets remove the id attribute from your span and input elements and instead give them an appropriate class attribute definition instead:
<span class="output"></span>
<input class="displayMoment" value="{{taskDate}}" hidden>
Then lets use getElementsByClassName(...) instead of document.getElementById(...) since according to the documentation, getElementById() returns a single element object representing the element whose id property matches the specified string. Assuming a 1 to 1 relationship between input values and the spans we are trying to change the value for we can do something along the lines of this:
<script type="text/javascript">
(function () {
var inputEles = document.getElementsByClassName("displayMoment");
var spanEles = document.getElementsByClassName("output");
for(var i=0; i<spanEles.length; i++) {
var Date = moment(inputEles[i].value);
spanEles[i].innerHTML = Date.format('MMM Do YYYY');
}
})();
</script>
Hopefully that helps!

Javascript to strip html and currency symbol

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>

Get spanID as string when innerHTML matches a value

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>

How to multiply span inner by id using JavaScript?

I have a span which shows a currency.
This is my span:
<span id="v3_40"></span>
It will only show the currency when it's being loaded through a browser and it needs the script bellow to show the result:
<script src="//service.arzlive.com/p.js"></script>
It shows a currency number like this: 38,355
How can i extract this number out from this span and multiply it by another number and show it as the result in another span?
I need a code to get the numeric value out from the span
You can use innerHTML to get and set your span values.
document.getElementById('new').innerHTML = document.getElementById('v3_40').innerHTML * 12;
<span id="v3_40">38.355</span>
* 12 =
<span id="new"></span>
EDIT:
After seeing the comments to this answer, here's a more detailed approach;
var originalPrice = document.getElementById('v3_40').innerHTML;
var price = originalPrice.replace(/\,/g,'');
var newPrice = parseFloat(price,20) * 12;
newPrice = newPrice.toLocaleString();
document.getElementById('new').textContent = newPrice;
Hope that helps!

How to get the value of span from jquery

I am trying to get the value of span from jquery but it shows an errir like this
TypeError: document.getElementById(...) is null
http://localhost:10489/YellowPages/YellowPageHome.aspx?Menu=menu_cat_3594
Line 328
I have a span like this
<div class="RatingAggregate" style="height: 25px; width: 25px; margin: 5px;">
<span id="AvgRt_1<%#DataBinder.Eval(Container, "DataItem.BusinessID")%>">
<%#DataBinder.Eval(Container, "DataItem.Rating")%></span>
</div>
I want to get the value of span like this
var averageRatingValue = document.getElementById('AvgRt_1').innerHTML;
But shows the null error. hOw can i do this as i am trying to learn the jquery.
Firstly, your span has an id which concatenates the dataitem's businessID:
<span id="AvgRt_1<%#DataBinder.Eval(Container, "DataItem.BusinessID")%>">
So the Id would look like: AvgRt_1x where x is your BusinessID
Secondly: you are not using jQuery as you mentioned. Just pure Javascript.
var averageRatingValue = document.getElementById('AvgRt_1').innerHTML;
Thirdly, you will have to specify the correct id either by way of hardcoded value if you know the exact id beforehand, or by way of a variable:
$('#AvgRt_1' + variable).text();
Why don't you just put the <%#DataBinder.Eval(Container, "DataItem.BusinessID")%> in a class?
Then you can do:
var businessId = '<%#DataBinder.Eval(Container, "DataItem.BusinessID")%>';
$('#AvgRt_1.' + businessId).text();
You are doing wrong exactly
var averageRatingValue = document.getElementById('AvgRt_1').innerHTML;
Because you have not the id AvgRt_1 but it is AvgRt_1<%#DataBinder.Eval(Container, "DataItem.BusinessID")%>
So, try this jquery:
var averageRatingValue = $('span [id^=AvgRt_1]').html();
with javascript:
//define var for that
var spanId = '<%#DataBinder.Eval(Container, "DataItem.BusinessID")%>';
var averageRatingValue = document.getElementById('AvgRt_1' + spanId).innerHTML;
You can simply get it like, you can also use Attribute Starts With Selector [name^="value"]
$('span[id^="AvgRt_1"]').text() or or $('span').html()
For Particulr span
$('span #SPANID').text()

Categories