有没有办法用javascript隐藏多个html标签？

Question

我想知道是否有任何简单的方法来切换JavaScript元素的HTML元素？我为我的一个项目制作了一堆ascii艺术品，我需要一种有效的方式来显示/隐藏它，而不用重复同一行数百万次。

这是有问题的代码的一个小片段：

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

虽然我与你应该使用类此的评论者同意，在回答你的问题是，你是叫getElementById，当你需要还叫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>