Trying to set width and height for 4 images, but only one works; others are skipped. IDs are different from each other

Question

I am trying to use four semi ovals to create one full oval so I can increase or decrease the size of the oval and have the size increase or decrease from the center rather than one side. I have found other code claiming to do this with a single image, but have found every time that it was a false claim. Using four images and setting them to adjust in size in their respective directions seems to be the only way. When implementing what I can, I can see that it will work. I am just running into a problem where javascript wants to be picky and simply doesn't want to set the attributes for the sizes of all four images, the attributes are set for the first one though, and when I switch the order around, I can see that each one will work individually, but just not all for at once. Also, look carefully, I DID use different IDs for all of them.

Here is the code that doesn't want to work:

 <img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleTR.png"
id="widthTR" id="heightTR" style="position: absolute; bottom: 58px; left: 149px"/>

<img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleBR.png"
id="widthBR" id="heightBR" style="position: absolute; top: 58px; left: 149px"/>

 <img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleBL.png"
 id="widthBL" id="heightBL" style="position: absolute; top: 58px; right: 149px"/>
 
 <img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleTL.png"
 id="widthTL" id="heightTL" style="position: absolute; bottom: 58px; right: 149px"/>


<script>
 
 spillWi = 100
 spillHi = 25
 
 document.getElementById("widthTR").setAttribute("width", spillWi)
 document.getElementById("heightTR").setAttribute("height", spillHi)
 
 document.getElementById("widthBR").setAttribute("width", spillWi)
 document.getElementById("heightBR").setAttribute("height", spillHi)
 
 document.getElementById("widthBL").setAttribute("width", spillWi)
 document.getElementById("heightBL").setAttribute("height", spillHi)
 
 document.getElementById("widthTL").setAttribute("width", spillWi)
 document.getElementById("heightTL").setAttribute("height", spillHi)
 
 </script>

Answer 1

So, here's a corrected code:

<div id="ovalElt" style="position: relative; width: 300px; height: 120px;">
 <img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleTR.png"
id="eltTR" style="position: absolute; top: 2px; right: 8px"/>

<img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleBR.png"
id="eltBR" style="position: absolute; bottom: 2px; right: 8px"/>

 <img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleBL.png"
 id="eltBL" style="position: absolute; bottom: 2px; left: 8px"/>
 
 <img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleTL.png"
 id="eltTL" style="position: absolute; top: 2px; left: 8px"/>
</div>

<script>
 
 spillWi = 149;
 spillHi = 58;
 
 document.getElementById("eltTR").setAttribute("width", spillWi);
 document.getElementById("eltTR").setAttribute("height", spillHi);
 
 document.getElementById("eltBR").setAttribute("height", spillHi);
 document.getElementById("eltBR").setAttribute("width", spillWi);
 
 document.getElementById("eltBL").setAttribute("width", spillWi);
 document.getElementById("eltBL").setAttribute("height", spillHi);
 
 document.getElementById("eltTL").setAttribute("width", spillWi);
 document.getElementById("eltTL").setAttribute("height", spillHi);
 
 </script>

Here's a version with images and CSS:

 <div id="eltOval">
   <img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleTR.png" id="eltTR" class="elt"/>

  <img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleBR.png" id="eltBR" class="elt"/>

   <img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleBL.png" id="eltBL" class="elt"/>
 
   <img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleTL.png" id="eltTL" class="elt"/>
 </div>

<style>
  #eltOval { position: relative; width: 300px; height: 120px; }
   .elt {
      position: absolute;
      width: 149px;
      height: 58px;
   }
   #eltTR { top: 2px; right: 8px; }
   #eltBR { bottom: 2px; right: 8px; }
   #eltBL { bottom: 2px; left: 8px; }
   #eltTL { top: 2px; left: 8px; }
   
 </style>

And then, here's a pure CSS version (color is aproximated):

<div id="eltOval" > </div>

<style>
   #eltOval {
      position: absolute;
      top: 2px;
      left: 8px;
      width: 300px;
      height: 120px;
      border-radius: 50%;
      background-color: #CC70FF;
   }
   
 </style>

Answer 2

 <img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleTR.png"
id="widthTR" style="position: absolute; bottom: 58px; left: 149px"/>

<img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleBR.png"
id="widthBR" style="position: absolute; top: 58px; left: 149px"/>

 <img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleBL.png"
 id="widthBL" style="position: absolute; top: 58px; right: 149px"/>

 <img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleTL.png"
 id="widthTL" style="position: absolute; bottom: 58px; right: 149px"/>


<script>

 spillWi = 100
 spillHi = 25

 document.getElementById("widthTR").setAttribute("width", spillWi)
 document.getElementById("widthTR").setAttribute("height", spillHi)

 document.getElementById("widthBR").setAttribute("width", spillWi)
 document.getElementById("widthBR").setAttribute("height", spillHi)

 document.getElementById("widthBL").setAttribute("width", spillWi)
 document.getElementById("widthBL").setAttribute("height", spillHi)

 document.getElementById("widthTL").setAttribute("width", spillWi)
 document.getElementById("widthTL").setAttribute("height", spillHi)

 </script>

Does this solve your issue? You need to remove the second id and use one for setting attributes.

Answer 3

None of the earlier answers explain what goes wrong. You're setting attributes on elements before the page is built. If you insert your code between $(function() {//called when ready (DOM is built) ... }) the width is changed as you would expect.