CODEWITHSUNDEEP
javascripthtml
H4desT0uch
H4desT0uch

Reputation: 13

HTML buttons will only work only on webpage re/-load

EDIT : Thanks to everyone who tried to help me. I appreciate the tips guys.

I changed my window.onloadand inserted the two event listeners inside of it. After that I took the idea of @Ito Pizarro , and implemented it in my own way.

The result looks like this : 

function openDoor() {
var x_1 = document.getElementById('img1');
var x_2 = document.getElementById('img2');
is_visible = (x_1.style.visibility == "hidden");

if (is_visible) {
    x_1.style.visibility = "visible";
}
else {
    x_2.style.visibility = "hidden";
}}

And I also did the same for my closeDoor() function. END OF EDIT

I create a HTML page, with two buttons. Every button has its purpose when it's being clicked. The first one will show an image of an opened door. The second button will show an image of a close door. When the page is loaded no image is being shown. They appear only if their button is clicked.

Tried to created a nested if-statement with the a global bool that will make it run infinitely.

Also tried a for & while loop.

But I am new to programming and I struggle a bit.

window.onload = function () {
    document.getElementById('OpenDoor').addEventListener("click", function () { openDoor() })
}

window.onload = function () {
    document.getElementById('CloseDoor').addEventListener("click", function () { closeDoor() })
}


function openDoor(){
    document.getElementById('img1').style.visibility = "visible";
}

function closeDoor(){
    document.getElementById('img2').style.visibility = "visible";
}

In the code exist two problems :

  1. I load the page and click the "close door" button and the closed door image appears. If I decide to open the door again by pressing the "open door" button, it wont do it.

  2. I load the page and click the "open door" button first. The open door image appears and the if I click on the "close door" button and the image also appears, but I cant repeat the process by re-clicking the "open door" to reopen it.

Upvotes: 1

Views: 171

Answers (2)

Lucien Dulac
Lucien Dulac

Reputation: 127

You are assining a function on the onload event twice. By doing this the first delaration will never be triggered.

It should be more something like :

window.onload = function () {
    document.getElementById('OpenDoor').addEventListener("click", function () { openDoor() })
    document.getElementById('CloseDoor').addEventListener("click", function () { closeDoor() })
}

Don't forget to validate the answer if you have what you were looking for

Upvotes: 1

Ito Pizarro
Ito Pizarro

Reputation: 1607

EDIT: In addition to lucien-dulac's point about window.onload…

It looks like your two event handlers do a single thing to either of two separate elements.

  • openDoor() will only ever make #img1 visible.
  • closeDoor() will only ever make #img2 visible.

If you want subsequent clicks on #OpenDoor or #CloseDoor to change the visibility style of their respective target elements — #OpenDoor controls #img1, #CloseDoor controls #img2 — you would need to write a toggle into openDoor() and closeDoor().

Something like…

function openDoor(){
  var el =  document.getElementById('img1'),
    is_visible = ( el.style.visibility === "visible" );
  if ( is_visible ) {
    el.style.visibility = "hidden";
  } else {
    el.style.visibility = "visible";
  }
}

Upvotes: 0

Related Questions