Функция от щелчка не определена - PullRequest
0 голосов
/ 06 февраля 2019

Я создаю простой веб-сайт, который воспроизводит звук при нажатии, но метод onclick из index.php не определен, и я не могу найти ошибку.

Отчет об ошибке

Uncaught ReferenceError: Train не определен в 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 голосов
/ 06 февраля 2019

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...