Пытаюсь добавить кнопку копировать в Django

Question

Программа генерирует пароль. Нужна кнопка рядом с сгенерированным паролем "Копировать", после нажатия которой пароль копируется в буфер обмена.

Кнопку добавил, добавил скрипт JS в отдельный файл main.js (как он работает я не понимаю, я по питону больше). Скрипт лежит в папке static. Django 4. Python 3.10

settings.py

STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / 'password_generator_project/static/',]

password.html (тут сгенерированный пароль)

{% load static %}
<head>
<script src="{% static '/main.js' %}"></script>
</head>
<div class="container text-center">
<br>
    <h1>Your password is:</h1>
    <br>
    <h2 class="alert alert-success">{{ password }}</h2>
    <br>
    <button id="copy-button" class="btn btn-primary">Copy</button>
    <a href="{% url 'home' %}" class="btn btn-warning">Home</a>
<div>

main.js

console.log('JavaScript code loaded');

const copyButton = document.getElementById('copy-button');
const passwordField = document.querySelector('.alert-success');
copyButton.addEventListener('click', () => {
  navigator.clipboard.writeText(passwordField.textContent);
  copyButton.textContent = 'Copied!';
  setTimeout(() => {
    copyButton.textContent = 'Copy';
  }, 2000);
});

При нажатии кнопки ничего не происходит. Пробовал в разных браузерах.

Понимаю что просто не выполняется скрипт, но визуально вроде все подключено и прописано, ошибок никаких нет. При нажатии кнопки консоль JS в хроме ничего не дает.

Answer 1

Копирование в БО таким способом - асинхронное действо.

Вот работающий пример

JS

document.querySelector('button').addEventListener('click', _ => {
  navigator.clipboard.writeText('Превед, медвед!')
    .then(() => {
      console.log('Получилось!');
    })
    .catch(err => {
      console.log('Ошибка копирования', err);
    });
})

HTML

<button>Тест</button>

Более подробно в этой статье https://habr.com/ru/company/ruvds/blog/358494/

Answer 2

Решил по другому, без создания отдельного файла со скриптом Прописал скрип с функцией прямо в html файле и вызвал onclick кнопкой

<script>
    function copyToClipboard() {
        const passwordText = document.querySelector('.alert.alert-success').innerText;
        navigator.clipboard.writeText(passwordText)
            .then(() => {
                alert(`Получилось!`);
            })
            .catch(err => {
                console.error('Ошибка копирования', err);
            });
    }
</script>

Правда теперь браузер почему-то просит подтвердить действие в всплывающем окне, но это видимо, особенность хрома

БЛОГ НА HUSL

Пытаюсь добавить кнопку копировать в Django

Ответы (2 шт):