Javascript 按钮不在'；当点击时，我什么也不做
我目前正在尝试建立一个有三个按钮的网站，一个是Facebook共享按钮，一个是Twitter按钮，另一个是视频链接按钮。它们被归类为“facebook”、“twitter”和“play”。然而，没有一个链接是我所希望的。我有一个外部Javascript文件，但根据建议决定只在HTML文件中添加所有内容。我对JavaScript（只是HTML/CSS）没有太多经验，所有的JavaScript都是开源代码。是否有任何我完全忽略或不知道的小错误？谢谢Javascript 按钮不在'；当点击时，我什么也不做,javascript,html,css,Javascript,Html,Css,我目前正在尝试建立一个有三个按钮的网站，一个是Facebook共享按钮，一个是Twitter按钮，另一个是视频链接按钮。它们被归类为“facebook”、“twitter”和“play”。然而，没有一个链接是我所希望的。我有一个外部Javascript文件，但根据建议决定只在HTML文件中添加所有内容。我对JavaScript（只是HTML/CSS）没有太多经验，所有的JavaScript都是开源代码。是否有任何我完全忽略或不知道的小错误？谢谢 <!DOCTYPE html> <
<!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>
索马股份
支持Soma，点击3次
你好，摇滚明星
我们希望您今天过得非常愉快。你来这里是因为我们知道你有影响力。当你分享一些东西时，人们会注意到。所以，请花几秒钟来传播索玛的爱。
非常感谢，
迈克、扎克和整个索玛团队
0%
-
1.在Facebook上分享
与你的朋友分享Soma
f股
-
2.在Twitter上发布
联系你的后续行动
推特
-
3.看我们的视频
提前感谢您对Soma的支持
玩
&抄袭；索马2012
（功能（）{
var=0；
$（'button'）。在（'click'，function（）上{
点击++；
变量百分比=数学最小值（数学四舍五入（点击次数/3*100），100）；
$（'.percent'）.width（percent+'%'）；
$（'.number'）.text（百分比+'%'）；
});
$（'.facebook'）。在（'click'，function（）上{
打开窗户http://www.facebook.com');
var w=580，h=300，
左=（屏幕宽度/2）-（宽/2），
顶部=（屏幕高度/2）-（高度/2）；
如果（（屏幕宽度<480）| |（屏幕高度<480））{
window.open（'http://www.facebook.com/share.php?u=http://bit.ly/somawater“，”，“工具栏=否，位置=否，目录=否，状态=否，菜单栏=否，滚动条=否，可调整大小=否，复制历史=否，宽度=“+w+”，高度=“+h+”，顶部=“+top+”，左侧=“+left”）；
}否则{
window.open（'http://www.facebook.com/share.php?u=http://bit.ly/somawater“，”，“工具栏=否，位置=否，目录=否，状态=否，菜单栏=否，滚动条=否，可调整大小=否，复制历史=否，宽度=“+w+”，高度=“+h+”，顶部=“+top+”，左侧=“+left”）；
}
});
$（'.twitter'）。在（'click'，function（）上{
var loc=encodeURIComponent（'http://bit.ly/somawater'),
title=“由Soma设计的创新型全天然滤水器-”，
w=580，h=300，
左=（屏幕宽度/2）-（宽/2），
顶部=（屏幕高度/2）-（高度/2）；
打开窗户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'）。在（'click'，function（）上{
window.location.href=”http://kck.st/TH0NAN";
});
});
(function() {
var clicks = 0;
$('button').on('click', function() {
...
});
$('.facebook').on('click', function() {
...
});
$('.twitter').on('click', function() {
...
});
$('.play').on('click', function() {
...
});
})(); // <- Note the extra 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
你又问了同样的问题，是的，我又问了同样的问题。不允许你这么做吗？我试图在这篇文章中提供更多信息。@user2677095然后对旧文章进行更新。.刚刚将
（function（）{$（document）.ready（function（））{（function（）{$（document）.ready（function（））{单击变量）。您的新问题是什么？您的按钮是否正常？@user2677095:在完全加载DOM后绑定事件处理程序始终是一个好做法。当您使用IIFE@Runner同意。在这种情况下，实际上并不需要IIFE。OP可以只包装在文档就绪块中：$（document.ready（function（）{…}）；
我刚刚将其更改为$（document）.ready（function（）{…}）；格式，但出于某种原因，它并没有起到任何作用。关于它为什么可能不起作用，还有其他想法吗？我真的很困惑，因为似乎一切都做得很好。嗨，我添加了额外的括号，但这改变了我的问题。不鼓励IIFE吗？这是开源代码的通用格式，我对JavaScr非常不熟悉ipt.我在谷歌上搜索了我的问题，但没有多少关于何时/是否应该使用它的建议。谢谢！强烈建议在IIFE中包装代码，因为它可以防止对全局范围的污染（例如，使用单击变量）。您的新问题是什么？您的按钮是否正常？@user2677095:在完全加载DOM后绑定事件处理程序始终是一个好做法。当您使用IIFE@Runner同意。在这种情况下，实际上并不需要IIFE。OP可以只包装在一个文档就绪块中：$（doc