火狐报错:Uncaught SyntaxError: missing ( before formal parameters 怎么解决

问题代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .box {
      position: relative;
      width: 400px;
      border-bottom: 1px solid #ccc;
      margin: 100px auto;
    }

    .box input {
      width: 370px;
      height: 30px;
      border: 0;
      outline: none;
    }

    .box img {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 24px;
    }
  </style>
</head>

<body>
  <!--正文-->
  <div class="box">
    <img
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-qn.51miz.com%2FElement%2F00%2F90%2F38%2F24%2Fce87f342_E903824_e765706b.png&refer=http%3A%2F%2Fimg-qn.51miz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651545581&t=72527a6535d3fb3c144fca140729c2c5"
      id="eye">
    <input type="password" id="pwd">
  </div>


  <script>
    var eye = document.getElementById('eye');
    var pwd = document.getElementById('pwd');

    eye.onclick = function {
      pwd.type = 'text';
    }
  </script>
</body>

</html>

目标是实现一个点击图片后,密码栏改变格式。但是实际应用的时候点图片没反应,浏览器报错
“Uncaught SyntaxError: missing ( before formal parameters”


还有一个问题,就是给图片套上一个lable(如下)有什么意义
我加上之后甚至多报了一个错

img

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .box {
      position: relative;
      width: 400px;
      border-bottom: 1px solid #ccc;
      margin: 100px auto;
    }

    .box input {
      width: 370px;
      height: 30px;
      border: 0;
      outline: none;
    }

    .box img {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 24px;
    }
  </style>
</head>

<body>
  <!--正文-->
  <div class="box">
    <lable for="">
      <img
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-qn.51miz.com%2FElement%2F00%2F90%2F38%2F24%2Fce87f342_E903824_e765706b.png&refer=http%3A%2F%2Fimg-qn.51miz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651545581&t=72527a6535d3fb3c144fca140729c2c5"   id="eye">
    </lable>
    <input type="password" id="pwd">
  </div>


  <script>
    var eye = document.getElementById('eye');
    var pwd = document.getElementById('pwd');

    eye.onclick = function {
      pwd.type = 'text';
    }
  </script>
</body>

</html>

少了个括号

img


<script>
    var eye = document.getElementById('eye');
    var pwd = document.getElementById('pwd');
 
    eye.onclick = function() {
      pwd.type = 'text';
    }
  </script>

function 后面加括号 function (){}