时间戳

首页 > 解决方案 > Vanilla JS addEventListener 在选择上的更改仅触发一次

javascript - Vanilla JS addEventListener 在选择上的更改仅触发一次

问题描述

我正在使用一个电子商务系统，我无法访问 HTML 代码或任何东西，但我可以添加自定义 JS 代码来更改一些东西和 CSS。我需要编辑适合 Doba dodania 文本的运输信息文本。我的问题是该事件仅触发一次，而不是在每个选择更改事件上触发。有人可以帮我为什么它只发射一次吗？也需要添加 SetTimeOut。请在此处查看页面和控制台日志： https ://www.privlacuj.sk/Hacik-Offset-Light-Class-AT-21-cena-za-1ks-d2336_1013278452.htm

我的代码是：

<script type="text/javascript">

function change_doba_dodania() {
var c757_counter = document.querySelectorAll(".c757").length;
var variant = document.querySelectorAll(".c755.variant").length;
var out_of_stock = document.querySelectorAll(".c757.out-of-stock").length;
console.log(c757_counter);
console.log(variant);
console.log(out_of_stock);

if (out_of_stock > 0) {
    console.log("Nincs raktaron");
}

if ( ( c757_counter >= 2 ) && ( out_of_stock == 0 ) ){
    var dd_text = document.getElementsByClassName("c757")[1].innerHTML;
    console.log(dd_text);
    var dd_text_array = dd_text.split(" ");
    var dd_final = dd_text_array.filter(String);
    console.log(dd_final);

    if (dd_final[2] == "zajtra") {
        document.getElementsByClassName("c757")[1].innerHTML = dd_final[6] + " " + dd_final[7] + " " + dd_final[8] + " " + dd_final[9] + " " + dd_final[10] + " a Vaša zásielka bude expedovaná už " + dd_final[2];
    } else {
        document.getElementsByClassName("c757")[1].innerHTML = dd_final[6] + " " + dd_final[7] + " " + dd_final[8] + " - " + dd_final[9] + " a Vaša zásielka bude expedovaná už " + dd_final[2];
    }
}
}



window.addEventListener('DOMContentLoaded', (event) => {
change_doba_dodania();
});

var variant = document.querySelectorAll(".c755.variant").length;

if (variant > 0){
document.querySelector('.c757 select').addEventListener('change', function() 
{setTimeout(change_doba_dodania, 1500)});

document.querySelector('.c757 select').addEventListener('change',() => 
    setTimeout(console.log, 1000, "Changed")
) 
}

标签： javascriptaddeventlistener

解决方案

如果我有你的问题，你的问题是querySelector。

querySelector只选择具有给定类名的第一个元素。如果要选择具有给定类名的所有元素，则应使用querySelectorAll.

document.querySelectorAll(".c757 select").forEach(select => {
    select.addEventListener(...)
})

推荐阅读