Question

尝试在 HTML 页面中的 js 脚本中使用 window.onLoad() 时发生未捕获的 TypeError

2021-01-03

199

javascript html

我正在尝试为我的网站制作一个按钮，该按钮会将我的 discord 复制到用户剪贴板。在将其编码到我的网站之前，我在 JSFiddle 上尝试了它，它运行完美。但是，当我在 PC 上运行该页面时，控制台中出现以下错误： copyText.js:2 Uncaught TypeError: Cannot set property 'onclick' of null at window.onload (copyText.js:2) window.onload @ copyText.js:2 load (async) (anonymous) @ copyText.js:1

我的 HTML 页面的代码如下： `

<!DOCTYPE html>

<html>

    <head>
    
        <meta charset="utf-8">
        <title>pinkflamey.nl :)</title>
        <link rel="icon" href="icon.png">
        <link rel="stylesheet" href="styles/navigation.css">
        <link rel="stylesheet" href="styles/base.css">
        
    </head>
    
    <body>
    
        <h1 class="title">pinkflameinthepan's website!!</h1>
        <br>

        <div class="topnav">
            <a href="index.html">Home</a>
            <a href="blog/blog.html">Blog</a>
            <a class="active "href="contact.html">Contact</a>
            <a href="about.html">About</a>
        </div>
    
        <h1>Contact</h1>
        <br>
        <br>
        <h3>Discord</h3>
        <div>
            <button id="copy" value="pinkflameinthepan#2989" class="copybutton">
                <input type="image" src="images/discord.png">
                <script src="scripts/copyText.js"></script>
            </button>
        </div>
    
    </body>
    
</html>

`

而我的 js 是： `

window.onload = function(){
    document.getElementById('test!!!').onclick = function(){
        const text = document.getElementById("test!!!").value;
            console.log(text);
            navigator.clipboard.writeText(text).then(() => {
                alert('Text copied to clipboard');
            }).catch(err => {
                alert('Error in copying text: ', err);
            });
    }
}

`

我尝试在线寻找解决方案，但没有成功。我尝试将脚本放在 HTML 页面中，而不是放在单独的 .js 文件中，并将其移动到 <button> 之前和之后以及页面的开头，但这不起作用。

我希望有人能帮我找到解决方案！！

Answer 1

此行：

document.getElementById('test!!!').onclick

引发错误：

TypeError: Cannot set property 'onclick' of null

因为没有 id 为“test!!!”的 HTML 元素。

要修复错误，请将该行更改为：

document.getElementById('copy').onclick

Answer 2

文档中没有 ID 为“test!!!”的元素。这会导致 document.getElementById('test!!!') 返回 null ，这就是您收到错误的原因。如果您尝试处理按钮上的点击，则应使用：

document.getElementById('copy').onclick = function(){
    ...
}

Answer 3

我认为你的意思是：

document.getElementById('copy').onclick = function(){

iamdlm

2021-01-03