未定义点击功能

时间：2019-02-06 09:16:22

标签： javascript html5

我正在制作一个基本的网站，当您单击时可以播放声音，但是index.php中的onclick方法未定义，我找不到错误。

错误报告是

  

未捕获的ReferenceError：火车未定义       在HTMLButtonElement.onclick（（index）：46）

但是我不明白我提到的错误是什么，有人可以解释吗？

注意：引用了脚本，但我有一个与名称相同的按钮，并且点击量正常

function Traffic() {}
function Talking() {}
function Bar() {}
function Train() {
  var sound = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
  var gif = "https://thumbs.gfycat.com/CoarseSimpleCutworm-size_restricted.gif";
  var info = this.name;
  trainBoolean = true;
  Execute(sound, gif, info);
}


function Execute(audio, image, imageInfo) {

  body.innerHTML = "";
  var x = document.createElement("IMG");
  x.setAttribute("src", image);
  x.setAttribute("width", width);
  x.setAttribute("height", height);
  x.setAttribute("alt", imageInfo);
  document.body.appendChild(x);

  audio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
  }, false);
  audio.play();
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <table class="table">
      <thead>
        <tr>
          <th style="width:10%;" scope="col">#</th>
          <th style="width:30%;" scope="col">Street</th>
          <th style="width:30%;" scope="col">People</th>
          <th style="width:30%;" scope="col">Places</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>
            <label>
                <button onclick="Traffic()" class="btn btn-warning">Traffic</button>
            </label>
          </td>
          <td>
            <label>
                <button onclick="Talking()" class="btn btn-warning">Talking</button>
            </label>
          </td>
          <td>
            <label>
                <button onclick="Bar()" class="btn btn-warning">Bar</button>
            </label>
          </td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>
            <label>
                <button onclick="Train()" class="btn btn-warning">Train</button>
            </label>
          </td>
          <td>
            <label>
                <button onclick="" class="btn btn-warning">2</button>
            </label>
          </td>
          <td>
            <label>
                <button onclick="Stadion()" class="btn btn-warning">Stadion</button>
            </label>
          </td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>
            <label>
                <button onclick="Construction()" class="btn btn-warning">Construction</button>
            </label>
          </td>
          <td>
            <label>
                <button onclick="" class="btn btn-warning">2</button>
            </label>
          </td>
          <td>
            <label>
                <button onclick="Disco()" class="btn btn-warning">Disco</button>
            </label>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="script.js"></script>
</body>

</html>

1 个答案:

答案 0 :(得分：1)

function Traffic() {}
function Talking() {}
function Bar() {}
function Train() {
  var sound = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
  var gif = "https://thumbs.gfycat.com/CoarseSimpleCutworm-size_restricted.gif";
  var info = this.name;
  trainBoolean = true;
  Execute(sound, gif, info);
}


function Execute(audio, image, imageInfo,width,height) {

  
  var x = document.createElement("IMG");
  x.setAttribute("src", image);
  x.setAttribute("width", width);
  x.setAttribute("height", height);
  x.setAttribute("alt", imageInfo);
  document.body.appendChild(x);

  audio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
  }, false);
  audio.play();
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <table class="table">
      <thead>
        <tr>
          <th style="width:10%;" scope="col">#</th>
          <th style="width:30%;" scope="col">Street</th>
          <th style="width:30%;" scope="col">People</th>
          <th style="width:30%;" scope="col">Places</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>
            <label>
                <button onclick="Traffic()" class="btn btn-warning">Traffic</button>
            </label>
          </td>
          <td>
            <label>
                <button onclick="Talking()" class="btn btn-warning">Talking</button>
            </label>
          </td>
          <td>
            <label>
                <button onclick="Bar()" class="btn btn-warning">Bar</button>
            </label>
          </td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>
            <label>
                <button onclick="Train()" class="btn btn-warning">Train</button>
            </label>
          </td>
          <td>
            <label>
                <button onclick="" class="btn btn-warning">2</button>
            </label>
          </td>
          <td>
            <label>
                <button onclick="Stadion()" class="btn btn-warning">Stadion</button>
            </label>
          </td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>
            <label>
                <button onclick="Construction()" class="btn btn-warning">Construction</button>
            </label>
          </td>
          <td>
            <label>
                <button onclick="" class="btn btn-warning">2</button>
            </label>
          </td>
          <td>
            <label>
                <button onclick="Disco()" class="btn btn-warning">Disco</button>
            </label>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="script.js"></script>
</body>

</html>

相关问题
最新问题