TypeError：无法读取Null的属性（读取＆＃x27; addeventListener＆＃x27;）JavaScript

发布于 2025-01-25 00:06:07 字数 870 浏览 2 评论 0 原文

我正在尝试添加一个按钮，但它向我显示了这个错误。这是我的HTML代码

<div card-container>
        <template class="mainTemplate">
            <div class="cards">
                <div class="card">
                    <img data-image src="" alt="">
                    <div data-title class="header"></div>
                    <div data-body class="body"></div>
                    <button data-button class="btn">read more</button>
                    <p data-paragraph class="fullText"></p>
                </div>
                

            </div>
        </template>
    </div>

，这是JavaScript代码

  let showDitail = document.querySelector(".btn");
showDitail.addEventListener("click", showMore);


function showMore(){
    alert("e")
}

原文

I am trying to add a button but it is showing me this error.
here is my html code

<div card-container>
        <template class="mainTemplate">
            <div class="cards">
                <div class="card">
                    <img data-image src="" alt="">
                    <div data-title class="header"></div>
                    <div data-body class="body"></div>
                    <button data-button class="btn">read more</button>
                    <p data-paragraph class="fullText"></p>
                </div>
                

            </div>
        </template>
    </div>

here is the javascript code

  let showDitail = document.querySelector(".btn");
showDitail.addEventListener("click", showMore);


function showMore(){
    alert("e")
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猥琐帝 2025-02-01 00:06:07

您使用的是＆lt; template＆gt; 标签，该标签是保存HTML标记的元素，但未在页面加载上渲染。
为了渲染其内容，必须使用javaScript来处理＆gt; 元素，使用HTML结构作为 - 实际上 - 用于填充另一个结构的模板（表格，divs divs grid，a divs grid，a divs grid，a ETC。）。

由于＆lt; template＆gt; 的子元素尚未属于DOM的一部分， let showditail = document.queryselector（“。btn”）; 将导致 > null 。这就是为什么您无法将事件绑定到它的原因。

将标签更改为其他东西（也许是 div ），或者通过JavaScript正确处理模板。

let showDitail = document.querySelector(".btn");
showDitail.addEventListener("click", showMore);


function showMore(){
    alert("e")
}

<div card-container>
    <div class="mainTemplate">
        <div class="cards">
            <div class="card">
                <img data-image src="" alt="">
                <div data-title class="header"></div>
                <div data-body class="body"></div>
                <button data-button class="btn">read more</button>
                <p data-paragraph class="fullText"></p>
            </div>
        </div>
    </div>
</div>

You're using the <template> tag, which is an element that holds html markup but it's not rendered on page load.
In order to render its contents, one has to handle the <template> element via javascript, using the html structure as - in fact - a template for filling another structure (a table, a divs grid, etc.).

Since the sub-elements of <template> are not part of the DOM yet, let showDitail = document.querySelector(".btn"); will result in null. That's why you cannot bind events to it.

Either change the tag to something else (a div maybe), or handle the template properly via javascript.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

let showDitail = document.querySelector(".btn");
showDitail.addEventListener("click", showMore);


function showMore(){
    alert("e")
}

<div card-container>
    <div class="mainTemplate">
        <div class="cards">
            <div class="card">
                <img data-image src="" alt="">
                <div data-title class="header"></div>
                <div data-body class="body"></div>
                <button data-button class="btn">read more</button>
                <p data-paragraph class="fullText"></p>
            </div>
        </div>
    </div>
</div>

回复收藏 0 原文

~没有更多了~