javascript img onclick reference error to function

Question

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>

change doc.style.z-index to doc.style['z-index'] and check — Pavan Teja
– Pavan Teja, Commented Mar 12, 2016 at 6:39

Tejas Girase · Accepted Answer · 2016-03-12 06:45:17Z

1

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>

answered Mar 12, 2016 at 6:45

Tejas Girase

718 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roko C. Buljan · Accepted Answer · 2016-03-12 07:00:44Z

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

Pavan Teja · Accepted Answer · 2016-03-12 06:40:35Z

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>

Khairul Islam · Accepted Answer · 2016-03-12 06:45:31Z

0

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>

answered Mar 12, 2016 at 6:45

Khairul Islam

1,2151 gold badge9 silver badges20 bronze badges

Comments

RIYAJ KHAN · Accepted Answer · 2016-03-12 06:56:20Z

0

It is better to do in this way.

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

answered Mar 12, 2016 at 6:56

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Collectives™ on Stack Overflow

javascript img onclick reference error to function

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related