我正在制作一个基本网站，当您单击时会播放声音，但 index.php 中的 onclick 方法未定义，我找不到错误。
错误报告为
Uncaught ReferenceError: Train is not defined at 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>最佳答案
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>关于javascript - 单击时的功能未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54550083/