单击事件以删除和刷新div内容

问题描述

作为JS领域的新手，我有一个与基本Quote Generator程序的click事件有关的问题。这个想法是，单击“ .generate”按钮后，“ taskEl”段中出现的内容将被删除并使用下一个随机生成的引号进行刷新。谢谢您的帮助。

<body>
    <div class="card">
        <button type ="button" class="generate">Generate Quote</button>
    </div>

<script>
    
    const quote = document.querySelector('.generate');
    const card = document.querySelector('.card');

    const myQuotes = ['It was the best of times,it was the worst of times','To the victor belong the spoils','Float like a butterfly,sting like a bee','No man is an island'];

    const people = ['Charles Dickens','William marcy','Muhammad Ali','John Donne'];

    quote.addEventListener('click',getQuote);
  
    function getQuote() {

        const taskEl = document.createElement('p');
        const taskEl2 = document.createElement('p');
        let random = Math.floor(Math.random() * myQuotes.length);
        
        taskEl.className = 'outputBox';
        taskEl.appendChild(document.createTextNode(myQuotes[random]));
        card.appendChild(taskEl);
        
        taskEl2.className = 'sourceBox';
        taskEl2.appendChild(document.createTextNode(people[random]));
        card.appendChild(taskEl2);
        
    };
    getQuote();
    
</script>

解决方法

我建议您将click属性放在html元素内，如下所示：

<button type ="button" class="generate" onclick="getQuote()">Generate Quote</button>

要引用段落的内容，请使用innerText。

taskEl.innerText = 'some random quote';

onclick refresh