I have a list of containers and I want to add a button that display a terminal on the container where we clicked on the terminal logo.
But I don't how to catch the index of the container in the list.
My HTML is :
<li class="liContainer">
<div>
<h3>{{nameContainer}}</h3>
</div>
<div id="idContainer">
<span>ID: {{idContainer}}</span>
</div>
<div id="stateContainer">
<span class="state">State: {{stateContainer}}</span>
</div>
<div id="terminalContainer" class="hidden">
<div class="terminal hidden"></div>
</div>
<button type="button" class="stop {{#if to_hide_stop}}hidden{{/if}}"> </button>
<button type="button" class="start {{#if to_hide_start}}hidden{{/if}}"> </button>
<button type="button" class="pause {{#if to_hide_pause}}hidden{{/if}}"></button>
<button type="button" class="unpause {{#if to_hide_unpause}}hidden{{/if}}"> </button>
<button type="button" class="cmdLogs"> terminal </button>
</li>
And my JS :
'click .cmdLogs'(event) {
Session.set("displayCmdLogs",true);
//here I need to do something to get the ID with the event and then I could do...
setTimeout(function(){
var term = new Terminal();
console.log("term: " + term);
//.. the getElement on the right one
term.open(document.getElementsByClassName('terminal')[idFromEvent]);
//term.fit();
term.write('Hello from container.js');
},200);
}
I'm assuming the id you want to catch is "idContainer". I'd modify your HTML as follows :
<li class="liContainer">
<div>
<h3>{{nameContainer}}</h3>
</div>
<div id="idContainer">
<span>ID: {{idContainer}}</span>
</div>
<div id="stateContainer">
<span class="state">State: {{stateContainer}}</span>
</div>
<div id="terminalContainer" class="hidden">
<div class="terminal hidden"></div>
</div>
<button type="button" class="stop {{#if to_hide_stop}}hidden{{/if}}"> </button>
<button type="button" class="start {{#if to_hide_start}}hidden{{/if}}"> </button>
<button type="button" class="pause {{#if to_hide_pause}}hidden{{/if}}"></button>
<button type="button" class="unpause {{#if to_hide_unpause}}hidden{{/if}}"> </button>
<button type="button" class="cmdLogs" id="{{idContainer}}"> terminal </button>
</li>
And you js :
'click .cmdLogs'(event, template) {
Session.set("displayCmdLogs",true);
var id = event.currentTarget.id; //The id is here
setTimeout(function(){
var term = new Terminal();
console.log("term: " + term);
//.. the getElement on the right one
term.open(document.getElementsByClassName('terminal')[idFromEvent]);
//term.fit();
term.write('Hello from container.js');
},200);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.