Question

有一个页面，我试图将onclick事件附加到页面上的按钮（“ SEARCH CRUISES”）上，但是onclick事件无法正确触发。这是我的代码：

<script>
debugger;
var x = document.getElementsByClassName("cdc-filters-search-cta")

for (i=0; i< x.length; i++){
    if(x[i].text.trim().indexOf("SEARCH") >= 0 &&  x[i].text.trim().indexOf("CRUISES") >= 0){
        x[i].onclick = function(){
            console.log("Search button clicked");           
        };
        break;
    }   
}

以下是完整的html：https://jsfiddle.net/g0tkqrx6/

我尝试以多种不同方式将onclick事件附加到对象，但是无法触发click事件。如果有人可以提供我在这里做错什么的见解，我将不胜感激。

预先感谢

Answer 1

必须对元素文本使用textContent并将其大写。

这里是一个示例：

var x = document.getElementsByClassName("cdc-filters-search-cta")

for (var i=0; i< x.length; i++){
    var  element = x[i]  ;
    if((element.textContent ).toUpperCase().indexOf("SEARCH") >= 0 &&  element.textContent.toUpperCase().indexOf("CARS") >= 0){
        element.onclick = function(){
            console.log("Search button clicked");           
        };
        break;
    }   
}

<button class="cdc-filters-search-cta"> SEARCH</button>
<button class="cdc-filters-search-cta"> CARS</button>
<button class="cdc-filters-search-cta">SEARCH CARS</button>

Answer 2

查看您的html会有所帮助。确保您使用正确的js事件名称进行交互。

Answer 3

首先，我认为您真的应该看一下这篇文章，了解为什么不应该添加内联函数或CSS。 https://www.tomdalling.com/blog/coding-styleconventions/why-inline-comments-are-generally-a-bad-idea/

第二，我认为您的问题是您试图将click事件添加到由ngModel控制的有角前端中，而且该网站可能是AOT编译的。但是，您可以尝试使用

    let x = document.querySelectorAll('.cdc-filters-search-cta');

    let term = /[(SEARCH)(CRUISES)]/

    x = Array.from(x);

    x.forEach(span => {
        if (term.test(span.textContent)) {
            return span.addEventListener('click', (e) => {
                console.log('span clicked')
            });
        }

    })

我将您的代码更改为querySelectorAll，它返回一个数组，并且我使用了forEach循环来添加一个eventListener。不确定会随着角度的变化而下降，但是也许。

按钮OnClick事件未触发

3 个答案: