Re. Get inner Div content

Question

I'm trying to get the content of Div inside of another div. Basically I have created a dynamic colour 'picker' using php and I want to add the content of the inner div ie. the colour name to a javascript variable on clicking the relevant colour.

check out this pen

http://codepen.io/anon/pen/oXopmq

function coloursel() {

  var colour = document.getElementById("patchholder").firstChild.innerHTML;

  alert(colour);
}

/* shirt color name display style*/


#patchhome {
 position:relative;
 bottom:240px;
 display:inline-block;
 font-size: 13px;
 margin:3px;
}

#patchhome  p{
 font-size: 10px;
 margin-bottom:5px;
 display:inline-block;
}


#patchhome  h2{
 margin-left:-3px;
 
}

.colourname{ 
 white-space:nowrap;
 display:none; 
 position:absolute;
 top :145px;
 float:right;
 right:-3px;
}

.patchholder{
 float:left;
 font-size: 0;
 position:relative;
 display:inline-block;
 margin:2px;
 height:16px;
 width:16px;
}

.patchholder:hover + div{ 
 display:inline-block; 
 margin:1px;
 float:left;
}

<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Antique Cherry"  style="background:#971B2F;display:inline-block;"/><div id="colourname"class="colourname">Antique Cherry</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Cherry Red"  style="background:#AC2B37;display:inline-block;"/><div id="colourname"class="colourname">Cherry Red</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Daisy"  style="background:#FED141;display:inline-block;"/><div id="colourname"class="colourname">Daisy</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Forrest Green"  style="background:#273B33;display:inline-block;"/><div id="colourname"class="colourname">Forrest Green</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heather Orange"  style="background:#FF8D6D;display:inline-block;"/><div id="colourname"class="colourname">Heather Orange</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Black"  style="background:#000000;display:inline-block;"/><div id="colourname"class="colourname">Black</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="White"  style="background:#FFFFFF;display:inline-block;"/><div id="colourname"class="colourname">White</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Navy"  style="background:#002A5C;display:inline-block;"/><div id="colourname"class="colourname">Navy</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heliconia"  style="background:#DB3E79;display:inline-block;"/><div id="colourname"class="colourname">Heliconia</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Kiwi"  style="background:#A3A76D;display:inline-block;"/><div id="colourname"class="colourname">Kiwi</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Orange"  style="background:#DF6426;display:inline-block;"/><div id="colourname"class="colourname">Orange</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Royal"  style="background:#224D8F;display:inline-block;"/><div id="colourname"class="colourname">Royal</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Sport Grey"  style="background:#AFAFAF;display:inline-block;"/><div id="colourname"class="colourname">Sport Grey</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heather Irish Green"  style="background:#00966C;display:inline-block;"/><div id="colourname"class="colourname">Heather Irish Green</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Cardinal"  style="background:#8D2838;display:inline-block;"/><div id="colourname"class="colourname">Cardinal</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Chestnut"  style="background:#83635C;display:inline-block;"/><div id="colourname"class="colourname">Chestnut</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="DK Chocolate"  style="background:#423238;display:inline-block;"/><div id="colourname"class="colourname">DK Chocolate</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heather Military Green"  style="background:#7E7F74;display:inline-block;"/><div id="colourname"class="colourname">Heather Military Green</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heather Purple"  style="background:#614B79;display:inline-block;"/><div id="colourname"class="colourname">Heather Purple</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Indigo Blue"  style="background:#486D87;display:inline-block;"/><div id="colourname"class="colourname">Indigo Blue</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Light Blue"  style="background:#A3B3CB;display:inline-block;"/><div id="colourname"class="colourname">Light Blue</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Purple"  style="background:#3F2A56;display:inline-block;"/><div id="colourname"class="colourname">Purple</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Sand"  style="background:#CABFAD;display:inline-block;"/><div id="colourname"class="colourname">Sand</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Antique Heliconia"  style="background:#AA0061;display:inline-block;"/><div id="colourname"class="colourname">Antique Heliconia</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Charcoal"  style="background:#66676C;display:inline-block;"/><div id="colourname"class="colourname">Charcoal</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Cobalt"  style="background:#374393;display:inline-block;"/><div id="colourname"class="colourname">Cobalt</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="DK Heather"  style="background:#3F4444;display:inline-block;"/><div id="colourname"class="colourname">DK Heather</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heather Navy"  style="background:#333F48;display:inline-block;"/><div id="colourname"class="colourname">Heather Navy</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heather Royal"  style="background:#307FE2;display:inline-block;"/><div id="colourname"class="colourname">Heather Royal</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Irish Green"  style="background:#009E69;display:inline-block;"/><div id="colourname"class="colourname">Irish Green</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Military Green"  style="background:#63655A;display:inline-block;"/><div id="colourname"class="colourname">Military Green</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Red"  style="background:#B1302A;display:inline-block;"/><div id="colourname"class="colourname">Red</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Sapphire"  style="background:#0077B5;display:inline-block;"/><div id="colourname"class="colourname">Sapphire</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Antique Sapphire"  style="background:#006A8E;display:inline-block;"/><div id="colourname"class="colourname">Antique Sapphire</div></span>

Sorry If this poorly written, bad practice, in the wrong place or been asked before. I'm still learning.

Thanks for looking anyway.

Element `id`s have to be unique within the document. You cannot repeat them. — Phylogenesis, Jun 24 '15 at 13:12
tags do not belong inside tags. I believe this is a violation of HTML standards. It is also conceptually wrong: spans are used for inline elements while divs are used for blocks. (Although in a pure sense, both are semantically meaningless.) — A Fader Darkly, Jun 24 '15 at 13:29

score 1 · Accepted Answer · answered Jun 24 '15 at 13:17

1

When you give multiple elements the same id (in this case the placeholder) only the last one is recognized by the DOM. In this case you should modify your coloursel function to the following

         function coloursel(elem) {
              var colour = elem.firstChild.innerHTML;

              alert(colour);
          }

answered Jun 24 '15 at 13:17

Jigar

544
1
8
28

Indeed, using the same ID more than once per page is technically invalid HTML. – A Fader Darkly Jun 24 '15 at 13:22

score 0 · Answer 2 · answered Jun 24 '15 at 13:17

I think the problem is that you have the same id to all divs, you should call every div somethink like patchholder1, patchholder2 and so on, and in the onclick you can pass the number of the color picker,

<span class="patchholder"id="patchholder1" onclick="coloursel(this,1)" title="Antique Cherry"  style="background:#971B2F;display:inline-block;"/><div id="colourname"class="colourname">Antique Cherry</div></span>

And then in the javascript you should change your code with this

function coloursel(var idN) {
  var divId= "patchholder";
  var uniqueId = divId.concat(idN);
  var colour = document.getElementById(uniqueId).firstChild.innerHTML;

  alert(colour);
}

I haven't tested the code, but hope I give you the idea

score 0 · Answer 3 · edited May 23 '17 at 12:29

0

Change your function to:

function coloursel(elem) {

  var colour = elem.children[0].innerHTML;

  alert(colour);
}

Some other things you may want to think about:

As many have said, you are using the same id more than once. This is incorrect HTML and IDs may not even be needed.
You are using div tags inside span tags. This is also incorrect. Using spans inside divs may possibly even allow you to reduce the amount of CSS you need.
Placing the 'onclick' handler in the HTML is not best practice. You will need to add it using PHP, which means you're splitting your front-end codebase across two domains. This makes updating your code later more difficult as things are harder to find. You can add handlers programmatically by looping through your children and using something like this

edited May 23 '17 at 12:29

Community

1
1

answered Jun 24 '15 at 13:18

A Fader Darkly

3,516
1
22
28

There are a number of things you could do to clean up your code. If you're interested let me know and I'll update my answer. – A Fader Darkly Jun 24 '15 at 13:19
Wow 10 mins an I got a working answer f*ckin love it...thanks all u crazy coders now to integrate it on my page – awwhocares Jun 24 '15 at 13:48
@ A Fader Darkly Yeah I would be interested thanks again – awwhocares Jun 24 '15 at 13:49
@ A Fader Darkly Thanks more stuff to think about – awwhocares Jun 24 '15 at 15:05
Glad to help. You should accept an answer, probably @Jigar's answer as I believe he pipped me to the post. – A Fader Darkly Jun 25 '15 at 11:56

Re. Get inner Div content

3 Answers3