Toggle Grid Display (What am I missing?)
Question
Wrote some code to Toggle whether a Grid of Images is Displayed or not. it is a 6x8 grid, so i did not include the 72 div elements here. When the Image Grid is not showing, a text list is visible. Hence the change in Button Text. Having trouble Finding any Errors.
<!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>
1 answers
solution1
3 2018-07-30 07:07:58
There is a error in the variable declaration toggle-button is not a valid variable in JavaScript, so use toggle_button . The JavaScript variable do not allow hyphen in variable declaration as it is considered as arithmetic operator.
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; } }
#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; }
<div onclick="toggleDisplay()" id="toggle-button">Show Taxonomy</div> <div id="photo-index">Large Grid of Stuff</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.