# Having probs with 'Target\[i\].setAttribute()'

**URL:** <https://forum.kirupa.com/t/having-probs-with-target-i-setattribute/650481>\
**Category:** programming\
**Created:** [January 17, 2022, 2:06pm UTC](https://forum.kirupa.com/t/having-probs-with-target-i-setattribute/650481 "2022-01-17T14:06:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [January 17, 2022, 2:06pm UTC](https://forum.kirupa.com/t/having-probs-with-target-i-setattribute/650481/1 "2022-01-17T14:06:56Z")

</div>

Can anyone help me…  
When I run the code below , I get  
3 of these: ‘Target = [object HTMLOptionElement]’  
and one of these: ‘Target = undefined’.

````auto
  <html>
  <head>
  <script>
  document.addEventListener("DOMContentLoaded", () => {
   alert("DOM ready! Hit ...F12... to Open DevTools");
  });
  let Target = [] ;
  let i = 0 ;
  function ATargetHtml() {
  // Dec lare Target inside the function to guarantee that the list of links is up to date
  Target = document.getElementsByTagName("OPTION");
      
  for (var i = 0; i < Target.length; i++) {
   // Show the current target element in the console
   alert("Target = " + Target[i]);
   if (Target[i].hasAttribute("value")) {
    Target[i].setAttribute("value", "http://vmars.us");
   }    
  }    
   alert("Target = " + Target.length[i]);
   alert('<!DOCTYPE HTML>' + '\n' + document.documentElement.outerHTML);
  }     
  </script>
  </head>
  <body>
  	<h3>Accessing HTML 'option' of a DOM element in JavaScript .</h3>
  <p>
  <a href="https://www.kirupa.com/" target="_blank">https://www.kirupa.com/" target="_blank</a>
  <br>
  <a href="https://www.kirupa.com/" target="_top">https://www.kirupa.com/" target="_top</a>
  <br>
  <a href="https://www.kirupa.com/" target="_self">https://www.kirupa.com/" target="_self</a>
  </p>
  <p>
  <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(214,226,255);" name="menu" onchange="window.open(this.value); window.location.reload();">
   <option selected="0" value="">aaDaily</option>
  <option value="https://www.sitepoint.com/community/categories">Categories</option>
  <option value="https://www.sitepoint.com/community/faq">FAQ</option>
  </select>
  </p>
  	<br>
  	<button onclick="ATargetHtml()">
  		Get and change the html for DOM element
  	</button>
  <br>
  </body>   
  </html>```   
Thanks
````

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [January 17, 2022, 10:00pm UTC](https://forum.kirupa.com/t/having-probs-with-target-i-setattribute/650481/2 "2022-01-17T22:00:55Z")

</div>

For whatever reason the browser gods have decreed `alert()` has priority is the callstack.

So if in your `for loop` you put a `console.log(i)` above the `alert()` you will see `0 1 2` logged but not `3` (fourth iteration) and you will still see a fourth `alert()` (which is now `undefined`)

Somehow the alert can jump the gun before your `for loop` evaluates the `i < Target.length` and jump the que in front of any code in the loop block.

I once built a `mutationObserver` that would see if any `script` had been injected into the `DOM` and immediately remove the `script` before executing.  
It worked fine and would kill the script before any code could run… except `alert()`.  
It was the only code that would jump the que and evaluate…

Alert also blocks any JS running until it has been clicked.

---

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [January 19, 2022, 1:42am UTC](https://forum.kirupa.com/t/having-probs-with-target-i-setattribute/650481/3 "2022-01-19T01:42:08Z")

</div>

Very interesting Steve , Thanks
