Как изменить содержимое по клику?

Question

[Alex Goncharov]

Добрый вечер, коллеги. Не силен в JS, поэтому задаю нубский вопрос.

В сайдбаре есть блок, в котором выводятся произвольные цитаты с сайта forismatic.com


Вот код, который отвечает за вывод цитаты:

<script type="text/javascript">
function parseQuote(response) {
    document.getElementById("quote").innerHTML = response.quoteText;
    document.getElementById("author").innerHTML = response.quoteAuthor;
}
</script>

<div class="rocketquote" onclick="parseQuote(response)">
 
        <p id="quote"></p><br>
        <p style="font-style: normal" id="author"></p>

</div>
            
<script type="text/javascript" src="https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=parseQuote"></script>

Цитата обновляется каждый раз при обновлении страницы.

Как сделать, чтобы содержимое (цитата, автор) подгружались по клику на саму цитату?

Гуглил по fetch, xhr – не вкурил, прошу прощения.

Помогите, люди добрые.

Comments

[ой всё]

а на что вы собрались кликать, если цитата еще не подгружена?
или зачем повторно загружать ту же цитату по клику, если она уже есть?
а главное, кто будет кликать )))))

Answer 1

[Роман Александрович]

https://codepen.io/anon/pen/veXrdX?editors=1010

Comments

[Alex Goncharov]

Супер! Спасибо! То, что нужно!

Answer 2

[Kovalsky]

Первая попавшаяся ссылку в гугле - https://codepen.io/dting/pen/PqrZgb