Saturday, June 10, 2017

You're not supposed to have two ids with the same name in HTML.

Everyone know that, and yet, what are the consequences exactly? Consider this:

<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Whatever</title>
      <style type="text/css" media="all">
         #dupe {
            color: red;
         }
      </style>
   </head>
   <body>
      <div id="dupe">foo</div>
      <div id="dupe">bar</div>
      <script type="text/javascript">
         var x = document.getElementById('dupe').innerHTML;
         alert(x);
      </script>
   </body>
</html>

 
 

In both Chrome and IE both divs get colored red but only "foo" appears in an alert. So... there is some drama and strange, unpredictable behavior. Yeah, best to avoid this.

No comments:

Post a Comment