How to add a click event on input tag

Martin11231
New Member
8 0 0

<div class="search-bar__input-wrapper">
<input class="search-bar__input" type="text" name="q" autocomplete="off" autocorrect="off" aria-label="{{ 'header.search.input_placeholder' | t }}" placeholder="{{ 'header.search.input_placeholder' | t }}" id="btn">
<button type="button" class="search-bar__input-clear hidden-lap-and-up" data-action="clear-input">{% render 'icon', icon: 'close' %}</button>
</div>Snipaste_2023-11-30_11-24-19.png

 

</style>

<script>
document.documentElement.style.setProperty('--header-height', document.getElementById('shopify-section-{{ section.id }}').clientHeight + 'px');
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
// 判断是移动端时,引入移动端模板


}

var btn = document.getElementById('btn');
console.log(btn);
btn.onclick = function(){
console.log("hello word");
}


</script>

 

Snipaste_2023-11-30_11-31-20.png

 

Snipaste_2023-11-30_11-32-11.png

 

The click event does not seem to bind successfully, liquid this kind of file how to bind the click event, please advise everyone, thank you!

 

Replies 3 (3)

theycallmemakka
Shopify Partner
1158 249 269

Please try this code once and see if the event is working.

btn.addEventListener('click', function(){
    console.log('working')
})

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store
Martin11231
New Member
8 0 0

var btn = document.getElementById('btn');
console.log(btn);
btn.addEventListener('click', function(){
console.log('working')
})

 

It still doesn't work. It doesn't print "working."Snipaste_2023-11-30_13-56-28.png

theycallmemakka
Shopify Partner
1158 249 269

can you give link to the page that has the button?

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store