クリップボードから情報を取得し、マウスホバーで表示、ボタン押下でページ遷移する

実際の動作

コード

<div class="contentbox">
            <button id="readClipboard">PUSH</button>
            <p id="clipboardContent" type="text"></p>
        </div>
<script>
const clipboardContent = document.getElementById("clipboardContent");

        // ボタン上にホバーしたときにクリップボードから情報を取得
        document.querySelector("#readClipboard").addEventListener("mouseover", async () => {
            try {
                const text = await navigator.clipboard.readText();
                clipboardContent.textContent = text; // 取得したテキストを表示
            } catch (err) {
                clipboardContent.textContent = "クリップボードの取得に失敗しました。";
            }
        });

        // ボタンをクリックしたときに指定のページに遷移
        document.getElementById("readClipboard").addEventListener("click", async () => {
            const targetUrl = "https://google.com"; // 遷移先のURLを指定
            window.location.href = targetUrl; // ページ遷移
        });
</script>