为什么onclick无效？

时间：2014-08-10 21:37:11

标签： javascript html5

为什么onclick没有调用我的javascript函数？

如果我只是从一个javascript函数调用函数testF（），它将会起作用。

代码：

<img src="s/256base-open-over.png" onclick="testF();">Dr. No. (1962)</a>



function testF() {
    console.log("logTest");
    alert("test");
}

以下是整页：

您的说法是正确的，因为脚本没有先加载。但是，如果我首先加载JSPlayer，那么它就不会显示，我希望它位于标题jpg之后和下拉菜单之前的页面中。

有什么想法吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Movie List</title>

    <script type="text/javascript" src="jwplayer.js" ></script>
    <script type="text/javascript">jwplayer.key="Qa7RBzf9bd+ojVxVkkgEDslXu/QYZVRmhb+PGwNDJhtx/QB0x6hgvQ==";
    </script>

    <link rel="stylesheet" href="s/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>

<style>
.Three-Dee{
font-family: Courier, monospace;
line-height: 1em;
color: #e81ee8;
font-weight:bold;
font-size: 80px;
text-shadow:0px 0px 0 rgb(88,-114,88),1px 0px 0 rgb(72,-130,72),2px 0px 0 rgb(57,-145,57),3px 0px 0 rgb(41,-161,41),4px 0px 0 rgb(26,-176,26),5px 0px 0 rgb(10,-192,10),6px 0px 0 rgb(-5,-207,-5),7px 0px 0 rgb(-21,-223,-21),8px 0px 0 rgb(-36,-238,-36),9px 0px 0 rgb(-52,-254,-52),10px 0px 0 rgb(-67,-269,-67),11px 0px 0 rgb(-83,-285,-83),12px 0px 0 rgb(-98,-300,-98),13px 0px 0 rgb(-114,-316,-114), 14px 0px 0 rgb(-129,-331,-129),15px 0px 14px rgba(0,0,0,0.15),15px 0px 1px rgba(0,0,0,0.5),0px 0px 14px rgba(0,0,0,.2);}

.Three-DeeTwo{
font-family: Courier, monospace;
line-height: 1em;
color: #1a071a;
font-weight:bold;
font-size: 15px;
text-shadow:0px 0px 0 rgb(10,-9,10),1px 0px 0 rgb(-7,-26,-7),2px 0px 0 rgb(-23,-42,-23), 3px 0px 0 rgb(-39,-58,-39),4px 0px 3px rgba(0,0,0,0),4px 0px 1px rgba(0,0,0,0.5),0px 0px 3px rgba(0,0,0,.2);}
</style>    

</head>
<body style="background-color:#E2EBEB">
<center>
<canvas id="myCanvas" width="400" height="120" style="border:2px solid #000000;"></canvas>
</center>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
      };
      imageObj.src = 'j1.jpg';
    </script>
<hr>
<center>
<div id="test" class="auto-style1">Loading the player...</div>
   <script type="text/javascript">

function setM(value) {
//  {file: "valley.mp4",label: "144p"}
alert(value);
     jwplayer("test").setup({
      playlist: [{
        image: "ticket.jpg",
        sources: [
        {file: value,label: "144p"}
        ]
      }]
    });
}

setM("valley.mp4");

function testF() {
    console.log("logTest");
    alert("test");
}

    function sendName(name) {
      alert(name);
    }
   </script>
</center>

<center>
    <div class="Three-Dee">Movie List</div>
</center>

<center>
    <h5>Click Menu Below!</h5>
</center>

<ul id="css3menu1" class="topmenu">
<input type="checkbox" id="css3menu-switcher" class="switchbox"><label onclick="" class="switch" for="css3menu-switcher"></label>   
    <li class="topfirst"><a href="#" style="width:574px;">
    <img src="s/256base-open-over.png" onclick="setM("00223.144p.mp4");" />Dr. No. (1962)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over.png" alt=""/>From Russia With Love (1963)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over2.png" alt=""/>Goldfinger (1964)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over3.png" alt=""/>Thuderball (1965)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over5.png" alt=""/>You Only Live Twice (1967)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over6.png" alt=""/>On Her Majesty's Secret Service (1969)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over7.png" alt=""/>Diamonds Are Forever (1971)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over8.png" alt=""/>Live and Let Die (1973)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over9.png" alt=""/>The Man with the Golden Gun (1974)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over10.png" alt=""/>The Spy Who Loved Me (1977)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over11.png" alt=""/>Moonraker (1979)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over12.png" alt=""/>For Your Eyes Only (1981)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over13.png" alt=""/>Octopussy (1983)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over14.png" alt=""/>A View To A Kill (1985)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over15.png" alt=""/>The Living Daylights (1987)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over16.png" alt=""/>Licence to Kill (1989)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over17.png" alt=""/>Goldeney (1995)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over18.png" alt=""/>Tomorrow Never Dies (1997)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over19.png" alt=""/>The World is Not Enough (1999)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over20.png" alt=""/>Die Another Day (2002)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over21.png" alt=""/>Casino Royal (2006)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over22.png" alt=""/>Quantum of Solace (2008)</a></li>
    <li class="topmenu"><a href="#" style="width:574px;">
    <img src="s/256base-open-over23.png" alt=""/>Skyfall (2012)</a></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">vertical menu css</a> by Css3Menu.com</p>
<!-- End css3menu.com BODY section -->

<style type="text/css">
.auto-style1 {
    color: #FFFFFF;
}
</style>

</body>
</html>

JSPlayer的主要代码

function setM(value) {
//  {file: "valley.mp4",label: "144p"}
alert(value);
     jwplayer("test").setup({
      playlist: [{
        image: "ticket.jpg",
        sources: [
        {file: value,label: "144p"}
        ]
      }]
    });
}

setM("valley.mp4");

以上是设置播放视频的播放器的代码。 JS播放器就是这个名字。代码位于html的正文中，我想要找到播放器。如果您单击菜单然后单击电影名称，它将更改播放器，以便播放器将播放此特定电影。

问题：我无法做的是能够点击菜单链接然后才能播放该特定电影。这就是我希望它。一位朋友给了我一份JS播放器的测试副本，但我认为使用Canvas播放视频可能会更好，因为你可以在这个特定位置放置画布，然后使用JavaScript播放视频。

我认为因为JSPlayer的代码实际在html的主体可能是问题????不完全确定。

enter image description here

1 个答案:

答案 0 :(得分：1)

您的开场代码为<img>，但结束代码为</a>：那些不匹配。

试试这个：

<img src="s/256base-open-over.png" onclick="testF();"/>Dr. No. (1962)

（<img>标签是自动关闭的。）

Demo

但是，这不应该停止执行JavaScript，因此请确保您的JavaScript位于提供testF()函数全局范围的位置，并且您的JavaScript在页面之前加载。

也可能是您忘记将代码包装在<script>标记中：您无法在HTML中投放JavaScript并希望它能够正常运行。

<script>
    function testF() {
        console.log("logTest");
        alert("test");
    }
</script>
相关问题
最新问题