HTML href onclick不会触发javascript函数
[英]HTML href onclick will not trigger javascript function
问题描述
I have been asked to update my question so here goes: 
我被要求更新我的问题，所以去了：
I have records in a database, some of which have wave file names attached. 我在数据库中有记录，其中一些记录附加了wave文件名。 I am looping through the database and wanting to write out the word "Play" in a column under a header named Audio File. 我正在遍历数据库，并想在名为“音频文件”的标题下的一栏中写出“播放”一词。 When "Play" is clicked on, the audio player plays the file and turns the href word to "Pause". 单击“播放”时，音频播放器将播放文件并将href字词变为“暂停”。 When my code loops through these records, it is assigning a separate ID to each href. 当我的代码遍历这些记录时，它将为每个href分配一个单独的ID。 For me to call the function that starts the audio player, I need to send an audioControl ID (aControl) variable as well as the src source file (thissource) variable for the audio player - hence the & and " in the function call. When I use the onclick event in a button, it triggers the function. However, when I click the href link (which is what I want instead of a button) nothing happens. I am not sure which part of the code is messy, as I found the function code on the internet. Thank-you in advance for any and all help. 为了让我调用启动音频播放器的函数，我需要发送audioControl ID（aControl）变量以及音频播放器的src源文件（thissource）变量-因此在函数调用中发送＆和“。我在按钮中使用onclick事件，它会触发函数，但是，当我单击href链接（这是我想要的，而不是按钮）时，什么都不会发生。我不确定代码的哪一部分是乱七八糟的，因为我在互联网上找到了功能代码，在此先感谢您的帮助。
No matter what I do, my href onclick will not trigger a javascript function. 无论我做什么，我的href onclick都不会触发javascript函数。 I have taken the return false out of the function and put it in the href but that doesn't work either. 我已经从函数中取出return false并将其放入href中，但这也不起作用。 I have put the same onclick code in a button and it triggers great. 我将相同的onclick代码放在按钮中，它触发得很好。
HTML: HTML：
<a href='#' onclick='passvariables(" & aControl & "," & thissource & ");'>Play</a>
Javascript: 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;
}
}
4 个解决方案
解决方案1
0 2016-03-18 16:59:30
You can try: 你可以试试：
window.passvariables = function(aControl, thissource) {
// Your code
};
My guess if that your function is defined within another function (executed onload for instance). 我的猜测是您的函数是否在另一个函数中定义（例如在onload中执行）。 Hence "passvariables" is not defined in the "window" scope. 因此，“ passvariables”未在“ window”范围内定义。
解决方案2
0 2016-03-18 17:13:09
I saw you updated your questions that's good :) First I recommend you to use the javascript library jquery which is easier to manipulate the DOM and you can easily find ressources and help on this site. 我看到您更新了很好的问题：）首先，我建议您使用更易于操作DOM的JavaScript库jquery ，您可以在此站点上轻松找到资源和帮助。
Here's what your code should look. 这是代码的外观。 I haven't tested it but it's a good overview of what this should be. 我没有测试过，但是很好地概述了它应该是什么。
Put this in the <head> section of your HTML code 将其放在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>
in the <body> section of your HTML code where you construct the table using database datas : 在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>
Note the <%=WaveFile%> and <%=AudioId%> should be the values you get from the database in your loop 注意<%=WaveFile%>和<%=AudioId%>应该是您从循环数据库中获取的值
解决方案3
0 2016-03-18 17:23:44
只要有onclick调用passvariables没有return ，并有passvariables return false 。
解决方案4
0 2016-03-21 00:43:39
Thank-you everyone for your help! 谢谢你们每一个人的帮助！ I finally got it working! 我终于开始工作了！ Here is the code: 这是代码：
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");
}
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.