Problem with: Target[i].setAttribute("option",

JavaScript
21

Paul ,
Ok , here’s another one a little more complex that works great:
Change-Html-A-Target-Value-iframe-2-functions.html
Things seem to run well with console.log but not with alert , I wonder why .

<!DOCTYPE html>
<html>
<head>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!    Hit F12   to Open DevTools");
  });
</script>
<script>
   let Target = [] ;
  function ATargetHtmlOne() {
    // Declare Target inside the function to guarantee that the list of links is up to date
   Target = document.getElementsByTagName('A');
    console.log("Target.length = " , Target.length)

    for (var i = 0; i < Target.length; i++) {
      console.log("Target = ", Target[i]);
    }
	alert('End of:  ATargetHtmlOne()')
	}

  function ATargetHtmlTwo() {
    Target = document.getElementsByTagName('A');

    for (var i = 0; i < Target.length; i++) {
      console.log("Target = ", Target[i]);
      if (Target[i].hasAttribute("target")) {
        Target[i].setAttribute("target", "_self");
      }
    }
	alert('End of:  ATargetHtmlTwo()')
   }
</script>  
</head>

<body>
	<h3>
		Accessing HTML 'a' of a DOM element in JavaScript .
	</h3>
<h4>	<a href="file:///C:/EXPERIMANTAL/Change-Html-A-Target-Value.html" target="_blank">file:///C:/EXPERIMANTAL/Change-Html-A-Target-Value.html</a>
</h4>
<h4><a href="file:///C:/EXPERIMANTAL/Change-Html-A-Target-Value-iframe.html" target="_blank">file:///C:/EXPERIMANTAL/Change-Html-A-Target-Value-iframe.html</a>
</h4>
<h4><a href="file:///C:/EXPERIMANTAL/Write-To-iframe.html" target="_blank">file:///C:/EXPERIMANTAL/Write-To-iframe.html</a>
</h4>
<p>
<a href="https://www.w3schools.com" target="_blank">1 Visit W3Schools.com</a>
<br>
<a href="https://www.w3schools.com" target="_top">2 Visit W3Schools.com</a>
<br>
<a href="https://www.w3schools.com" target="_self">3 Visit W3Schools.com</a>
</p>

<body>
<button onclick="ATargetHtmlOne()">function ATargetHtmlOne()</button>
	<br>
<button onclick="ATargetHtmlTwo()">function ATargetHtmlTwo()</button>
<br>
<div id="div" style="border: solid 2px; height: 250px; width: 400px;"></div> 

</body>
</html>

But this one works with
Target = document.getElementsByTagName(‘A’);
I have been trying to figure out why one works and the other doesn’t for days now .

Btw: When I said ‘it gives me pleasure’ , I wasn’t kidding .
I am 78 , and I try to find pleasure in the things I do , else it’s not worth doing : )
I am writing a KidSafBrowser , and the above is piece of that .
Thanks , Happy to share it with you if you like .

22

You lost me a bit there :slight_smile:

I didn’t see an alert in there apart from the ones at the end.

Alert isn’t really meant for error checking and I certainly wouldn’t use it inside a loop because if you had a typo you may get lots of alerts queing up and crashing the browser. (Apparently if your code involves asynchronous logic alert can actually change the result of the code.)

See the code from @rpg_digital for the correct way to structure your html and js. You need to be very careful with your mark up as you seem to have 2 body tags in there :slight_smile:

23

Yes it’s good to persevere especially as you get older as it keeps the brain active. I’m 70 this year so I’m not far behind you :slight_smile:

1 Like
24

Thanks for sharing that Paul .
I’l check put @rpg_digital .
Ok , I’ll stay away from alerts in loops , Thanks

25

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.