Unexpected result of document.getElementById.value? - javascript

When I run the following code:
document.getElementById('somevar').value = '25';
alert(document.getElementById('somevar').value );
"somevar" is displayed, instead of 25. Why is this? Thanks in advance for any help.
EDIT: input type of 'somevar'is hidden

I suspect this is happening because when you run the code the element you're trying to access is not yet ready. Make sure you run your code after the DOM has loaded by using onload for plain javascript or the ready event if using jQuery.

As show on my fiddle, if an element is defined with the right name, it show the correct result:
http://jsfiddle.net/Achilleterzo/kcp2n/

It should work.
Here is a sample on JsFiddle

Related

how to get input value from summornote text Editor

enter image description here
//html code
//<div id="txtDescription" class="summernote datarequired" //title="Description Reuired">
// jquery code for get data
i use $('#txtDescription').val() to access value But not getting.
I think you need to $("#txtDescription").code() or $("#txtDescription").summernote('code') either of this might help you solve your problem.
please refer Here
for further info.
div elements don't have value. input elements have it.
In case of div you might use
document.getElementById("txtDescription").innerHTML
or
document.getElementById("txtDescription").innerText
Remember to use this when the page is loaded, or in an onload event.
document.querySelector('#txtDescription').innerHTML
or
document.querySelector('#txtDescription').innerText

Change value of html element with external javascript

Below is the div that I want to alter
<div id="#page.Page" class="pageMessages" data-messages='#Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(#page.Messages))'></div>
I want to change the value of the message when a javascipt function is called from an external .js file. What is the correct way to do this?
Like So...
// This Performs the Change
$('#changeme').attr('data-messages', 'New Value');
// Show the Change
$('#changeme').html( $('#changeme').attr('data-messages') );
Here is a Working Fiddle
The one problem I see is the id='#page.Page' , this doesnt work.
I hope i get what you're trying to do, you can use jquery's change attribute for that
JQUERY
<script>
$(document).ready(function(){
$(".pageMessages").attr("data-messages","your-new-value-here");
});
</script>
DOC: http://api.jquery.com/attr/

error in converting js code to jQueryMobile

I have a javascript/jquery code http://jsfiddle.net/9773D/ for timer.
I am trying to port it to jQuery Mobile code but I am confused about the pageinit,bind,live etc window events.
In the code i see that the error is because some elements in the tick() function are not loaded in DOM before it has been invoked in the code. Can someone help me in correcting my code.
Thanks,
I changed your line to
var timeDisplay = $(".time")[0];
and that fixes it.
Edit:
Adding explanation:
Since you used innerHTML instead of $('.time').html(""), you needed to set timeDisplay to the HTML node, since innerHTML is a property of the node, not the jQuery object that is returned by the selector $('.time').
Here's a jsfiddle that shows how it could be done in a more jquery'sh way. http://jsfiddle.net/9773D/1/
timedisplay.innerHtml = "" //does not work since timedisplay is a jquery object
//timedisplay[0] is the html object so on that innerHtml does work
But jquery has the function .html("");
timedisplay.html(""); // is a bit cleaner

how can I get the value of width with javascript

I put this on the head section
var d = parseInt(document.getElementById('test').style.width);
alert(d);
But the output is NaN.
how do you get the value?
UDPATED
I think the problem is that you've put the code in the <head> of your document, which means it's looking for the test element right away. Unfortunately, the test element hasn't been created yet, because your browser is still parsing the <head>.
So, make sure that code is placed after the test element, and use either .offsetWidth or .clientWidth, and it should work fine.
UPDATED
Reading your question, it seems that you are executing the code in your head section before the DOM has loaded, try to put your script in the bottom of your page, just before </body>.
document.getElementById('test').clientWidth;
document.getElementById('test').offsetWidth;
style.width will most probably only get the inline style, you have three options:
You can use .clientWidth , .offsetWidth or you can add a inline-style.
See my example : http://jsfiddle.net/WaSKP/2/
Just use,
window.onload=function(){
alert(document.getElementById("test").clientWidth)
}
That should do the trick.

jQuery objects don't work

When I store a jQuery object in a variable, like this:
var $myObject = $("div#comments");
...I can't use the object $myObject!
This is what I'm doing to change the html of div#comments:
$myObject.html(data);
It does nothing. I already tried this way too, this time to select an element inside div#comments:
$("div.comment", $myObject);
It doesn't work.
I just want to be able to save an element in a variable and then use it!
Note: some people don't put $ before the variable name, like this: myObject.
Are you calling it after the document is loaded?
// This will ensure that the code doesn't run until
// the document has loaded
$(function() {
var $myObject = $("div#comments");
});
(This is a shortcut for jQuery's .ready() method.)
http://api.jquery.com/ready/
As long as the document is loaded, and you have a <div> with the ID comments on the page when it loads, it should work.
Also remember that there can only be one element on the page with any given ID. Because of this, it is actually a little better (quicker) to do $("#comments"); instead of $("div#comments");.
You've only provided snippits of your code, so it is impossible to tell for sure, but the odds are that you are running the code in a <script> element that appears before the <div> element and don't do anything (such as use the ready event) to delay the execution of the code until the div exists.
The result is that you get a jQuery object which found no elements. Move the script element so it is after the div. Just before the end tag for the body is a good place.
The syntax is perfectly valid and should work. Are you dynamically appending the comments div? You should alert( $myObject.length ) to see if it's 0 or 1, if its 0 that means it's never picked up.
You may need to bind the var statement until after dom ready, window load, or your ajax callback.
Well, that syntax is perfectly fine so something else is going on. Can you show your markup? And what do you get if you add an alert($myObject.length)? And one last thing to check... are you running this inside an on-ready handler?
Ok, thanks everyone for that.
I got the solution.
I thought about the order the things were loaded in the DOM and found the solution.
The problem (with the markup) was:
<div id="comments">
<script type="text/javascript">
loadComments(params);
</script>
</div>
The code above was written by PHP!
So it executed the function as soon as the browser read the code.
I already tried to put the script on the end of the page, after the function was called. The funcion was not defined yet.
So, the funcion loadComments should be executed after the div was ready AND after the function was defined.
I wrapped the code between the tags with a .ready(), like this:
<script type="text/javascript">
$(function() {
loadComments(params);
});
</script>
It was a distraction.
Sorry everyone!
Thanks a lot.
If you have the same problem and you didn't understand what I did, ask me. XD

Categories