Updating a value of a <span> using Javascript getElementById - javascript

I am very new to JS and trying to get my head around how to change values of a span using JS. So, I have a span looking like this:
<span id="s551392614400915" class="vote-count-post" value="551392614400915">0.31</span>
I would like to change the 0.31 to say 150 - and Iam trying to use the getElementById as follows:
var xx=150;
document.getElementById("s551392614400915").value = "150"; //dosent work.
//document.getElementById("s551392614400915").value = xx; //dosent work.
for some reason this does not seem to work. I know I am doing something completely stupid, but I am unable to see where. Here is my rather silly JS Fiddle
any help with this would be great.

Use document.getElementById("s551392614400915").innerHTML= "150" if you want to change the contents of the span.

Use innerHTML instead of value. value is used for form inputs with a user-changeable value.
document.getElementById("s551392614400915").innerHTML = "150";

Related

How to get the style properties of the variable in which you are storing text

tag for text area used
<textarea id="tag_text"></textarea>
I am using the following code to store the the content of text area.
var texAreaContent = document.getElementById("tag_text");
Now what code should I use to retrieve the style of every word of the text area content. Please provide the code in JavaScript and please provide a better way if you know because I am at a beginner level
I didn't get what's your problem.
i tried this in my way of understanding of your problem. Check this.
var texAreaContent = document.getElementById("tag_text");
texAreaContent.style.color="blue";
<textarea id="tag_text">Test</textarea>
With jQuery, you can do this like this
$("element").prop('tag_name')
You can change style of an element like this
$("element").css('background', 'lime')

width of a <span> appended dynamically in DOM

Well this seems quite simple but i'm not able to figure out what is going wrong here. I have appended a <span> dynamically as follows:
$("#parent").append("<span style='display:inline-block; position:absolute; background:yellow; z-index:10; top:12px;' id='mathBox"+flag_id+"'></span>");
Now i need to find the width of this <span> when pressing a certain key (TAB in my case!).
Initially i tried jquery like this:
var width_of_text= $("'mathBox'+flag_id").width();
alert(width_of_text);
But this is showing an error in console that this expression is not identified (Even i was feeling that something is not right here!!)
Then i tried using vanila JS as follows:
var mathBox_id=document.getElementById('mathBox'+flag_id);
var width_of_text= mathBox_id.offsetWidth;
alert(width_of_text);
Now this worked fine but it is showing me wrong width. <span> element present on DOM (at the time of testing it), is barely of 25 width however it is showing its width as 111 width.
I know i must be doing something stupid but i'm just not able to catch it..
Please help!!
The syntax for the jQuery version is
var width_of_text= $('#mathBox'+flag_id).width();
alert(width_of_text);
var width_of_text= $('mathBox'+flag_id).width(); use # symbol with id.
var width_of_text= $('#mathBox'+flag_id).width();

Change getElementsByClassName()[i] field

I'm doing kinda learning by doing JavaScript right know, but I have a problem, where I can not find the solution on stackoverflow. I want to replace a String on a webpage, where I just have the class, but not the ID.
document.getElementsByClassName('ep_price')[0]="FOO"
This should change the defined elemet to FOO, but it does not do that and I have no idea why not...
I have read that I should use .value, but this var is not even defined...
See Screenshot of my Chrome console below:
You need to use .textContent property if you intended to change the text.
document.getElementsByClassName('ep_price')[0].textContent ="FOO"

Get values between DIV tags?

How do I get the values in between a DIV tag?
Example
<div id="myOutput" class="wmd-output">
<pre><code><p>hello world!</p></code></pre>
</div>
my output values I should get is
<pre><code><p>hello world!</p></pre>
First, find the element. The fastest way is by ID. Next, use innerHTML to get the HTML content of the element.
document.getElementById('myOutput').innerHTML;
document.getElementById("myOutput").innerHTML
innerHtml is good for this case as guys suggested before me,
If you have more complex html structure and want to traverse/manipulate it I suggest to use js libraries like jQuery. To get want you want it would be:
$('#myOutput').html()
Looks nicer I think (but I wouldn't load whole js library just for such simple example of course)
Just putting all above with some additional details,
If you are not sure about that div having some id is not there on html page then to make it sure please use.
var objDiv = document.getElementbyId('myOutput');
if(objDiv){
objDiv.innerHTML;
}
This will avoid any JavaScript error on the page.

Change css class depending on label's text

I have asp:Table with number of asp:Label inside asp:FormView, it represents short stats info.
I need to set Label.CssClass to "red" if it's text isn't "0".
Currently I do this on FormView.DataBound event. But think that it's better to use JavaScript and probably jQuery. How can I do that?
Sorry for dummy question - I'm new to jQuery. Thanks!
You can do this using jQuery (you can also give the Table or FormView a class, probably easier in aps.net instead of the ID like I have below):
$("#formViewOrTableID span").filter(function() {
return $(this).text() !== "0";
}).addClass("redClass");
If you give the labels a class you want affected, say set all the Labels you want included to CssClass="styleMe", you could change $("#formViewID span") to
$("#formViewID span.styleMe") to be more specific.

Categories