I have a simple function that would copy text to clipboard when a user click the Copy Link button, but i noticed that whenever i navigate to the page where i am supposed to copy the link from, it automatically gets copied, even if i havent clicked on the copy link button.

How do i stop this?

This is the code i wrote

<input readonly type="text" class="form-control w-50" value="{{ url_string }}" id="myInput" />
<!-- The button used to copy the text -->
<button onclick="myFunction()" id="copy-btn" class="btn btn-success">Copy Ref. Link</button>
<script>
    function myFunction() {
        /* Get the text field */
        var copyText = document.getElementById("myInput");

        /* Select the text field */
        copyText.select();
        copyText.setSelectionRange(0, 99999); /* For mobile devices */

        /* Copy the text inside the text field */
        navigator.clipboard.writeText(copyText.value);

        // Change button innerHTML Text
        document.getElementById("copy-btn").innerHTML = "Copied Successfully";

        /* Alert the copied text */
        // alert("Copied the text: " + copyText.value);
    }
</script>