私はプロジェクト 'クォートジェネレータ'に取り組んでいました。

Question

私はプロジェクトに参加していました。 Twitterのボタンを除くすべてが正常に機能します。それは新しいツイートボックスで新しいウィンドウを開いていますが、ボックスに希望のクォートが入っていません。私はここで少し混乱している。私はすべてを試みた。だから、ちょっとした助けが大いに評価されるだろう。ありがとうございました。

ここに私のプロジェクトです：https://codepen.io/buzz_lightyear/pen/BmdzaZ

var quotes = ["The Way Get Started Is To Quit Talking And Begin Doing.", "The Pessimist Sees Difficulty In Every Opportunity. The Optimist Sees Opportunity In Every Difficulty.", "Don't Let Yesterday Take Up Too Much Of Today.", "You Learn More From Failure Than From Success. Don't Let It Stop You. Failure Builds Character.", "It's Not Whether You Get Knocked Down, It's Whether You Get Up.", "If You Are Working On Something That You Really Care About, You Don't Have To Be Pushed. The Vision Pulls You.", "People Who Are Crazy Enough To Think They Can Change The World, Are The Ones Who Do", "Failure Will Never Overtake Me If My Determination To Succeed Is Strong Enough.", "Entrepreneurs Are Great At Dealing With Uncertainty And Also Very Good At Minimizing Risk. That's The Classic Entrepreneur", "We May Encounter Many Defeats But We Must Not Be Defeated", "Knowing Is Not Enough; We Must Apply. Wishing Is Not Enough; We Must Do", "Imagine Your Life Is Perfect In Every Respect; What Would It Look Like?"]; 
 

 
function makeId() { 
 
    var randomNumber = Math.floor(Math.random() * quotes.length); 
 
    $("#quote > h1").html(quotes[randomNumber]); 
 
} 
 

 
$(document).ready(function() { 
 
    $("#press > button").click(function() { 
 
    $("#quote > i").fadeOut("slow").fadeIn("slow"); 
 
    $("#quote > h1").fadeOut("slow", function() { 
 
     makeId(); 
 
     $(this).fadeIn("slow"); 
 
    }); 
 
    }); 
 
});

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> 
 
<link href="https://fonts.googleapis.com/css?family=Encode+Sans+Expanded" rel="stylesheet"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<link href="style.css" rel="stylesheet"> 
 

 
<div id="header"> 
 
    <h1>My Quote Machine</h1> 
 
</div> 
 

 
<div id="quote"> 
 
    <i class="fa fa-quote-left" aria-hidden="true" style="font-size: 15px; bottom: 10px;"></i> 
 
    <h1>I shall not waste my days in trying to prolong them.</h1> 
 
</div> 
 
<div id="press"> 
 
    <div id="icon"> 
 
    <a href="https://twitter.com/intent/tweet/?text=" target="_blank"><i class="fa fa-twitter fa-2x" id="twitterid" style="color: white"></i></a> 
 
    </div> 
 
    <button class="btn btn-lg">Quote</button> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="javascript.js" type="text/javascript"></script>

Answer 1

あなたはニーズのテキストを使用しているTwitterのURLだからあなただけのいくつかを追加する必要があり、それの最後に

https://twitter.com/intent/tweet/?text=ADD_YOUR_QUOTE_HERE 

を追加しましたユーザーが鳥のアイコンをクリックしたときにURLにjavascriptを使用してテキストを表示します。

Answer 2

あなたはツイートインテントのテキスト属性を空のままにしていました。

これは最初に指定する必要があります（HTMLには最初の引用符がハードコードされています）。

あなたのmakeId機能では、テキスト属性を動的に変更します。

https://codepen.io/anon/pen/YExdNY

HTML（私が代わりにアイコンの実際のリンクにtwitteridを移動）：

<a id="twitterid" href="https://twitter.com/intent/tweet/?text=I shall not waste my days in trying to prolong them." target="_blank"> 
    <i class="fa fa-twitter fa-2x" style="color: white"></i> 
</a> 

JS：

function makeId() { 
    var randomNumber = Math.floor(Math.random() * quotes.length); 
    $("#quote > h1").html(quotes[randomNumber]); 

    // get the twitter intent link 
    var twitterid = $("#twitterid"); 
    // remove existing text attribute with quote 
    // change with the newly generated quote 
    twitterid.attr("href", twitterid.attr("href").split("text=")[0] + "text=" + 
    quotes[randomNumber]); 
} 

編集：コードのこの行：

twitterid.attr("href", twitterid.attr("href").split("text=")[0] + "text=" 
+ quotes[randomNumber]); 

twitteridリンクからhref属性を取得し、hrefの値をtext属性で分割してから再度追加しますが、次の引用符を使用します。