获取Bootstrap使用JavaScript创建的元素

Question

我试图在JS中获取Bootstrap创建的元素，但它总是给我一个undefined响应。由于元素类似

<input class="form-control form-control-sm search-input" type="search" placeholder="Cerca" autocomplete="off">

所以没有ID，我试着使用类，如下所示：

window.addEventListener('load', function() {
console.log('loaded ' + document.getElementsByClassName("form-control-sm")[0])

})

但不起作用。有人能帮我吗？

Answer 1

JQuery Solution选择搜索栏：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<input type="text" class="form-control form-control-sm search-input" id="searchInput" placeholder="Search here..." />
<script>
$(".search-input").keyup(function() {
$(this).css("background-color", "#fefffa");
alert("Keyup func works!");
});
</script>

Answer 2

你说id属性不起作用，对此有什么解释吗？无论如何，这应该有效。。。

<input id="searchbar" class="form-control form-control-sm search-input" type="search" placeholder="Cerca" autocomplete="off">

JS:

window.addEventListener('load', (event) => {
document.getElementsById("searchbar");
});

在参数中使用双引号

注意：load事件将确保页面在获取元素之前已完全加载。。。