按钮在点击时没有做任何事情 [英] Button isn't doing anything when clicked on
问题描述
我目前正试图建立一个有三个按钮的网站，一个是Facebook分享网站，一个是Twitter网站，另一个是链接到视频的网站。他们被归类为脸谱，微博和玩。但是，他们没有一个去我所希望的链接。我有一个外部Javascript文件，但决定只是根据建议添加我的HTML文件中的所有内容。我真的没有太多的JavaScript经验（只是HTML / CSS），所有的JavaScript都是OpenSource代码。有没有我完全忽略或不知道的小错误？谢谢！
<！DOCTYPE html>
< html>
< head>
< title> Soma - Share< / title>
< link href ='http：//fonts.googleapis.com/css？family = Open + Sans：400,700'rel ='stylesheet'type ='text / css'/>
< link rel =stylesheettype =text / csshref =share.css/>
< link type =text / css =stylesheetmedia =only screen and（max-width：600px）href =mobile.css/>
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js\"> ;</script>
< meta name =viewportcontent =width = device-width，initial-scale = 1，maximum-scale = 1/>
< / head>
< body>
< h1>通过3次点击支持Soma< / h1>
< div id =container>
< p id =welcome>
Hola，rockstar！< / b>< br />< br />我们希望您有一个美好的一天。你在这里是因为我们知道你有影响力。当你分享一些东西时，人们会注意。所以，请花几秒钟传播Soma的爱。
< br />< br />
< b>非常感谢，< / b>
< br />
Mike，Zach和整个Soma团队
< / p>
< div id =progress>
< div class =percent>
< div class =number> 0％< / div>
< / div>
< / div>
< ul id =actions>
< li>
< h2> 1。分享到Facebook< / h2>
< p>与朋友分享Soma< / p>
< button class =facebook>< span class =facebookSpan> f< / span>份额< /按钮>
< / li>
< li>
< h2> 2。在Twitter上发布< / h2>
< p>勾住您的追踪< / p>
< button class =twitter>< span class =twitterSpan>< / span> Tweet< / button>
< / li>
< li>
< h2> 3。观看我们的视频< / h2>
< p style =font-size：13.4999px>预先感谢您支持Soma< / p>
< button class =play>< span class =playSpan>< / span>播放< / button>
< / li>
< / ul>
< / div>
< div id =footer>& copy; Soma 2012< / div>
< script> （'click'）。
$ b（function（）{
var clicks = 0;
$ ，function（）{
clicks ++;
var percent = Math.min（Math.round（clicks / 3 * 100），100）;
$（'。percent'）。width （百分比+'％'）;
$ b $（'。数字'）。text（百分比+'％'）;
}）;
$ （'click'，function（）{
window.open（'http://www.facebook.com'）;
var w = 580，h = 300，
left =（screen.width / 2） - （w / 2），
top =（screen.height / 2） - （h / 2）;
$ b $ （（screen.width< 480）||（screen.height< 480））{
window.open（'http://www.facebook.com/share.php？ u = http：//bit.ly/somawater'，''，'toolbar = no，location = no，directories = no，status = no，menubar = no，scrollbars = no，resizable = no，copyhistory = no，width ='+ w +'，height ='+ h +'，top ='+ top +'，left ='+ left）;
} else {
window.open（'http：// www。 facebook.com/share.php?u=http://bit.ly/somawater'，''，'toolbar = no，location = no，directories = no，status = no，menubar = no，scrollbars = no，resizable = no，copyhistory = no，width ='+ w +'，height ='+ h +'，top ='+ top +'，left ='+ left）;
}
}）; $（'。twitter'）。on（'click'，function（）{
var loc = encodeURIComponent（'http://bit.ly/somawater'），
title =Soma优美的全天然水过滤器，
w = 580，h = 300，
left =（screen.width / 2） - （w / 2），
top =（screen.height / 2） - （h / 2）;
window.open（'http://twitter.com/share?text='+ title +'& url ='+ loc，''，'height ='+ h +'，width ='+ w +'，top ='+ top +'，left ='+ left +'，toolbar = 0，location = 0， menubar = 0，directories = 0，scrollbars = 0'）;
}）; $（'。play'）。on（'click'，function（）{
window.location.href =http://kck.st/TH0NAN;
}）;
}）;
< / script>
< / body>
< / html>
您只是缺少一些括号
（'click'）。 （function（）{
var clicks = 0;
$（'button'）。 ，function（）{
...
}）;
$（'。facebook'）。on（'click'，function（）{
。 （'click'，function（）{
...
}）; $（$'$'）;
$ （'click'，function（）{
...
}）;
}）（ ）; //< - 注意额外的括号
通过将代码放入（ function（）{...}）（）你正在创建一个函数表达式，然后立即调用它。这被称为IIFE（立即调用的函数表达式）。
$ hr
$ b
更新
这里是使用jQuery的document.ready方法的代码。使用这种方法不需要上述的IIFE。
这种方法一直等到页面上的所有元素在执行代码之前加载为止
$（'button'）。on（'
$ $ $'''code $（document）.ready（function（）{
var clicks = 0;
$点击'，函数（）{
...
}）;
$（'。facebook'）。on（'click'，function（）{$ b $ （'click'，function（）{
...
}）;
$ b $（'。twitter'）。 （'click'，function（）{
...
}）;
$（'。play'）。 ）;
I am currently trying to build a site that has three buttons, a Facebook Sharing one, a Twitter one, and another one that links to a video. They are classed as "facebook", "twitter", and "play". However, none of them go to the links that I had hoped. I had an external Javascript file but decided to just add everything in my HTML file based on advice. I really don't have much experience with JavaScript (just HTML/CSS) and all of the JavaScript was OpenSource code. Is there any minor error that I am completely neglecting or unaware of? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Soma - Share</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="share.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-width: 600px)" href="mobile.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
<h1>Support Soma with 3 Clicks</h1>
<div id="container">
<p id="welcome">
<b>Hola, rockstar!</b><br /><br />We hope you're having an awesome day. You're here because we know you have influence. When you share something, people pay attention. So, please take a few seconds to spread the Soma love.
<br /><br />
<b>Thanks so much,</b>
<br />
Mike, Zach and the entire Soma Team
</p>
<div id="progress">
<div class="percent">
<div class="number">0%</div>
</div>
</div>
<ul id="actions">
<li>
<h2>1. Share on Facebook</h2>
<p>Share Soma with your friends</p>
<button class="facebook"><span class="facebookSpan">f</span> Share</button>
</li>
<li>
<h2>2. Post on Twitter</h2>
<p>Hook your following up</p>
<button class="twitter"><span class="twitterSpan"></span>Tweet</button>
</li>
<li>
<h2>3. Watch our Video</h2>
<p style = "font-size:13.4999px">Thank you in advance for backing Soma</p>
<button class="play"><span class = "playSpan"></span>Play</button>
</li>
</ul>
</div>
<div id="footer">© Soma 2012</div>
<script>
(function() {
var clicks = 0;
$('button').on('click', function() {
clicks++;
var percent = Math.min(Math.round(clicks / 3 * 100), 100);
$('.percent').width(percent + '%');
$('.number').text(percent + '%');
});
$('.facebook').on('click', function() {
window.open('http://www.facebook.com');
var w = 580, h = 300,
left = (screen.width/2)-(w/2),
top = (screen.height/2)-(h/2);
if ((screen.width < 480) || (screen.height < 480)) {
window.open ('http://www.facebook.com/share.php?u=http://bit.ly/somawater', '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
} else {
window.open ('http://www.facebook.com/share.php?u=http://bit.ly/somawater', '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}
});
$('.twitter').on('click', function() {
var loc = encodeURIComponent('http://bit.ly/somawater'),
title = "Beautifully innovative all-natural water filters by Soma — ",
w = 580, h = 300,
left = (screen.width/2)-(w/2),
top = (screen.height/2)-(h/2);
window.open('http://twitter.com/share?text=' + title + '&url=' + loc, '', 'height=' + h + ', width=' + w + ', top='+top +', left='+ left +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
});
$('.play').on('click', function() {
window.location.href = "http://kck.st/TH0NAN";
});
});
</script>
</body>
</html>
You're just missing some brackets
(function() {
var clicks = 0;
$('button').on('click', function() {
...
});
$('.facebook').on('click', function() {
...
});
$('.twitter').on('click', function() {
...
});
$('.play').on('click', function() {
...
});
})(); // <- Note the extra brackets
By placing your code inside (function() { ... })() you are creating an function expression and then immediately invoking it. This is known as an IIFE (immediately invoked function expression)
Update
Here is the code using jQuery's document.ready approach. Using this approach the IIFE described above is not required.
This approach waits until all the elements on the page have loaded before executing the code
$(document).ready(function() {
var clicks = 0;
$('button').on('click', function() {
...
});
$('.facebook').on('click', function() {
...
});
$('.twitter').on('click', function() {
...
});
$('.play').on('click', function() {
...
});
});
这篇关于按钮在点击时没有做任何事情的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
