Не срабатывает скрипт при нажатии

Question

Не срабатывает скрипт при нажатии

Рейтинг: 1Ответов: 1Опубликовано: 23.06.2023

Есть сам документ, при выборе в полях должен копироваться текс. Сама страничка

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Копирование</title>
        <script src="copyscript.js"></script>
    </head>

    <body>
        <h1>Поля откуда брать</h1>
        
        <select id="select">
            <option value="#продажа ">#продажа </option>
            <option value="logic">#логика </option>
            <option value="value3">Option 3</option>
          </select>

          <input type="text" id="date" placeholder="дд.мм.гггг" pattern="[0-9][0-9].[0-9][0-9].[0-9][0-9][0-9][0-9]" maxlength="10"/>
          <select id="clock1">
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
          </select>

          <select id="clock2">
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
          </select>

          
          <textarea id="textarea"></textarea>
     

          <button id="copy-values-btn">Copy values</button>


        
    </body>
</html>

И скрипт который и должен делать это копирование

    function buttonClickHandler(event) {
    event.preventDefault();
    copyValues();
    }
     var copyButton = document.getElementById("copy-values-btn");
    copyButton.addEventListener("click", buttonClickHandler);

function copyValues() {
    var selectValue = document.getElementById("select").value;
    var textareaValue = document.getElementById("textarea").value;
    var dateValue = document.getElementById("date").value;
    var clock1Value = document.getElementById("clock1").value;
    var clock2Value = document.getElementById("clock2").value;

    var combinedValue = selectValue + " " + dateValue + " " + clock1Value + - + clock2Value + "\n" + textareaValue;

    navigator.clipboard.writeText(combinedValue);

    alert("Values copied successfully!");
}

Когда я сам скрипт указывал в документе, и делал привязку кнопки через

<button onclick="copyValues()">Copy values</button>

Все отлично работало, но есть необходимость вынести скрипт в отдельный фаил, и видимо я не справился с привязыванием кнопки. Подскажите , что я сделал не так.

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Для этого вам нужно подключать скрипт не в head, а в body:

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Копирование</title>
        <!-- Тут я убрал подключение скрипта -->
    </head>

    <body>
        <h1>Поля откуда брать</h1>
        
        <select id="select">
            <option value="#продажа ">#продажа </option>
            <option value="logic">#логика </option>
            <option value="value3">Option 3</option>
          </select>

          <input type="text" id="date" placeholder="дд.мм.гггг" pattern="[0-9][0-9].[0-9][0-9].[0-9][0-9][0-9][0-9]" maxlength="10"/>
          <select id="clock1">
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
          </select>

          <select id="clock2">
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
          </select>

          
          <textarea id="textarea"></textarea>
     

          <button id="copy-values-btn">Copy values</button>


          <!-- Тут я добавил подключение скрипта -->
          <script src="copyscript.js"></script>
    </body>
</html>

Проблема в том, что когда вы подключаете скрипт в head, DOM-элементы ещё не загрузились, и JavaScript не может найти элемент.

Не срабатывает скрипт при нажатии

Ответы