trouver un nom d'identification d'une classe lors de l'utilisation d'un écouteur d'événement

Question

permet de dire que j'ai 2 boutons verticaux sur le côté gauche:

<div class="button" id="files" >files</div> 
<div class="button" id="dirs">dirs</div>  

quand on est cliquée, je veux mettre la case correspondante à côté (en ligne)

<div class="commands_group" id="files_commands">file commands</div> 
<div class="commands_group" id="dirs_commands">dir commands</div> 

J'ai commencé en ajoutant un écouteur d'événement à chaque bouton:

window.onload = init; 

function init() 
{ 
    'use strict'; 
    var classname = document.getElementsByClassName("button"); 

    for(var i=0;i<classname.length;i++) 
    { 
     classname[i].addEventListener('click', show_commands(), false); 
    } 
} 

ce qui est bien. Mais maintenant je veux mettre la boîte correspondante en ligne, c'est-à-dire si le bouton des fichiers a été cliqué, files_commands doit passer de display: none à afficher: inline.

Je ne parviens pas à sélectionner la case correspondante

mon code actuel est:

function show_commands() 
{ 
    'use strict'; 

    var classname = document.getElementsByClassName("commands_group"); 
    for(var i=0;i<classname.length;i++) 
    {  
     classname[i].style.display = 'none';  
    } //just to reset the view to nothing 

le soufflet doit être la partie principale (et est la base de ma question) mais je ne ne sais pas comment sélectionner l'id spécifique du groupe de commandes

var name = this.id.stringValue.concat("_commands"); 
    document.getElementById(name).style.display = 'inline'; 

} 

Answer 1

est ce que vous avez voulu?

var name = this.id.stringValue.concat("_commands"); 

cette ligne devrait être var name = this.id.concat("_commands");

window.onload = init; 
 

 
function init() 
 
{ 
 
    'use strict'; 
 
    var classname = document.getElementsByClassName("button"); 
 

 
    for(var i=0;i<classname.length;i++) 
 
    { 
 
     classname[i].addEventListener('click', show_commands, false); 
 
    } 
 
} 
 

 
function show_commands() 
 
{ 
 
    'use strict'; 
 

 
    var classname = document.getElementsByClassName("commands_group"); 
 
    for(var i=0;i<classname.length;i++) 
 
    {  
 
     classname[i].style.display = 'none';  
 
    } //just to reset the view to nothing 
 

 
    var name = this.id.concat("_commands"); 
 
    document.getElementById(name).style.display = 'inline'; 
 

 
}

<div class="button" id="files" >files</div> 
 
<div class="button" id="dirs">dirs</div>  
 

 
<div class="commands_group" id="files_commands">file commands</div> 
 
<div class="commands_group" id="dirs_commands">dir commands</div>