I don't have any experience or knowledge about coding.
I'm trying to create a card with a quote for a WordPress blog post.
There is a button on the card that allows the user to copy the quote directly to the clipboard.
I would also like to copy the hyperlink: (Source) to my website.
I've been running this code through GPT and rewriting. But every time it only copies the text and doesn't even try to copy the URL.
I've attached the code below in hopes someone can help because I'm driving crazy.
<style> .card-box { max-width: 400px; margin: 0 auto; padding: 20px; background-color: #ffffff; border-radius: 8px; border: 2px solid #0077B5; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; } .quote { margin-bottom: 20px; } .quote p { font-size: 18px; line-height: 1.4; color: #333333; } .quote a { display: block; margin-top: 10px; font-size: 14px; color: black; text-decoration: none; } .copy-to-clipboard { margin-bottom: 20px; } .copy-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px; font-size: 16px; line-height: 1; color: #ffffff; background-color: #0077B5; border: 2px solid #0077B5; border-radius: 4px; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .copy-btn i { margin-right: 5px; } .signature { margin-top: 20px; font-size: 12px; font-style: italic; color: #777777; } </style> <div class="card-box"> <div class="quote"> <p id="quoteText">在這里輸入您的引用或統(tǒng)計數(shù)據(jù)</p> <a id="sourceLink" href="https://www.example.com">來源</a> </div> <div class="copy-to-clipboard"> <button class="copy-btn" onclick="copyToClipboard()"><i class="fas fa-copy"></i> 復(fù)制統(tǒng)計數(shù)據(jù)</button> </div> <div class="signature"> <p>Chad Wyatt</p> </div> </div> <script> function copyToClipboard() { const quote = document.querySelector('#quoteText').textContent; const sourceLink = document.querySelector('#sourceLink').getAttribute('href'); const copiedText = `引用:${quote}\n來源:${sourceLink}`; const tempTextArea = document.createElement('textarea'); tempTextArea.value = copiedText; document.body.appendChild(tempTextArea); tempTextArea.select(); document.execCommand('copy'); document.body.removeChild(tempTextArea); alert('帶有來源鏈接的引用已復(fù)制到剪貼板!'); } </script>
I tried your code here https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
Works fine for me.