Uncaught TypeError: Cannot read property 'getAttribute' of undefined?

JavaScript
#1

Hello ,
I can’t figure what I am doing wrong . Need Help .

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h4>getElementByTagName-ChangeBlankToSelf.html</h4>

<p>
<a href="https://www.sitepoint.com/" target="_blank">https://www.sitepoint.com/</a>
<br>
<a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a>
</p>

<p>getElementByTagName-ChangeBlankToSelf.html</p>

<button onclick="ChangeBlankToSelf()">ChangeBlankToSelf()</button>

<script>
  var linkElements = [] , i;
function ChangeBlankToSelf(){
  linkElements = document.getElementsByTagName("A");
  for (i = 0; i < linkElements.length; i++) {
        if (linkElements.item[i].getAttribute("target") = "_blank") 
         {
           linkElements.item[i].setAttribute("target", "_self")
		   alert("linkElements =  " + linkElements.item[i])
        }
		   console.log("linkElements =  " + linkElements.item[i])
}
}
</script>
</body>
</html>

Thanks

#2

Hi there vmars316,

try it like this…

<script>
  var linkElements, i;

function ChangeBlankToSelf(){
  linkElements = document.getElementsByTagName("A");
  for ( i = 0; i < linkElements.length; i++) {
  if (linkElements[i].getAttribute("target")==="_blank")  {
      linkElements[i].setAttribute("target", "_self");
		     alert("linkElements["+i+"]  = " +  linkElements[i]);
     }
	   console.log("linkElements["+i+"]  = " +  linkElements[i]);
   }
 }
</script>

coothead

#3

Thanks coothead ,
Yep that got rid of the error ;
But I was expecting console.log to show the updated

`<a href="https://www.sitepoint.com/" target="_self">https://www.sitepoint.com/</a>`

What needs to be done to make it show the whole updated element ?

Ie. , No ‘alert’ means no update either right ?

Thanks

#4

You have an assignment here with ‘=’, when what you want is a comparison ‘===’

#5

Hi there vmars316,

if you want console log to display the full element then just use…

   console.log( linkElements[i] );

This will show this…

chrome-console
chrome-console806×124 22.5 KB

…in Chrome type browsers, and this…

firefox-console

…in Firefox.

coothead

#6

Thanks coothead ;
Oh good , now I can stop banging my head against the wall . I never would have guessed that would have made the difference .
Also surprised that the first console.log didn’t show “_blank” instead “_self”.

<script>
  var linkElements, i;
function ChangeBlankToSelf(){
  linkElements = document.querySelectorAll("A");
  for ( i = 0; i < linkElements.length; i++) {
  if (linkElements[i].getAttribute("target")==="_blank")  {
	  console.log(linkElements[i]);
      linkElements[i].setAttribute("target", "_self");
     }
	   console.log(linkElements[i]);
   }
 }
</script>

Thanks again…

#7

The console.log() is triggered by the
button click and therefore can only display
the clicked state, namely “_self”. :winky:

coothead

#8

If you want to see the before and after simply do

    for (let i = 0; i < linkElements.length; i++) {
        console.log(linkElements.item(i));
        if (linkElements[i].getAttribute('target') === "_blank") {
            linkElements[i].setAttribute('target', '_self');
        }
        console.log(linkElements.item(i));
    }

It works in Firefox as I haven’t tried it out in other browsers. :thinking:

#9

THanks Pepster (as in senior citizen?) ;
Yes , I thought the same thing also , but turns out there is a timing delay , and both console.logs show “_Self” .

#10

Thanks

#11

Interesting…