Попытка создать кнопку «Копировать» для моего сайта не работает. ⇐ CSS

[Anonymous]

`Backstory: I'm making a simple bibliography website and am struggling on the copy button. Even after using clipboardjs, the copy feature of the button isn't working.

I got so desperate to where I asked ChatGPT, and no matter what they suggest, I come up with the same result: it doesn't work! I was hoping someone on this website could help me. I will include my HTML, CSS, and JS below.

'use strict'; document.addEventListener('DOMContentLoaded', function () { var leftTextbox = document.getElementById('leftTextbox'); var inputTextArea = document.getElementById('inputTextArea'); var citationTextArea = document.querySelector('#rightTextbox textarea'); var copyButton = document.getElementById('copyButton'); // Add copy button reference leftTextbox.addEventListener('click', function () { this.classList.toggle('active'); }); inputTextArea.addEventListener('input', function () { this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px'; }); inputTextArea.addEventListener('keydown', function (event) { if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); citationTextArea.value += this.value + '\n'; this.value = ''; this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px'; } }); var clearButton = document.getElementById('clearButton'); clearButton.addEventListener('click', function () { citationTextArea.value = ''; }); // Initialize Clipboard.js var clipboard = new ClipboardJS(copyButton, { text: function() { return citationTextArea.value; } }); // Update success and error handling clipboard.on('success', function(e) { console.log('Text copied to clipboard:', e.text); }); clipboard.on('error', function(e) { console.error('Failed to copy text:', e.action); }); }); /* style.css */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f2f2f2; display: flex; flex-direction: column; height: 100vh; } header { background-color: #333; color: #fff; padding: 20px 0; text-align: center; } main { flex: 1; /* Allow main to take up remaining vertical space */ display: flex; justify-content: space-around; align-items: stretch; padding: 20px; } .textbox { width: 45%; background-color: #fff; display: flex; flex-direction: column; border: 2px solid #ddd; /* Set border width to 2px */ border-radius: 5px; padding: 10px; transition: border-color 0.3s; /* Add transition effect for border color */ position: relative; /* Add relative positioning */ } .textbox.active { border-color: black; border-width: 2px; /* Increase border width for active state */ } .textbox h2 { margin-top: 0; } .textbox-content { flex: 1; /* Allow textarea to take up remaining vertical space */ width: calc(100% - 20px); /* Adjust width for padding */ height: calc(100vh - 100px); /* Set height to fill remaining viewport height */ resize: none; border: none; outline: none; background-color: transparent; /* Set transparent background color for text area */ font-size: 16px; line-height: 1.5; overflow-y: auto; /* Add scrollbar when necessary */ } /* Add styles for the clear button container */ .textbox-action-buttons { display: flex; align-items: center; margin-bottom: 10px; /* Add margin at the bottom */ } /* Add styles for the clear button */ #clearButton, #copyButton { width: 30px; /* Set width of the button */ height: 30px; /* Set height of the button */ border: none; background-color: #ccc; color: #333; font-size: 20px; /* Increase font size for the symbol */ line-height: 1; cursor: pointer; margin-right: 5px; /* Add some spacing between the buttons */ } #clearButton:hover, #copyButton:hover { background-color: #999; color: #fff; } #clearButton { position: absolute; top: 10px; right: 5px; } #copyButton { position: absolute; top: 10px; right: 50px } Bibby.io Bibby.io Easy Use MLA Formatting Input Works Cited ⎘ ✖

I feel like I tried everything.


Источник: https://stackoverflow.com/questions/781 ... nt-working