Button not working in duplicate ID for DIV

Question

   <html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <title>Javascript Create Div Element Dynamically</title>

    <style type="text/css">
.ex
{
width:200px;
position: relative;
background-color :#CCC;
height:150px;
padding:10px;
margin:5px;
left-margin:0px;
float :left;
}
#newdiv
{
    width:800px;
    height:800px;
 border:1px solid #000;     
}
.myimage
{
 height: 80;
 width: 80;
 top:100;
 margin:5px;
}
.border
{
 border:1px solid #000; 
}

    </style>
<script>

cc=1;
function changeimage()
{
if (cc==0) 
  {
  cc=1;
  document.getElementByClassName('myimage').src="images/white_contact.png";
  }
else if (cc==1)
  {
  cc=2;
  document.getElementByClassName('myimage').src="images/yellow_contact.png";
  }
  else if (cc==2)
  {
  cc=3;
  document.getElementByClassName('myimage').src="images/red_contact.png";
  }
    else
  {
  cc=0;
  document.getElementByClassName('myimage').src="images/green_contact.png";
  }
}
</script>
 <script type="text/javascript" language="javascript">
var i=0;
    function createDiv()
    {


  if(i < 6) {
        var divTag = document.createElement("div");

        divTag.id = "div1";

        divTag.setAttribute("align","left");

        divTag.style.margin = "0px auto";

        divTag.className ="ex";

        divTag.innerHTML = "<img class='myimage' onclick='changeimage()' border='0' src='images/white_contact.png' width='100' height='180' />";

        document.getElementById("newdiv").appendChild(divTag)

      }

   i++;
   $( ".ex" ).draggable({containment:'parent',cursor:'pointer',opacity:0.6});
 $( ".ex" ).droppable({ hoverClass:'border' });

    }





    </script>
</head>
<body>

    <p align="left">
        <b>Click this button to create div element dynamically:</b>
        <input id="btn1" type="button" value="create div" onClick="createDiv();" />

        <div id = "newdiv">

</div>


</body>
</html>

I have edit the ID to class, and change all to getElementByClassName, but still not working, the picture nvr change when I click on it

What is the problem............................................................................................................

IDs should be unique throughout an HTML document, in other words you should never have more than one element with the same ID. Change your code so each div has its own ID, and/or use a common CSS class if you need to be able to select the divs as a group at some point in the future. — Matt Browne, May 27 '13 at 03:29
possible duplicate of [JavaScript and getElementById for multiple elements with the same ID](http://stackoverflow.com/questions/3607291/javascript-and-getelementbyid-for-multiple-elements-with-the-same-id) — Damith, May 27 '13 at 03:33

score 0 · Accepted Answer · answered May 27 '13 at 03:32

0

The HTML specification requires ID attribute to be unique in a page (http://www.w3.org/TR/html401/struct/global.html#h-7.5.2), so your HTML is actually not valid. You may want to use class attribute instead.

answered May 27 '13 at 03:32

Siyu Song

897
6
21

I try getElementByClass, not working, can you show me a example – user2399158 May 27 '13 at 03:35
Use getElementsByClassName() – Sanjeev May 27 '13 at 03:37
Since you are already using jQuery, you can just use `$('.myimage')` to select the elements after adding `class='myimage'` to proper elements. Notice that `getElementsByClassName()` is not supported by older version of IE. – Siyu Song May 27 '13 at 03:41
I try to change all to "ByClassName" – user2399158 May 27 '13 at 05:00
U can see my main post, for my updated code, which problem not solve yet – user2399158 May 27 '13 at 05:04

Button not working in duplicate ID for DIV

1 Answers1