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()
Related
I was searching javascript code to get the content of HTML tag having attribute name ng-if="desc.description" using javascript querySelectors.
<li ng-bind-html="esc.description" ng-if="desc.description">Hello world.</li>
Use an attribute selector.
var contents = document.querySelector("[ng-if='desc.description']").innerHTML
Use getAttribute() method
Your Element
<script>
var a = document.getElementById('hey')
var x = a.getAttribute('ng-if') // "/"
alert(x);
</script>
Define Id value.
HTML:
<li id="id-ex" ng-bind-html="esc.description" ng-if="desc.description">Hello world.</li>
JS:
var myInnerHtml = document.getElementById("id-ex").innerHTML;
This question already has an answer here:
Jquery get Name value of hidden field
(1 answer)
Closed 6 years ago.
I have little of an issue writing my script.
$(function(){
$(".wolny").click(function() {
var godzina = this.id;
var minuta = this.name;
alert(godzina + ":" + minuta);
});
Alert should give me output looking like so hour:minute. Instead of that I am getting this: hour:undefined. I really dont know what to do :x
Here's HTML code (php generated)
<div class="col-sm-3 kafelek wolny" name="15" id="9"></div>
Thank's for any help.
A div element doesn't technically have a name attribute. If you want to store a piece of data, store it as a data-* attribute. Something like this:
<div class="col-sm-3 kafelek wolny" data-name="15" id="9"></div>
Then retrieve it as such:
var minuta = $(this).data('name');
Try using .attr() function instead like so:
var minuta = $(this).attr('name');
This works because name in your case is a attribute and not a property. This will work with any random attribute like foo that you may add.
A better way is to add a data attribute like data-name="something" and read it with $(this).data(name).
Working Example:
$(function(){
$(".wolny").click(function() {
var godzina = this.id;
var minuta = $(this).attr('name');
alert(godzina + ":" + minuta);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-3 kafelek wolny" name="15" id="9"> Click me! </div>
Try this instead:
$(function(){
$(".wolny").click(function() {
var godzina = $(this).attr('id');
var minuta = $(this).attr('name');
alert(godzina + ":" + minuta);
});
});
However, if possible, I would recommend using data attributes for your values. Here's an example:
<div class="col-sm-3 kafelek wolny" data-hour="9" data-minute="15"></div>
Then, in the JavaScript, you use "data-hour" and "data-minute" for the attributes instead of "id" and "name" like it is now.
I want get text within this span tag using its class:
<span id="prizevalue_g12" class="pull-right grid_val">£12</span>
I want to get 12. I tried the below code:
var ex_price = $(".grid_val").html();
and
ex_price = $(".grid_val").html();
You can use replace() to remove £.
$(document).ready(function(){
var ex_price = $(".grid_val").html();
ex_price = $(".grid_val").html();
var ans=ex_price.replace('£', '') ;
alert(ans);
});
This is just a tought, but I think this would be a perfect place to use some custom data-attributes, like data-value. It would work nice especially if you have a lot of these values to get.
The outcome would be smthn like this:
<!-- HTML -->
<span class="grid_val" data-value="12">£12</span>
<span class="grid_val" data-value="15">£15</span>
<span class="grid_val" data-value="13">£13</span>
<span class="grid_val" data-value="1">£1</span>
<script>
$(".grid_val").each(function(){
var value = $(this).attr("data-value");
//do something with it
});
</script>
I am getting the following result from a data source.
"<span class=\"highlight\">DSDT10</span><div>011XBY</div>"
The value in span and div could vary.
And I want only the value inside the span "DSDT10" in a separate variable.
What I have tried:
var data = '<span class=\"highlight\">DSDT10</span><div>011XBY</div>';
var formattedData = data.replace(/<\/?span[^>]*>/g, "");
$('#output').append(formattedData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
Expectation:
Retrieve only "DSDT10" from the data variable.
Any suggestion is appreciated. Thanks.
You just want to get the text within the span? You could modify your regex a bit and use a match..
var data = '<span class=\"highlight\">DSDT10</span><div>011XBY</div>';
var formattedData = data.match(/<span[^>]*>([^<]*)<\/span>/, "")[1];
But since you're using jquery you could also just do this:
var formattedData = $("<div>", {html: data}).find("span").text()
Only two lines of code:
_str = "<span class=\"highlight\">DSDT10</span><div>011XBY</div>";
_span = $(_str).filter('span').text();
It's enough only one line:
$('#output').html($('span').html());
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