JavaScript img onclick 引用错误才能正常工作

javascript img onclick reference error to function

本文关键字：常工作 工作 onclick img 引用 错误 JavaScript      更新时间：2023-09-26

当我点击 img 时，我在火狐浏览器的控制台中不断ReferenceError: toggleExpand is not defined

我正在尝试放大图像，单击时浮动在中央屏幕中，没有jquery，纯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>
这是我

使用的代码 这个可以使用这个

<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>

首先，属性不能包含-
因此，将其更改为驼峰案例zIndex或括在括号中["z-index"]

还有，奇怪的是没人提，没必要传身份证！您已经拥有对单击的引用 HTMLIMGElement 的this引用，
所以是的，使用没有ID的简单onclick="toggleExpand(this);"

我也看到你把你的函数命名为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.stack.imgur.com/1ZIkv.jpg?s=48&g=1" alt="image" style="width:128px; height:auto;  z-index:0"/>

jsbin游乐场

将doc.style.z-index更改为doc.style['z-index']并检查 

<!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>

为什么要将 id 作为函数参数传递！ 为什么不使用这样的东西——

<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>

最好这样做。

var doc = document.getElementById(id)    
doc.addEventListener('click',toggleExpand);
相关文章：