随机报价机，推特报价

Question

我正在通过Free Code Camp's "Random Quote Machine" 工作，并且我构建了一个非常（强调非常）基本的模型，但是我无法弄清楚如何使用我的代码的方式获取引号和推文。我是否必须更改我当前的 Javascript 代码才能发推文，或者有没有办法用我没有意识到的当前代码发送推文？我知道有一个another question like this 有解决方案，但是我不明白。非常感谢。

var quotes= [
    'I love you the more in that I believe you had liked me for my own sake 
    and for nothing else. John Keats', 
    'But man is not made for defeat. A man can be destroyed but 
    not defeated. Ernest Hemingway', 
    'When you reach the end of your rope, tie a knot in it and 
    hang on. Franklin D. Roosevelt', 
    'Always do what is right. It will gratify half of mankind 
    and astound the other. ― Mark Twain', 
    'Whenever you find yourself on the side of the majority, it 
    is time to pause and reflect. Mark Twain',
    'It is curious that physical courage should be so common in 
    the world, and moral courage so rare.- Mark Twain in Eruption',
    'A man should not be without morals; it is better to have 
    bad morals than none at all.- Mark Twain\'s Notebook',
    'The most permanent lessons in morals are those which come, 
    not of book teaching, but of experience.- A Tramp Abroad',
    'But the fact that he can do wrong proves his moral 
    inferiority to any creatures that cannot.― Mark Twain',
    '\“Wrong does not cease to be wrong because the majority 
    share in it.\” ― Leo Tolstoy',
    '\“Right is right even if no one is doing it; wrong is wrong 
    even if everyone is doing it.\” ― Augustine of Hippo'
]
function nextQuote() {
    var randomNumber = Math.floor(Math.random()*quotes.length);
    document.getElementById("displayQuote").innerHTML = quotes[randomNumber];
}

<h1>Random Quote Machine</h1>
<!--Javascript will go in div-->
<div>
    <h2 id="displayQuote"></h2>
</div>
<button onclick="nextQuote()">New Quote</button>
<button id="tweetQuote"><a>Tweet</a></button>

Answer 1

您的代码会引发类似“未终止的字符串字母”的错误，因为您的 quotes-array 元素中不能有线刹车。

快速清理后 - 现在它就像一个魅力。

var quotes= [
    'I love you the more in that I believe you had liked me for my own sake and for nothing else. John Keats', 
    'But man is not made for defeat. A man can be destroyed but not defeated. Ernest Hemingway', 
    'When you reach the end of your rope, tie a knot in it and hang on. Franklin D. Roosevelt', 
    'Always do what is right. It will gratify half of mankind  and astound the other. ― Mark Twain', 
    'Whenever you find yourself on the side of the majority, it is time to pause and reflect. Mark Twain',
    'It is curious that physical courage should be so common in the world, and moral courage so rare.- Mark Twain in Eruption',
    'A man should not be without morals; it is better to have bad morals than none at all.- Mark Twain\'s Notebook',
    'The most permanent lessons in morals are those which come, not of book teaching, but of experience.- A Tramp Abroad',
    'But the fact that he can do wrong proves his moral inferiority to any creatures that cannot.― Mark Twain',
    '\“Wrong does not cease to be wrong because the majority share in it.\” ― Leo Tolstoy',
    '\“Right is right even if no one is doing it; wrong is wrong even if everyone is doing it.\” ― Augustine of Hippo'
]
function nextQuote() {
    var randomNumber = Math.floor(Math.random()*quotes.length);
    document.getElementById("displayQuote").innerHTML = quotes[randomNumber];
    document.getElementById("tweetQuote").href="https://twitter.com/intent/tweet/?text=" +  quotes[randomNumber];
}

<h1>Random Quote Machine</h1>
<!--Javascript will go in div-->
<div>
    <h2 id="displayQuote"></h2>
</div>
<button onclick="nextQuote()">New Quote</button>
<a href="#" id="tweetQuote"><button>Tweet</button></a>

如果某些东西不起作用，你必须调试你的代码......

Answer 2

虽然我的第一个答案是关于修复原始源代码，但这个答案更像是关于如何以更好的方式实现功能的建议。

// lets start with a "Immediately Invoked Function Expression"
// to not pollute the global namespace
(function() {

    // cache elements that are reused
    var aQuotes = [ 'Quote 1', 'Quote 2', 'Quote 3', 'Quote 4' ],
        iQuotes = aQuotes.length,
        domDisplayQuote = document.getElementById("displayQuote"),
        domTweetQuote = document.getElementById("tweetQuote");

    // listen to "click event" on "button#nextQuote"
    document.getElementById("nextQuote").addEventListener('click', function() {

        var sQuote = aQuotes[ Math.floor( Math.random() * iQuotes ) ];
        // use cached DOMelements
        domDisplayQuote.innerHTML = sQuote;
        domTweetQuote.href="https://twitter.com/intent/tweet/?text=" + sQuote;

    }), false;

})()

<h1>Random Quote Machine</h1>
<div>
    <h2 id="displayQuote"></h2>
</div>
<!-- instead of <button onclick="nextQuote()">New Quote</button> -->
<button id="nextQuote">New Quote</button>
<a href="#" id="tweetQuote"><button>Tweet</button></a>