Inline JavaScript throwing “not defined” (it IS!) – WordPress related maybe?

1 Views
<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…)

Post Views: 1

Related posts

1 comment

  1. 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()">

Comments are closed.