RQM - New Quote Button only works on Codepen

JavaScript
1

hello, first time posting here since i started a couple days ago.
I think i finally need your help.

This is my Quote Machine. Very barebones still, but got it working, mostly.

On Codepen, everything works, except the twitter-share-button. It redirects but then gets blocked (something CSP).
It works in the browser though.

Second Problem is, that the newQuoteButton does not generate a new Quote when loading the page in my browser.
Only the initial random quote on start will get displayed. Nothing happens when clicking the button. But again: on codepen it works.

I tried a lot of possibilities [ click(), attr.(“onclick”, xyz), and replacing the button tag with input or a, etc] but nothing worked for me.
And i’m pretty sure you can easily point me in the right direction.

Any help much appreciated. Cheers :monkey::monkey:

3

First of all thanks for the reply. You already helped me quite a bit when i looked through the forum.

Here’s my html:

<head>
	<title>Let Me Inspire You!</title>
	<link rel="stylesheet" href="quoteMachine - Style.css">
	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
	<script src="script.js"></script>
</head>

<body>
	<div class="grid-container">
			
			<div class="heading">Random Quote Machine</div>
			
			<div class="quote-gridpart">
				<div class="quote">
					<h1 id="quote"></h1>
					<p id="author"></p>
				</div>
				
				<div class="buttons">
					<a href="#" class="button" id="newQuoteButton">New Quote</a>
					<a class="button" id="twitter-share-button">Share</a>
				</div>
			</div>
			<div class="footer">C 2018 Raphael Mayer</div>
	</div>	
</body>

JS:

var url = "https://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?";

var putQuote = function(data) {
$("#quote").text(data.quoteText);
var quot = ‘https://twitter.com/intent/tweet?text=’ + data.quoteText + ’ Author ’ + data.quoteAuthor;
if (data.quoteAuthor === ‘’) {
data.quoteAuthor = ‘Unknown’;
}
$("#author").text('Author: ’ + data.quoteAuthor);
$("#twitter-share-button").attr(“href”, quot);
};

$(document).ready(function() {
$.getJSON(url, putQuote, ‘jsonp’);

});
$("#newQuoteButton").on(“click”, function() {
$.getJSON(url, putQuote, ‘jsonp’);
});

They should be almost identical in regards to the clickevent since i just copy pasted.
It seems really weird to me, why it wouldnt just work. I thought: Easy, basic clickevent LOL.

Thanks again for you’re helpful replies. Cheers