Jump to content

document.getElementsByTagName('A') Errors ?


vmars316
 Share

Recommended Posts

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...

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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  :  ) 

Link to comment
Share on other sites

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 by vmars316
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...