CODEWITHSUNDEEP
javascriptwordpress
Adam Michael Wood
Adam Michael Wood

Reputation: 1788

Inline JavaScript throwing "not defined" (it IS!) - WordPress related maybe?

<style>
#flamingo-picture-2 {
 border-width: 15px;
 border-style: solid;
 border-color: red;
}
</style>
<script>
function changeBorderColor(){
 var img = document.getElementById('flamingo-picture-2');
 if ( img.style.border-color == 'red' ) {
  img.style.border-color = 'blue';
 } else {
  img.style.border-color = 'red';
 }
}
</script>

<img id="flamingo-picture-2" src="/wp-content/uploads/flamingo.jpg" onclick="changeBorderColor()">

This is inside a WordPress post content. (I know -- bad practice. But it is just a little demo/example.)

Console shows an error that changeBorderColor is not defined. I keep staring at it. I feel like I defined it. Did I miss a brace or a semi-colon or something? Is it possible WordPress is doing something? (I don't think it is, as I've looked at the output page source, but you never know...)

Upvotes: 1

Views: 62

Answers (1)

Gavriel
Gavriel

Reputation: 19237

Instead of img.style.border-color you need img.style.borderColor It works here:

function changeBorderColor(){
 var img = document.getElementById('flamingo-picture-2');
 if ( img.style.borderColor == 'red' ) {
  img.style.borderColor = 'blue';
 } else {
  img.style.borderColor = 'red';
 }
}
#flamingo-picture-2 {
 border-width: 15px;
 border-style: solid;
 border-color: red;
}
<img id="flamingo-picture-2" src="/wp-content/uploads/flamingo.jpg" onclick="changeBorderColor()">

Upvotes: 1

Related Questions