CODEWITHSUNDEEP
javascript
Drew
Drew

Reputation: 1261

javascript img onclick reference error to function

I keep on getting ReferenceError: toggleExpand is not defined in console on firefox when I click the img

I am trying to get the image to enlarging, floating in center screen on click, no jquery, pure javascript, html, css.

HTML

<body>
  <script type="text/javascript">
    function toggleExpand(id){
      var doc = document.getElementById(id);
      doc.style.z-index = "1";
      doc.style.width = "512px";
      doc.style.align = "center";
    }
  </script>
  <img id="img1" onclick="toggleExpand('img1');" src="I:\Images\image.jpg" alt="image" style="width:128px; height:auto; cursor:pointer; z-index:0"/>
</body>

Upvotes: 0

Views: 239

Answers (5)

Roko C. Buljan
Roko C. Buljan

Reputation: 205979

First of, a property cannot contain a -
so change it to CamelCase zIndex or wrap in brackets ["z-index"]

also, strange no-one mentioned, no need to pass the ID! You already have the this reference to the clicked referring HTMLIMGElement,
so yes, use simply onclick="toggleExpand(this);" without the ID

Also I see you named your function TOGGLE... so let's toggle!

img[onclick]{vertical-align:top; cursor:pointer; }
<script>
  function toggleExpand(el){
    var io = el.tog ^= 1;                 // Store the toggle state
    el.style.zIndex = io ? 1 : 0;
    el.style.width = (io ? 256 : 128) +"px";
  }
</script>

<img onclick="toggleExpand(this);" src="https://www.gravatar.com/avatar/6edc0ac8cd9f3e790389f3284eaaf9e9?s=32&d=identicon&r=PG" alt="image" style="width:128px; height:auto;  z-index:0"/>
<img onclick="toggleExpand(this);" src="https://i.sstatic.net/1ZIkv.jpg?s=48&g=1" alt="image" style="width:128px; height:auto;  z-index:0"/>

jsBin playground

Upvotes: 1

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

It is better to do in this way.

var doc = document.getElementById(id)    
doc.addEventListener('click',toggleExpand);

Upvotes: 0

Khairul Islam
Khairul Islam

Reputation: 1215

Why you are passing your id as a function argument! why not use something like this-

<body>
<img id="img1" onclick="toggleExpand();" src="I:\Images\image.jpg" alt="image" style="width:128px; height:auto; cursor:pointer; z-index:0"/>

<script type="text/javascript">
function toggleExpand(){
  var doc = document.getElementById('img1');
  doc.style.z-index = "1";
  doc.style.width = "512px";
  doc.style.align = "center";
}
</script>    
</body>

Upvotes: 0

Tejas Girase
Tejas Girase

Reputation: 71

This is my code used this can used this

<html>
    <head>
       <script>
           function toggle(){
               var doc = document.getElementById("divSection");

                    doc.style.z-index = "1";
                    doc.style.width = "512px";
                   doc.style.align = "center";
          }
       </script>
    </head>

    <body>
        <p>Click the button to trigger a function.</p>
        <p class="button" onclick="toggle()">Show/hide</p>

    </body>
</html>

Upvotes: 1

Pavan Teja
Pavan Teja

Reputation: 3202

change doc.style.z-index to doc.style['z-index'] and check 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <body>
    <script type="text/javascript">
      function toggleExpand(id) {
        var doc = document.getElementById(id);
        doc.style['z-index'] = "1";
        doc.style.width = "512px";
        doc.style.align = "center";
      }
    </script>
    <img id="img1" onclick="toggleExpand('img1');" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Alexanderplatz_Stadtmodell_1.jpg/1920px-Alexanderplatz_Stadtmodell_1.jpg" alt="image" style="width:128px; height:auto; cursor:pointer; z-index:0"
    />
  </body>
</body>

</html>

Upvotes: 0

Related Questions