what is the best use of document.getElementById("id").value - javascript

what DOM elements is document.getElementById("id").value used for ?
i mean can i use it with an element like heading tags etc
or it is used with the items have a value attribute [textboxes ] etc
and what is the difference .innerHTML and .value properties

what DOM elements is document.getElementById("id").value used for ?
You can use getElementById to get a reference to any element that has an id attribute on it.
and what is the difference .innerHTML and .value properties
They're completely unrelated. innerHTML is the HTML representation of the contents of the element. value is the value of a form control element like an input.
For example, suppose we have:
<div id="foo">Hey <strong>you</strong></div>
You can do this:
console.log(document.getElementById("foo").innerHTML);
...which will likely give you something like this in the console:
Hey <STRONG>you</STRONG>
Note that this is not exactly the same as what was in your document; when you read the value of innerHTML, the browser makes a string from what's actually currently present in the DOM, using its rules for how to create that string.
You can also set it to change the contents.
In contrast, with a form control:
<input id="bar" type="text" value="Text field value">
console.log(document.getElementById("bar").value);
...which gives you
Text field value

Setting the value is normally used for input/form elements. innerHTML is normally used for div, span, td and similar elements.
Here is a link showing the use of ID.value:
http://www.javascript-coder.com/javascript-form/javascript-form-value.phtml
and
The getElementById() method accesses the first element with the specified id.
and
yes, you can use it with an element like heading tags etc

Related

Get value of input type text from innerHTML

I have the following code:
console.log(cleValTab.children[0].children[0].children[0].innerHTML);
which outputs
<input type="text" value="XXXX" class="table-textbox" size="50">
in cosole.
Now I need to extract the value and I tried adding .value but I got undefined.
Adding an id is not an option, since I'm looping through several text boxes.
innerHTML is a string not a DOM. You can't read attributes from it without converting it back to a DOM.
So don't use innerHTML in the first place. Get the DOM node and read its attribute value.
console.log(cleValTab.children[0].children[0].children[0].querySelector("input").getAttribute("value"))
(Use the value property instead of getAttribute if you want the current value instead of the attribute value. Since you were trying to read from innerHTML I assume you want the attribute value).

Why "innerHTML" property from JavaScript can't be an HTML attribute?

As we all know to change HTML element's HTML content using JavaScript "innerHTML" property is commonly used. This "innerHTML" property is used on an HTML element object like(document.getElementById("demo").innerHTML = 5 + 6;)
My doubt is why the "innerHTML" property can't be used as an attribute in any HTML element?
As per my knowledge and understanding attribute and property have the same semantic meaning.
So, why the below code can not work?
<p id="demo" innerHTML="Jumbo"></p>
Because not all JavaScript properties on a DOM element equate to attributes.
.innerHTML provides a way to get or set the stuff that goes between the start and end tag. So if you want to put stuff there, just put it there:
<p id="demo">Jumbo</p>
Edit: To answer your questions below, the DOM is a conceptual representation of HTML in code (in this case JavaScript), so a DOM element is a JavaScript object that you can use to access and manipulate an HTML element (an element is a portion of an HTML document that starts and ends with a tag, so <b><span>Hello!</span></b> contains two elements, a b element and a span element.
To use .innerHTML to get the content of an element, all you need to do is access it in an expression instead of assigning a value to it.
Example:
var d = document.getElementById('myDiv');
console.log(d.innerHTML); // <em>Jumbo</em>
<div id="myDiv"><em>Jumbo</em></div>

Jquery - extracting and modifying text from an element

I have some elements in my document like:
<div class="checkbox-inline"><label><input id="mylabel" value="False" type="checkbox">mytext</label></div>
When I try to get the text using:
$("#mylabel").text();
I get an error that text() is not defined on that object. My ids are unique, so my object is in the 0: position in $("#mylabel") but both of these return an empty string for the text:
$("#mylabel").first().text();
$("#mylabel")[0].text();
How can I get the text mytext out of these elements? And how can I programmatically modify it?
I realize now that my problem is slightly different than what I thought it was. Please see: Modifying the text of a label that also contains an input (checkbox) for my follow-up question. Thanks!
The value of an input element is not given by text(), but by val().
If you want to get the label text:
$("#mylabel").parent().text()
It is a bit confusing that you give the id mylabel to an input element, which is not the label element.
I'm assuming you're trying to access the text of the label element, in this case "mytext"? The reason this isn't working is because the id is on the input element, whcih doesn't actually contain that text
<input id="mylabel" value="False" type="checkbox">
That's the entirety of your input element.
As others have stated, you can get the value of that element using
$("#mylabel").val()
Which will give you "False"
However, if you do need the text "mytext" and don't want to change your markup you can use this
$("#mylabel").parent().text()
Which gets the element with the mylabel id, finds it's parent element (in this case the label element) and then gets the text from that element.
Now that you know that, you might realise that it's easier to just put an id on the label!
If you want the label text.. then you want to use
$('.checkbox-inline label').text();
You're targeting the checkbox itself, not its' label.
Its $("#mylabel").html() to get the inner html of tag.
EDIT:
For your particular case it can be:
$("#mylabel").parent().text();

Accessing the value of an "em" tag in javascript

How would you access the value of an em tag in javascript?
This is the element I'm trying to access: <em id='tag_IS_System_Agent'></em>
which displays: John Smith
I'm trying to access it via javascript:
document.getElementById("emailFrame").src
= "http://www.website.org/mail.php?cid="
+IS_ATTR_ID.value
+"&name="+document.write("<em id=\"tag_IS_System_Agent\"> <\/em>")
+"&em="+email;`
Any idea? I know that document.write("<em id=\"tag_IS_System_Agent\"> <\/em>") is wrong and I'm stumped and not sure what to do.
Accessing the value based on your markup would be:
var myValue = document.getElementById("tag_IS_System_Agent").textContent
By “the value of an ‘em’ tag”, you apparently mean the content of an em element. If the element has an id attribute, as in your example, you can use the getElementById method of document to access the element node in the DOM. Then you can get the content of the element, serialized as HTML, using the innerHTML property. Note that this will include markup for inner elements, if any. So the expression you would use would be
document.getElementById('tag_IS_System_Agent').innerHTML
Instead of innerHTML, you could use textContent, which gives you just the textual content, without any inner tags. However, this is less widely supported (e.g., not in IE 8). If there is no inner markup, the results are the same, but innerHTML is thus safer.

Assign Value to <input> inside <td> using Javascript

I have an <input type="text" value="0.00" id="prdtotal"/> inside a <td> in a table.
I want to use Javascript to compute a value and assign it to the textbox. How can I do it?
I tried using document.getElementById("prdtotal").value="1.00"; but it doesnt work. Thanks for any help!
Use the value attribute:
document.getElementById("prdtotal").value = "1.00";
document.getElementById() returns the actual DOM object (a handle/reference to the <input> element).
Also note your missing double quote before the closing parenthesis.
I would suggest you to take a look at the Mozilla Developer Network (MDN):
HTMLElement: a reference of all attributes a (general) HTML element can have.
HTMLInputElement: a reference of all special attributes an input element (e.g. <textarea>, <input>) can have.
You've found the element using getElementById but you've not specified its the value property you want to set.
document.getElementById("prdtotal").value="1.00"
And a live example: http://jsfiddle.net/hevwt/

Categories