Gibt es eine Möglichkeit, mehrere HTML-Tags mit Javascript zu verstecken?

Question

Ich frage mich, ob es eine einfache Möglichkeit gibt, HTML-Elemente mit Javascript umzuschalten? Ich habe ein paar Ascii-Kunstwerke für eines meiner Projekte, die ich mache, ich brauche eine effiziente Möglichkeit, es ein- und auszublenden, ohne die gleiche Zeile millionenfach zu wiederholen.

Dies ist ein kleiner Ausschnitt des betreffenden Code:

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 */ 
} 

Wie Sie sehen, es ist wirklich klobig und riesig. Ich habe versucht, die ID in eine Variable setzen und sie von innen die Funktionen wie folgt aufrufen:

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

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

Aber das wäre aus irgendeinem Grund nicht funktionieren. Irgendwelche Ideen würden sehr geschätzt werden.

Answer 1

Während ich mit den commen zustimmen, dass Sie Klassen für diese Verwendung werden sollte, ist die Antwort auf Ihre Frage, die Sie getElementById anrufen, wenn Sie noch document.getElementById anrufen müssen

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>