2017-05-28 104 views
0

HTML:的onclick不断调用javascript函数

<div class="container-fluid"> 
    <div class = "row text-center" align = "middle"> 
    <h2>Pseudo Random Quote Machine</h2> 
    </div> 
    <div class = "row text-center" align = "middle"> 
    <div class = "col-xs-12 well message" id = "quoting"> 
    </div> 
    </div> 
    <div class = "row text-center" align = "middle"> 
    <div class = "col-xs-12"> 
     <button id = "getMessage" class = "btn btn-primary"> 
     Get Random Quote 
     </button> 
     <button id = "tweet" class = btn btn-primary>Tweet this! 
     </button> 
    </div> 
    </div> 
</div> 

的Javascript:

function randomQuotes() 
{ 
    //array of quotes 
    var quotes = [ "\"Operator! Give me the number for 911!\" - Homer J. Simpson", "\"I\'m normally not a praying man, but if you\'re up there, please save me Superman\" - Homer J. Simpson", "\"I\'m in no condition to drive...wait! I shouldn\'t listen to myself, I\'m drunk!\" - Homer J. Simpson", "\"A Degenerate, Am I? Well You Are A Festizo. See, I Can Make Up Words Too, Sister\" - Peter Griffen", "\"Victory Shall Be Mine!\" - Stewie Griffen", "\"He's a spy, blow him up. I'm gonna go take a shit.\" - Rick Sanchez", "\"Ohh yea, you gotta get schwifty. \" - Rick Sanchez", "\"Yo! What up my glip glops!\" - Rick Sanchez", "\"WUBBA LUBBA DUB DUBS!!! \" - Rick Sanchez", "\"Existence is pain to a meeseeks Jerry, and we will do anything to alleviate that pain.\" - Mr. Meeseeks", " \"It\'s morphine time\" - TheRussianBadger"]; 

    var randNum = Math.floor((Math.random() * quotes.length)); 
    document.getElementById("quoting").innerHTML = quotes[randNum]; 
} 

function tweetThis() 
{ 
    var tweetToShare = document.getElementById("quoting").innerHTML; 
    var tweetUrl = 'https://twitter.com/share?text=' + encodeURIComponent(tweetToShare) + "."; 
    window.open(tweetUrl); 
} 

document.getElementById("getMessage").onclick = function(){randomQuotes();} 
document.getElementById("tweet").onclick = function(){tweetThis();} 

基本上,任何时候我单击这两个按钮的功能不断被调用一遍又一遍的。下面是代码running in Code Pen

我想我的问题是:

  1. 为什么会在函数调用一个以上的时间呢?

  2. 我应该怎么做才能阻止函数被多次调用或阻止它首先发生?

+0

在Chrome 58上正常工作。 – yuriy636

+0

是的,在Firefox上也很好用。53. – Andreas

+0

@cancer,你是对的。谢谢。 – manny

回答

1

函数似乎只在Chrome上调用一次。也许你的浏览器缓存一个旧脚本:maiusc + f5清理

+0

发生这种情况的一种常见方式是,如果您在Chrome上打开了开发人员工具,并且仍在使用Js文件。在chrome上打开开发者工具来启用缓存,你可以通过去开发者工具 - >网络 - >禁用缓存来解决这个问题 –