How to get value of a div using javascript
DIV
s do not have a value
property.
Technically, according to the DTDs, they shouldn't have a value
attribute either, but generally you'll want to use .getAttribute()
in this case:
function overlay()
{
var cookieValue = document.getElementById('demo').getAttribute('value');
alert(cookieValue);
}
Get value from div with javascript: Always get undefined
Try this
var n1 = document.getElementById('editor').innerHTML; // or innerText, or textContent
How to get value inside a div element using JS
Give this a try
<p class="med_prescribed">Prescribed: {{ pro_id.prescribedmed }}</p>
in your JS as follows
var premed = document.getElementsByClassName('med_prescribed')[0].innerText;
console.log(premed);
Get value inside Div Javascript
You could access your element directly from gridcell0
using gridcell0.querySelector('.DivOverflowNoWrap')
instead, like :
var gridcell0 = document.querySelector('#x');
console.log( gridcell0.querySelector('.DivOverflowNoWrap').innerHTML );
Snippet:
var gridcell0 = document.querySelector('#x');
if (gridcell0.querySelector('.DivOverflowNoWrap') !== null) {
console.log(gridcell0.querySelector('.DivOverflowNoWrap').innerHTML);
} else {
console.log('Does not exist');
}
<div id="x">
<div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>
</div>
How to set value inside div in JS
var errorMsg = "<p>Example error message</p>"
document.getElementById("error").innerHTML = errorMsg
Get content of a DIV using JavaScript
(1) Your <script>
tag should be placed before the closing </body>
tag. Your JavaScript is trying to manipulate HTML elements that haven't been loaded into the DOM yet.
(2) Your assignment of HTML content looks jumbled.
(3) Be consistent with the case in your element ID, i.e. 'DIV2' vs 'Div2'
(4) User lower case for 'document' object (credit: ThatOtherPerson)
<body>
<div id="DIV1">
// Some content goes here.
</div>
<div id="DIV2">
</div>
<script type="text/javascript">
var MyDiv1 = document.getElementById('DIV1');
var MyDiv2 = document.getElementById('DIV2');
MyDiv2.innerHTML = MyDiv1.innerHTML;
</script>
</body>
Retrieve value property of div in the click event
A div does not have a value property. You could probably retrieve it with getAttribute but there is an easier solution. Change value={option.value} onClick={(e, value) => handleClick(e, value)}
to onClick={(e) => handleClick(e, option.value)}
As a side not you should not make clickable divs for accessibility reasons. You should either use styled button or anchor tags. At the very least add the aria attribute role="button" to the div.
How can get the text of a div tag using only javascript (no jQuery)
You'll probably want to try textContent
instead of innerHTML
.
Given innerHTML
will return DOM content as a String
and not exclusively the "text" in the div
. It's fine if you know that your div
contains only text but not suitable if every use case. For those cases, you'll probably have to use textContent
instead of innerHTML
For example, considering the following markup:
<div id="test">
Some <span class="foo">sample</span> text.
</div>
You'll get the following result:
var node = document.getElementById('test'),
htmlContent = node.innerHTML,
// htmlContent = "Some <span class="foo">sample</span> text."
textContent = node.textContent;
// textContent = "Some sample text."
See MDN for more details:
- textContent
- innerHTML
JavaScript: Extract value from div element
First you should give your DIV an id.
<div id="myid" data-variableid2="1234"> </div>
Then you could display the attributes data using
var MyDiv1 = document.getElementById('myid');
alert(MyDiv1.getAttribute('data-variableid2'));
Just test it here: http://jsfiddle.net/5C4NA/
But if you are not allowed to change the HTML of your pages, you should stick to something like
document.getElementsByTagName("div")[0]
but the index (here 0
) does vary with the position of the div within the HTML page.
Edit 1:
With a loop you are able to scan through all DIVs and choose the one with an attribute data-variableid2
: http://jsfiddle.net/5C4NA/1/ This looks like:
var elm = document.getElementsByTagName("div");
for (i=0;i<elm.length;i++) {
if (elm[i].getAttribute('data-variableid2')!=null) {
alert(elm[i].getAttribute('data-variableid2'));
}
}
Related Topics
Why Is It Bad Practice to Use Links With the JavaScript: "Protocol"
Prevent Contenteditable Adding ≪Div≫ on Enter - Chrome
Getting Binary (Base64) Data from Html5 Canvas (Readasbinarystring)
Relative Paths in JavaScript in an External File
Open Popup and Refresh Parent Page on Close Popup
Is It Possible For Flex Items to Align Tightly to the Items Above Them
How to Know If a Font (@Font-Face) Has Already Been Loaded
Set Webkit Keyframes Values Using JavaScript Variable
How to Reload CSS Without Reloading the Page
Confirmation Before Closing of Tab/Browser
Changing Element Style Attribute Dynamically Using JavaScript
Retrieving Html5 Video Duration Separately from the File
Dynamically Loading CSS Stylesheet Doesn't Work on Ie
How to Use Jquery to Select a Dropdown Option
How to Force the Browser to Reload Cached CSS and JavaScript Files