Javascript 切换网格显示（我缺少什么？）_Javascript_Css_Grid_Toggle_Display

Javascript 切换网格显示（我缺少什么？）

javascript css grid

Javascript 切换网格显示（我缺少什么？）,javascript,css,grid,toggle,display,Javascript,Css,Grid,Toggle,Display,编写了一些代码来切换是否显示图像网格。它是一个6x8网格，所以我没有在这里包含72个div元素。当图像网格未显示时，文本列表可见。因此，按钮文本发生了变化。找不到任何错误 <!DOCTYPE html> <html> <head> <style> #photo-index { display: grid; grid-template-columns: auto auto auto auto auto auto; grid-gap: 0p

编写了一些代码来切换是否显示图像网格。它是一个6x8网格，所以我没有在这里包含72个div元素。当图像网格未显示时，文本列表可见。因此，按钮文本发生了变化。找不到任何错误

<!DOCTYPE html>
<html>
<head>
<style>
#photo-index {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 0px;
  background-color: #4f6b6f;
}
#toggle-button {
    color: white;
    background-color: rgba(0,0,0,.75);
    border-radius: 3px;
    text-align: center;
    padding: 15px;
    margin: auto;
    position: absolute;
    right: 5%;
    cursor: pointer;
}
</style>    
<script>
function toggleDisplay() {
    var pi = document.getElementById('photo-index');
    var displaySetting = pi.style.display;
    var toggle-button = document.getElementById('toggle-button');
    var showTaxonomy = 'Show Taxonomy';
    var showImages = 'Show Images';
    if (displaySetting == 'none') {
    pi.style.display = 'grid';
    toggle-button.innerHTML = showImages;
    }
    else {
    pi.style.display = 'none';
    toggle-button.innerHTML = showTaxonomy;
    }
}
</script>
</head>
<body>
<div onclick="toggleDisplay()" id="toggle-button">Show Taxonomy</div>
<div id="photo-index">Large Grid of Stuff</div>
</body>
</html>


#照片索引{
显示：网格；
网格模板列：自动；
栅隙：0px；
背景色：#4f6b6f；
}
#切换按钮{
颜色：白色；
背景色：rgba（0,0,0,75）；
边界半径：3px；
文本对齐：居中；
填充：15px；
保证金：自动；
位置：绝对位置；
右：5%；
光标：指针；
}
函数toggleDisplay（）{
var pi=document.getElementById（'photo-index'）；
var displaySetting=pi.style.display；
var toggle button=document.getElementById（'toggle-button'）；
var showTaxonomy='showTaxonomy'；
var showImages='showImages'；
如果（displaySetting=='none'）{
pi.style.display='grid'；
toggle-button.innerHTML=showImages；
}
否则{
pi.style.display='none'；
toggle-button.innerHTML=showTaxonomy；
}
}
显示分类法
大格子的东西

变量声明中有错误

切换按钮

在JavaScript中不是有效变量，因此请使用

切换按钮

。JavaScript变量不允许在变量声明中使用连字符，因为它被视为算术运算符

功能切换显示（）{
var pi=document.getElementById（'photo-index'）；
var displaySetting=pi.style.display；
var toggle_button=document.getElementById（'toggle-button'）；
var showTaxonomy='showTaxonomy'；
var showImages='showImages'；
如果（displaySetting=='none'）{
pi.style.display='grid'；
切换_button.innerHTML=showImages；
}
否则{
pi.style.display='none'；
toggle_button.innerHTML=showTaxonomy；
}
}

#照片索引{
显示：网格；
网格模板列：自动；
栅隙：0px；
背景色：#4f6b6f；
}
#切换按钮{
颜色：白色；
背景色：rgba（0,0,0,75）；
边界半径：3px；
文本对齐：居中；
填充：15px；
保证金：自动；
位置：绝对位置；
右：5%；
光标：指针；
}

显示分类法
大网格的内容

变量声明中有错误

切换按钮

在JavaScript中不是有效变量，因此请使用

切换按钮

。JavaScript变量不允许在变量声明中使用连字符，因为它被视为算术运算符

功能切换显示（）{
var pi=document.getElementById（'photo-index'）；
var displaySetting=pi.style.display；
var toggle_button=document.getElementById（'toggle-button'）；
var showTaxonomy='showTaxonomy'；
var showImages='showImages'；
如果（displaySetting=='none'）{
pi.style.display='grid'；
切换_button.innerHTML=showImages；
}
否则{
pi.style.display='none'；
toggle_button.innerHTML=showTaxonomy；
}
}

#照片索引{
显示：网格；
网格模板列：自动；
栅隙：0px；
背景色：#4f6b6f；
}
#切换按钮{
颜色：白色；
背景色：rgba（0,0,0,75）；
边界半径：3px；
文本对齐：居中；
填充：15px；
保证金：自动；
位置：绝对位置；
右：5%；
光标：指针；
}

显示分类法
StackOverflow新增了大量内容

。谢谢你，先生。注意：还必须将文本切换（我让它们向后）切换到StackOverflow。谢谢你，先生。需要注意的是：还必须切换文本切换（我让它们向后）