问为什么变量按钮被赋值为窗口对象，以及如何修复？
EN

Stack Overflow用户

提问于 2021-04-30 12:59:23

回答 3查看 56关注 0票数 0

我想在单击时分配带有按钮元素的const button= e.currentTarget;，但它是用窗口对象分配的，因此const container= button.parentNode;也不起作用。你能解决这个错误吗？我只提到按钮和容器所在的section元素。

     window.addEventListener("DOMContentLoaded", function(e) {
       const orderButtons = document.querySelectorAll("button[data-order]");
       orderButtons.forEach(function(button){

        window.addEventListener("click", function(e) {

            //button is assigned with window object, should be assigned clicked button
 
            const button= e.currentTarget; 
            const container= button.parentNode;

            const order={
                id: button.getAttribute("data-order"),
                title: container.querySelector(".title").innerText,
                price: container.querySelector(".price").innerText,
                desc: container.querySelector(".desc").innerText
            };
           
            localStorage.setItem("order", JSON.stringify(order));

            const url= window.location.href.replace("pies.html","order.html");
            window.location.href=url;
        });
       });
   });

    <section class="desktop-column">
             <div class="pie">
                 <img src="images/apple-pie.png" alt="Apple Pie">
                 <div class="columns">
                    <div class="title">Apple Pie</div>
                    <div class="price">300 ₹</div>
                 </div>
                 <p class="desc">Our famous pie.</p>
                 <button data-order="apple-pie">Order</button>
                </div>

                <div class="pie">
                    <img src="images/cherry-pie.png" alt="Cherry Pie">
                    <div class="columns">
                       <div class="title">Cherry Pie</div>
                       <div class="price">340 ₹</div>
                    </div>
                    <p class="desc">Our summer classic!.</p>
                    <button data-order="cherry-pie">Order</button>
                   </div>
         </section>

javascript

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-04-30 16:17:29

在上面的代码中，在window对象上调用了error is事件侦听器

window.addEventListener("click", function(e) {
const button= e.currentTarget; 
const container= button.parentNode;

这就是为什么当button被赋值时，窗口对象被赋值，而没有窗口对象的parentNode，这就是为什么container是undefined的原因。

           `const order={
            id: button.getAttribute("data-order"),
            title: container.querySelector(".title").innerText,
            price: container.querySelector(".price").innerText,
            desc: container.querySelector(".desc").innerText
        };`

由于container和button的值错误，getAttribute querySelector无法选择DOM元素，从而导致Uncaught TypeError

正确的代码片段-

button.addEventListener("click", function(e) {
        const button= e.currentTarget;
        const container= button.parentNode;
        const order={
            id: button.getAttribute("data-order"),
            title: container.querySelector(".title").innerText,
            price: container.querySelector(".price").innerText,
            desc: container.querySelector(".desc").innerText
        };
       });

票数 -1

Stack Overflow用户

发布于 2021-04-30 13:02:16

currentTarget是事件处理程序绑定到的元素。

您需要为最初在其上触发事件的元素提供纯target。

票数 1

Stack Overflow用户

发布于 2021-04-30 13:05:13

我认为你想要你按下的按钮的data-order：

window.addEventListener("DOMContentLoaded", function(e) {
       const orderButtons = document.querySelectorAll("button[data-order]");
       orderButtons.forEach(function(button){

        button.addEventListener("click", function(e) {

            //button is assigned with window object, should be assigned clicked button
            
            const container= this.parentNode;

            const order={
                id: this.getAttribute("data-order"),
                title: container.querySelector(".title").innerText,
                price: container.querySelector(".price").innerText,
                desc: container.querySelector(".desc").innerText
            };
           
            console.log(order);
        });
       });
   });

<section class="desktop-column">
             <div class="pie">
                 <img src="images/apple-pie.png" alt="Apple Pie">
                 <div class="columns">
                    <div class="title">Apple Pie</div>
                    <div class="price">300 ₹</div>
                 </div>
                 <p class="desc">Our famous pie.</p>
                 <button data-order="apple-pie">Order</button>
                </div>

                <div class="pie">
                    <img src="images/cherry-pie.png" alt="Cherry Pie">
                    <div class="columns">
                       <div class="title">Cherry Pie</div>
                       <div class="price">340 ₹</div>
                    </div>
                    <p class="desc">Our summer classic!.</p>
                    <button data-order="cherry-pie">Order</button>
                   </div>
         </section>