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

Question

[Alex Goncharov]

Есть цитата, которая подгружается с сайта Forismatic.

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

<script type="text/javascript">
        function parseQuote(response)
        {
            document.getElementById("quote").innerHTML = response.quoteText;
            document.getElementById("author").innerHTML = response.quoteAuthor;
        }
    </script>
        
        <script type="text/javascript" src="https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=parseQuote"></script>

            <div class="rocketquote" style="padding: 20px; opacity: 0.3; font-style: italic; cursor: pointer;">
                <a href="" onclick=""> 
                    <p id="quote"></p><br>
                    <p style="font-style: normal" id="author"></p>
                </a>

            </div>

Answer 1

[0xD34F]

Так:

<div id="quote_text"></div>
<button id="get_quote">Get quote</button>

const url = 'https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=parseQuote&lang=ru&key=';

document.querySelector('#get_quote').addEventListener('click', function() {
  const script = document.createElement('script');
  script.src = url + (Math.random() * 10e5 | 0);
  document.body.append(script);
});

function parseQuote(data) {
  document.querySelector('#quote_text').innerHTML = data.quoteText;
}

??

Comments

[Alex Goncharov]

Да, но внутри страницы – скрипт не работает. Выдает просто текстом кусок скрипта.

[0xD34F]

Какой страницы? Какой скрипт? Ничего не понимаю.

[Alex Goncharov]

Я вставляю скрипт в страницу сайдбара sidebar.html

https://monosnap.com/file/XHIz2OVVZ5Xg5KqbkLUBjQNn...

Просто кусок скрипта вылазит

[0xD34F]

Кажется понял. Тот огрызок сверху - это и есть "скрипт"? Ну тогда надо как-то так:

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

<div class="rocketquote" style="padding: 20px; opacity: 0.3; font-style: italic; cursor: pointer;">
    <a href="" onclick=""> 
        <p id="quote"></p><br>
        <p style="font-style: normal" id="author"></p>
    </a>
</div>
            
<script type="text/javascript" src="https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=parseQuote"></script>

Подключение внешнего скрипта надо делать после создания элемента, в который будет помещена цитата.

[Alex Goncharov]

0xD34F: в codepen работает, у меня на сайте - нет((

[0xD34F]

"На сайте" - это увидеть можно как-нибудь?

Answer 2

[McBernar]

div onClick = "parseQuote()"

Comments

[Alex Goncharov]

Это не работает.