document.getElementsByTagName('A') Errors ?

vmars316 · January 12, 2022

Greetings ,

I am having a problem with this script .

Getting errors: let Target = document.getElementsByTagName('A');
Change-Html-A-Target-Value.html:34 Target = undefined
Change-Html-A-Target-Value.html:37 Uncaught TypeError: i.hasAttribute is not a function
at ATargetHtml (Change-Html-A-Target-Value.html:37)
at HTMLButtonElement.onclick (Change-Html-A-Target-Value.html:26)

<!DOCTYPE html>
<html>

<head>
	<title>
		How to get/change the HTML with
		DOM element in JavaScript?
	</title>
</head>

<body>
	<h3>
		Accessing HTML <a> of a DOM element in JavaScript .
	</h3>

	
<p>
<a href="https://www.w3schools.com" target="_blank"></a>1 Visit W3Schools.com</a>
<br>
<a href="https://www.w3schools.com target="_top"></a>2 Visit W3Schools.com</a>
<br>
<a href="https://www.w3schools.com target="_self"></a>3 Visit W3Schools.com</a>
</p>


	<button onclick="ATargetHtml()">
		Get and change the html for DOM element
	</button>

	<script>
     let Target = document.getElementsByTagName('A');
             console.log(" let Target = document.getElementsByTagName('A');")
		function ATargetHtml() {
             console.log("Target = " + Target[i]);
			for (var i = 0; i < Target.length; i++) {
                 
                 if (i.hasAttribute("target")) {
                     i.setAttribute("target", "_self");
				
			}
		}
		}
	</script>
</body>
</html>

Pls , what am I doing wrong ? : (

Thank you...

Ingolme · January 12, 2022

This line of code is outside of the loop:

console.log("Target = " + Target[i]);

For that reason, The variable i does not yet have a value and the result is undefined.

if (i.hasAttribute("target")) {

The above line is incorrect. The variable i is just a number between 0 and the number of links, so it doesn't have a hasAttribute method.

You should be calling hasAttribute on the element Target[i]

I anticipate further questions about these explanations, so I'll just write functioning code below:

<script>
  function ATargetHtml() {
    // Declare Target inside the function to guarantee that the list of links is up to date
    let Target = document.getElementsByTagName('A');
    console.log(" let Target = document.getElementsByTagName('A');")

    for (var i = 0; i < Target.length; i++) {
      // Show the current target element in the console
      console.log("Target = ", Target[i]);
      
      // Replaced "i" with "Target[i]"
      if (Target[i].hasAttribute("target")) {
        Target[i].setAttribute("target", "_self");
      }
    }
  }
</script>

vmars316 · January 12, 2022

11 hours ago, Ingolme said:

I anticipate further questions about these explanations, so I'll just write functioning code below:

Sorry about that , seems like the older I get , the thicker I get .

I have trouble with reading , then applying . So generally what I do is work backwards , starting with example , then look up each piece , to understand what's going on and why .

So, I greatly appreciate your code : )

vmars316 · January 14, 2022

I ended up going with below , so that I could see the before and after .

<!DOCTYPE html>
<html>
<head>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!    Hit F12   to Open DevTools");
  });
</script>
<script>
  function ATargetHtmlOne() {
    // Declare Target inside the function to guarantee that the list of links is up to date
    let 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() {
    let 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"></a>1 Visit W3Schools.com</a>
<br>
<a href="https://www.w3schools.com" target="_top"></a>2 Visit W3Schools.com</a>
<br>
<a href="https://www.w3schools.com" target="_self"></a>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>

Thanks

Edited January 14, 2022 by vmars316

Sign In

document.getElementsByTagName('A') Errors ?

Recommended Posts

vmars316

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity