The random machine I am working on is now generating a quote.
But the problem lies with the twitter button.
What I did is that, If I click the Generate Now button. The href attribute of the twitter should also change depending on the quote.
Here is my code: https://codepen.io/bradrar1/pen/mLwWeP
Hi @bradrar1
If you inspect the anchor tag in the debugger after the page loads, you can see that the html has changed, specifically the id also changes.
I suspect that the widgets.js file that’s included in your pen is overriding the behavior of that anchor tag (I think the idea of that button is that it shares the page it is on), so that when you click the button, your script file is trying to reference an ID that no longer exists in the dom.
I’d suggest just removing the twitter js and styling the button yourself.
Couple of other notes.
Firstly, You need to have jqeury listed before bootstrap.min.js in your list of external scripts. Bootstrap depends on jquery so it needs to be loaded first.
Secondly, this won’t work:
var tweet = document.getElementById("tweet").href
tweet = "https://twitter.com/intent/tweet?text=" + quotes[y];
What’s happening here is your assigning a new string, based off of the href value, to the tweet variable. However, they it don’t point to the same place in memory. This is known as Pass by Value and it’s important to understand. So when you reasign the variable, your not actually updating the href, just the new tweet variable.
To fix that code you can update it like so:
document.getElementById("tweet").href = "https://twitter.com/intent/tweet?text=" + quotes[y];
Hope this helps.
Tip: Name of person quoted should in independent row of quote itself. I.e. Prepend row with quote then prepend row with quotee. Row with quotee should be below and on the right side of said quote. TipNo2. Could use float: right; for quotee styling.
@joesmith100 WOW!! it works! thanks for the great explanation and the link to Pass by Value. It Really helps me. The twitter button is now working. I can’t thank you enough!
You’re the man!
@codename11 Thanks for the tips. I finish the functionality of the page I make before styling it. Your tips will be a great help because I will not style my random quote machine.