CODEWITHSUNDEEP
javascripthtml
Ylama
Ylama

Reputation: 2489

Cannot set property 'borderColor' of undefined

Im copying this from a book (..so it "should" work), i cant get this function to work, it might be a duplicate but i searched for an answer and cant get it working.

"Uncaught TypeError: Cannot set property 'borderColor' of undefined"

It might be something simple but the to i believe is the problem i tried setting it to an array and object but i dont really understand, any solution with simple explanation would be much appreciated.

function changeBorder(element, to){
    element.style.borderColor = to;
}
    
var contentDiv = document.getElementById('color');

contentDiv.onmouseover = function(){
    changeBorder('red');
};
    
contentDiv.onmouseout = function(){
    changeBorder('black');
};
.box{
  border: 1px solid red;
  background-color:pink;
  padding: 10px;
}
    
.row {
    border: 1px solid #000;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html/js; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>

<div class="row" id="color">
  <div class="element">1</div>
</div>

</body>     
</html>

I just want to remove the error message and get the function to do something.

Upvotes: 1

Views: 5281

Answers (4)

Md. Kamruzzaman
Md. Kamruzzaman

Reputation: 1905

You have to modify the code a bit. Please check code below:

<html>
  <head>      
     <style>
        .box{
              border: 1px solid red;
              background-color:pink;
              padding: 10px;
            }       
        .row {
            border: 1px solid #000;
        }
     </style>
  </head>

  <body>
  <div class="row" id="color">
        <div class="element">1</div>
   </div>   
   <script type="text/javascript">    
            function changeBorder(element, to){
                element.style.borderColor = to;
            }

            var contentDiv = document.getElementById('color');
            alert(contentDiv);

            contentDiv.onmouseover = function(){
                changeBorder(contentDiv,'red');
            };

            contentDiv.onmouseout = function(){
                changeBorder(contentDiv, 'black');
            };
      </script>   
  </body>
</html>

Upvotes: 0

S-Wing
S-Wing

Reputation: 579

changeBorder('red') -> the var element inside the method is set with a string ('red'). A string has not style property, so element.style is undefined and you can't use properties( like borderColor ) of undefined objects

Upvotes: 0

Federico Navarrete
Federico Navarrete

Reputation: 3274

You need to set the this and change your functions like this:

contentDiv.onmouseover = function(){
    changeBorder(this, 'red');
};

contentDiv.onmouseout = function(){
    changeBorder(this, 'black');
};

Without the keyword this, it's not going to be found. Remember that in your function you are sharing the element:

function changeBorder(element, to){
    element.style.borderColor = to;
}

Upvotes: 3

Titus
Titus

Reputation: 22474

Your changeBorder method expects 2 arguments but you always call it using only one.

Try this:

changeBorder(contentDiv, '[color]');

Also, this may not work if the 

var contentDiv = document.getElementById('color');

statement is executed before the DOM is ready.

Upvotes: 0

Related Questions