Ndtyjky

Please refer to my previous question: How to get element in template html?.

Firstly, I follow the solution in How to get element in template html? to obtain the element.

var template = templateContent.content;

Then I try to bind a click event for searchBtn:

searchBtn.addEventListener('click', function() {

    console.log('click'); // does not work

});

This binding fails, so I use the event delegation to handle event:

document.addEventListener('click',function(e){

    if(e.target && e.target.id== 'searchBtn'){

        console.log('click');

        console.log(template.querySelector('#results'));

        template.querySelector('#results').innerText = 'Foo';

    }

 });

The two logs are expected, but the last command to update the innerText does not work. On the other hand, I can update its content outside the click event. Any solution?

The final version of my code:

var link = document.querySelector('link[rel="import"][href="search.html"]');

var templateContent = link.import.querySelector('template');

var template = templateContent.content;

var searchBtn = template.querySelector('#searchBtn'); 

console.log(searchBtn); 

template.querySelector('#results').innerText = 'Bar'; // ok



document.addEventListener('click',function(e){

    if(e.target && e.target.id== 'searchBtn'){

        console.log('click'); // ok

        console.log(template.querySelector('#results')); // ok

        template.querySelector('#results').innerText = 'Foo'; // does not work

    }

 });

Updates

Now I retrieve the results element outside the function:

var results = template.querySelector('#results');

Then inside the function, results.innerText = 'Foo'; works. However, this only updates the results itself, and the UI is not updated correspondingly.

How to update the UI inside the template?

You got it right, it is the binding issue. template is not available inside click function. You need to bind this. There are many ways to do this e.g.

document.addEventListener('click',onClick.bind(this));





 onClick = function(e){

    if(e.target && e.target.id== 'searchBtn'){

        console.log('click'); // ok

        console.log(template.querySelector('#results')); // ok

        this.template.querySelector('#results').innerText = 'Foo'; // should work

    }

 }

There are many ways to get the HTML elements

You can get use

var sbtnElement = document.getElementById('searchBtn');

then add eventlistener to it

sbtnElement.addEventlistener('click', function() {

   console.log('click'); // does not work

});

Naturally getElement by id will give you one element, and getElementsByClassName will return you an array of elements with the same classname. Same goes for getElementsByTagName.

hi i don't know what are you try to create for. but have you ever try to use template in script ? like this one

<script id="sampleTemplate" type="text/template">

   // do the html here

</script>

So in that case you can bind event using that one. just a normal creating of html and binding javascript function.

You can refer to this blog. https://jonsuh.com/blog/javascript-templating-without-a-library/

I hope, i helped you thru this. :)