Below is a snippet of code that gets some elements via the DOM. I just attach a simple onclick which is supposed to add the "hidden" property to the classList of each retrieved element.
HTML:
<body>
<h1 id="view-one-header">Exploring View 1</h1>
<img id ="dragonite" src=".png" alt="Dragonite">
<button id="toggle-view-two-btn">Toggle View 2</button>
</body>
Javascript:
window.onload = pageLoad;
function pageLoad() {
let viewOneHeader = document.getElementById("view-one-header");
let dragoniteImg = document.getElementById("dragonite");
let toggleViewTwoBtn = document.getElementById("toggle-view-two-btn");
toggleViewTwoBtn.onclick = changeToViewTwo;
function changeToViewTwo() {
viewOneHeader.classList.add("hidden");
dragoniteImg.classList.add("hidden");
}
I am trying to debug this script because when the button is clicked, the corresponding views do not disappear. It has been awhile and I am unable to figure out the issue. Any help would be appreciated.
Below is a snippet of code that gets some elements via the DOM. I just attach a simple onclick which is supposed to add the "hidden" property to the classList of each retrieved element.
HTML:
<body>
<h1 id="view-one-header">Exploring View 1</h1>
<img id ="dragonite" src="https://cdn.bulbagarden/upload/8/8b/149Dragonite.png" alt="Dragonite">
<button id="toggle-view-two-btn">Toggle View 2</button>
</body>
Javascript:
window.onload = pageLoad;
function pageLoad() {
let viewOneHeader = document.getElementById("view-one-header");
let dragoniteImg = document.getElementById("dragonite");
let toggleViewTwoBtn = document.getElementById("toggle-view-two-btn");
toggleViewTwoBtn.onclick = changeToViewTwo;
function changeToViewTwo() {
viewOneHeader.classList.add("hidden");
dragoniteImg.classList.add("hidden");
}
I am trying to debug this script because when the button is clicked, the corresponding views do not disappear. It has been awhile and I am unable to figure out the issue. Any help would be appreciated.
Share Improve this question edited Oct 23, 2017 at 18:38 user3131097 asked Oct 23, 2017 at 18:23 user3131097user3131097 431 gold badge2 silver badges10 bronze badges 8- 1 Please, edit your question and provide a minimal reproducible example. – Sebastian Simon Commented Oct 23, 2017 at 18:26
- Your code is working as is. The "hidden" class gets added to the elements with the id's specified. You must need to update the css to make the "hidden" class, actually hide. – colecmc Commented Oct 23, 2017 at 18:31
-
You must show the related HTML and CSS for us to be able to help. If, for example,
let toggleViewTwoBtn = document.getElementById("toggle-view-two-btn");is being executed prior to that element being read into the DOM, thentoggleViewTwoBtnwill benullwhen you attempt to assign the.onclick. – Scott Marcus Commented Oct 23, 2017 at 18:31 - @colecmc There is no possible way for you to know if the code is working as is and that there is just a CSS issue. We don't have enough information. – Scott Marcus Commented Oct 23, 2017 at 18:31
- Yes, I can know @ScottMarcus because I ran the code provided without changing it at all. I added the HTMLElements with the id's and the classes were added. Did you do that? – colecmc Commented Oct 23, 2017 at 18:33
1 Answer
Reset to default 2Here I have added some css for the class "hidden". When you click on the element with the id "toggle-view-two-btn" the classes are added.
let viewOneHeader = document.getElementById("view-one-header");
let dragoniteImg = document.getElementById("dragonite");
let toggleViewTwoBtn = document.getElementById("toggle-view-two-btn");
toggleViewTwoBtn.onclick = changeToViewTwo;
function changeToViewTwo() {
viewOneHeader.classList.add("hidden");
dragoniteImg.classList.add("hidden");
}.hidden {
display: none;
}<div id="view-one-header">view-one-header</div>
<div id="dragonite">dragonite</div>
<div id="toggle-view-two-btn">toggle-view-two-btn</div>