CODEWITHSUNDEEP
javascript
Naeem Ul Wahhab
Naeem Ul Wahhab

Reputation: 2495

JavaScript Getting ID of A Div

I have a div box with its id and an textarea. When I click on my div box I should get div ID through Javascript and get it printed on the textarea. I have tried but its not working. when I click the text area it says "undefined". Kindly help me.

Here is the code:

<html>
<head>

<script type="text/javascript">
function get_id()
{
    var divEls = document.getElementsByTagName("div");
    var textEl = document.getElementById("mytextarea");
    textEl.value=divEls.id;
}
</script>

</head>
<body>
    <div id="mydiv" onclick="get_id()" style='border-width:1px;border-color:#C0C0C0;border-style: solid;background-color:#C0C0C0;width:130px;height:10px;'>
    </div>

    <textarea id="mytextarea"> </textarea>
</body>
</html>

Upvotes: 1

Views: 3061

Answers (7)

Naeem Ul Wahhab
Naeem Ul Wahhab

Reputation: 2495

Ok I figured it out. document.getElementsByTagName("div") will return all the elements which have tag name div as an array of nodes. Here in your code there is only one div element hence first element is div itself. As in an array first element has number index = 0 so we can get first by document.getElementsByTagName("div")[0] or in your code divEls[0], and then we can get its id by simply getting divEls[0].id. Now as we have got the div id we can set the value of text area equal to this div id as: textEl.value = divEls[0].id Here is your code with changes. Hope this Helps

<html>
<head>

<script type="text/javascript">
function get_id()
{
var divEls = document.getElementsByTagName("div");
var textEl = document.getElementById("mytextarea");
/*get the first item in the nodelist ie divEls[0] = document.getElementsByTagName("div")[0] and then get its id by
its id by divEls[0] */
textEl.value = divEls[0].id; 

}
</script>

</head>
<body>
<div id="mydiv" onclick="get_id()" style='border-width:1px;border-color:#C0C0C0;border-style: solid;background-color:#C0C0C0;width:130px;height:10px;'>
</div>

<textarea id="mytextarea"> </textarea>
</body>
</html>

Upvotes: 0

Alessandro Cerutti
Alessandro Cerutti

Reputation: 39

try this function

function get_id()
{
var divEls = document.getElementsByTagName("div");
var textEl = document.getElementById("mytextarea");
textEl.value=divEls.item(0).id;
}

Upvotes: 0

user898741
user898741

Reputation:

getElementsByTagName returns an array even if it contains only one object. You should access it like this:

function get_id()
{
    var divEls = document.getElementsByTagName("div");
    var textEl = document.getElementById("mytextarea");
    textEl.value=divEls[0].id;
}

Upvotes: 1

Phoenix
Phoenix

Reputation: 1276

When you use getElementsByTagName, you get ALL of the elements with that tag as an array. If you want the first DIV then you need to add [0] this way:

 var divEls = document.getElementsByTagName("div")[0];

The remaining code is ok.

Upvotes: 1

zzzzBov
zzzzBov

Reputation: 179046

getElementsByTagName returns a nodeList of DOM nodes, which acts like an array.

You'll need to select the first item in the node list before you can access the node's ID:

textEl.value = divEls[0].id;

Alternatively, you could have passed this to get_id():

function get_id(node) {
  var textEl = document.getElementById('mytextarea');
  textEl.value = node.id;
}

onclick="get_id(this)"

But honestly, all of the JavaScript should be external to your HTML file. HTML belongs in .html files, CSS belongs in .css files and JS belongs in .js files.

//i haven't checked this code, and you probably want to modify it to be more generic.
window.onload = function () {
  var myDiv, myTextArea;
  myDiv = document.getElementById('mydiv');
  myTextArea = document.getElementById('mytextarea');
  myDiv.onclick = function () {
    myTextArea.value = myDiv.id;
  };
};

Upvotes: 2

Bergi
Bergi

Reputation: 664538

divels is, as the plural is indicating, an Array (correct: a NodeList), which has no id property. Its items have, so eg. textEl.value=divEls[0].id; will work (if the List is empty, this will throw an error).

Upvotes: 0

IUnknown
IUnknown

Reputation: 22448

Rewrite your code as below:

<html>
<head>
     <script type="text/javascript">
          function get_id(element) {
               var textEl = document.getElementById("mytextarea");
               textEl.value = element.id;
          }
     </script>
</head>
<body>
     <div id="mydiv" onclick="get_id(this)" style='border-width: 1px; border-color: #C0C0C0;
          border-style: solid; background-color: #C0C0C0; width: 130px; height: 10px;'>
     </div>
     <textarea id="mytextarea"> </textarea>
</body>
</html>

Upvotes: 1

Related Questions