[英]HTML href onclick will not trigger javascript function
我被要求更新我的问题，所以去了：
我在数据库中有记录，其中一些记录附加了wave文件名。 我正在遍历数据库，并想在名为“音频文件”的标题下的一栏中写出“播放”一词。 单击“播放”时，音频播放器将播放文件并将href字词变为“暂停”。 当我的代码遍历这些记录时，它将为每个href分配一个单独的ID。 为了让我调用启动音频播放器的函数，我需要发送audioControl ID（aControl）变量以及音频播放器的src源文件（thissource）变量-因此在函数调用中发送＆和“。我在按钮中使用onclick事件，它会触发函数，但是，当我单击href链接（这是我想要的，而不是按钮）时，什么都不会发生。我不确定代码的哪一部分是乱七八糟的，因为我在互联网上找到了功能代码，在此先感谢您的帮助。
无论我做什么，我的href onclick都不会触发javascript函数。 我已经从函数中取出return false并将其放入href中，但这也不起作用。 我将相同的onclick代码放在按钮中，它触发得很好。
HTML：
<a href='#' onclick='passvariables(" & aControl & "," & thissource & ");'>Play</a>
Javascript：
function passvariables(aControl, thissource)
{
var yourAudio= new Audio();
yourAudio.src = thissource;
yourAudio.type = 'audio/wav';
ctrl = document.getElementById(aControl);
ctrl.onclick = function ()
{
// Update the Button
var pause = ctrl.innerHTML === 'Pause';
ctrl.innerHTML = pause ? 'Play' : 'Pause';
// Update the Audio
var method = pause ? 'pause' : 'play';
yourAudio[method]();
// Prevent Default Action
return false;
}
}
你可以试试：
window.passvariables = function(aControl, thissource) {
// Your code
};
我的猜测是您的函数是否在另一个函数中定义（例如在onload中执行）。 因此，“ passvariables”未在“ window”范围内定义。
我看到您更新了很好的问题：）首先，我建议您使用更易于操作DOM的JavaScript库jquery ，您可以在此站点上轻松找到资源和帮助。
这是代码的外观。 我没有测试过，但是很好地概述了它应该是什么。
将其放在HTML代码的<head>部分中
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function() {
//Assigning onClick function for every HTML tags having the css class "Play"
$('.Play').click(function(){
if($(this).html() == "Play"){
//retrieving information about the audio
var waveFile = $(this).attr("data-waveFile");
var audioId = $(this).attr("data-audioId");
//calling the startAudio function and assign the Audio object to myAudioObject
var myAudioObject = startAudio(waveFile, audioId);
if(myAudioObject){
//Audio started playing
$(this).html("Pause");
}else{
alert("error while starting to play file");
}
}else{
var isPaused = pauseAudio(myAudioObject);
if(isPaused){
//The pauseAudio function returned true so the audio is paused
$(this).html("Play");
}else{
alert("error while pausing");
}
}
});
//Functions to manage audio Player
function startAudio(waveFile, audioId){
audioObject = document.getElementById("audio");
audioObject.src = waveFile;
audioObject.play();
return true;
}
function pauseAudio(){
//do whatever to pause
audioObject = document.getElementById("audio");
audioObject.pause();
return true;
}
});
</script>
在HTML代码的<body>部分中，您可以在其中使用数据库数据来构造表：
<table>
<tr>
<td>Song name</td>
<td>Action</td>
</tr>
<tr>
<td><%=WaveFile%></td>
<td><a href="#" class="Play" data-waveFile="<%=WaveFile%>" data-audioId="<%=AudioId%>">Play</a></td>
</tr>
</table>
<audio id="audio"></audio>
注意<%=WaveFile%>和<%=AudioId%>应该是您从循环数据库中获取的值
只要有onclick调用passvariables没有return ，并有passvariables return false 。
谢谢你们每一个人的帮助！ 我终于开始工作了！ 这是代码：
yAudio = "'yourAudio" & thisline & "'"
aControl = "'audioControl" & thisline & "'"
thissource = "'/WaveFiles/" & RS.Fields("AudioIssues") &"'"
R"<td width=12 class=allprint><a href='#' class='Play' data-waveFile=" & thissource & " data-audioId=" & aControl & ">Play</a></td>"
// Call and play audio via JavaScript
$(document).ready(function()
{
var aElement = document.createElement('audio');
$('.Play').click(function()
{
if($(this).html() == "Play")
{
var waveFile = $(this).attr("data-waveFile");
var audioID = $(this).attr("data-audioId");
aElement.setAttribute('src', waveFile);
aElement.load()
aElement.addEventListener("load", function()
{
aElement.play();
$(this).html("Stop");
$(".duration span").html(aElement.duration);
$(".filename span").html(aElement.src);
}, true);
aElement.play();
$(this).html("Stop");
}
else
{
var waveFile = $(this).attr("data-waveFile");
var audioID = $(this).attr("data-audioId");
aElement.setAttribute('src', waveFile);
aElement.pause();
$(this).html("Play");
}
});
});
Javascript 创建按钮并触发 onclick function 上 Z4C4AD5FCA2E7A3F74ZDBB1CED00381AA4
[英]Javascript create button and trigger onclick function on HTML
OnClick HTML按钮：调用Javascript函数+ location.href（Django）
[英]OnClick HTML button : call Javascript function + location.href (Django)
JavaScript 生成的 HTML 与 onClick 不会触发 ZC1C425268E68385D1AB5074C17A4
[英]JavaScript generated HTML with onClick doesn't trigger function
使用Javascript将onclick函数添加到带有this参数的href中
[英]Add onclick function to a href with a this parameter using Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.