外部 JS 在我的 html 文件中不起作用?

External JS not working in my html file?

我是 JavaScript 的新手,我正在尝试将我的外部 JS 执行到 html,我想做的是查看当我的鼠标悬停在一个 img 上时鼠标悬停是否响应.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>GWW- A Global Warming Warning...</title>

    <link href="style.css" rel="stylesheet">
</head>
<body>
<div class="gridContainer clearfix">
<div class="world">
  <img src="poluicao/poluicao0001.png" alt="Mundo">
     <div class="botao1">
       <img src="poluicao/offbuton.png" alt="but1">
     </div>
     <div  class="botao2">
       <!--<a href="#" >//-->
       <img  id="readybotao"  src="degelo/offbutton.gif"  alt="but2">
      <!-- </a> //-->
     </div>
  </div>

  </div>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="javascript.js"</script>

  </body>

  </html>

这是我的 JS 文件:

function buttonon() {
alert("If it showed up it worked!");
}

  document.getElementById('readybotao').addEventListener("onmousover",buttonon());

我做错了什么?

> 在线 <script src="javascript.js"</script>

像这样更改外部 javascript :

var ele = document.getElementById("readybotao");
ele.addEventListener("mouseover",buttonon);
function buttonon() {
alert("If it showed up it worked!");
}

并关闭标签脚本:

 <script src="javascript.js"></script>