javascriptで複数のhtmlタグを隠す方法はありますか？

Question

JavascriptでHTML要素を切り替える簡単な方法があるのでしょうか？私が作っている私のプロジェクトの一つのためにアスキーアートをたくさん持っています。百万回同じ行を繰り返すことなく、表示/非表示に効率的な方法が必要です。

これは、問題のあるコードの小さなスニペットです：あなたが見ることができるように

function dagger(){ 
    document.getElementById("short").style.display = "none"; 
    document.getElementById("long").style.display = "none"; 
    document.getElementById("broad").style.display = "none"; 
    document.getElementById("choose").style.display = "none"; 
    /* all the stats and modifiers go here */ 
} 

function short(){ 
    document.getElementById("dagger").style.display = "none"; 
    document.getElementById("long").style.display = "none"; 
    document.getElementById("broad").style.display = "none"; 
    document.getElementById("choose").style.display = "none"; 
    /* all the stats and modifiers go here */ 
} 

function long(){ 
    document.getElementById("short").style.display = "none"; 
    document.getElementById("dagger").style.display = "none"; 
    document.getElementById("broad").style.display = "none"; 
    document.getElementById("choose").style.display = "none"; 
    /* all the stats and modifiers go here */ 
} 

function broad(){ 
    document.getElementById("short").style.display = "none"; 
    document.getElementById("long").style.display = "none"; 
    document.getElementById("dagger").style.display = "none"; 
    document.getElementById("choose").style.display = "none"; 
    /* all the stats and modifiers go here */ 
} 

、それは本当に不格好と巨大です。 idを変数に設定して、次のような関数内から呼び出そうとしました。

var dagger = getElementById("dagger"); 
var short = getElementById("short"); 

function dagger(){ 
    short.style.display = "none"; 
} 

しかし、それは何らかの理由で機能しません。どんなアイデアでも大歓迎です。

Answer 1

私はあなたがこのためにクラスを使用する必要がありますコメンターに同意しながら、あなたの質問への答えはあなたがまだどれdocument.getElementById

var long = function() { 
 
    document.getElementById("short").style.display = "none"; 
 
    document.getElementById("long").style.display = "none"; 
 
    document.getElementById("broad").style.display = "none"; 
 
    document.getElementById("choose").style.display = "none"; 
 
    /* all the stats and modifiers go here */ 
 
} 
 

 
var short = document.getElementById("short"); 
 

 
var dagger = function() { 
 
\t short.style.display = "none"; 
 
}

<div id="short">short</div> 
 
<div id="long">long</div> 
 
<div id="broad">broad</div> 
 
<div id="choose">choose</div> 
 

 
<button onclick="long()">long</button> 
 
<button onclick="dagger()">dagger</button>