CODEWITHSUNDEEP
javascripthtmlcss
Sebastian Przybylski
Sebastian Przybylski

Reputation: 153

Functions not working properly when button is pressed

I want the buttons to unveil certain blocks of text when the corresponding buttons are pressed in accordance to its id.

The buttons, in accordance with the css file, render when a button is pressed via a fadein animation. the "display:none;" is used so that the text remains hidden until the button is pressed. The css works fine but the Javascript functions are dysfunctional.

function nextA() {
  var x = document.getElementById("partA");
  x.style.display = "block";
}

function nextS() {
  var x = document.getElementById("partS");
  x.style.display = "block";
}

function nextD() {
  var x = document.getElementById("partD");
  x.style.display = "block";
}

function nextB() {
  var x = document.getElementById("partB");
  x.style.display = "block";
}
.text {
  margin-top: 25px;
  font-size: 21px;
  text-align: center;
  animation: fadein 4.5s;
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#partA {
  display: none;
}

#partS {
  display: none;
}

#partD {
  display: none;
}

#partB {
  display: none;
}
<div class="place" id="part7">
  <p class="text">text</p>
  <button class="button2 text" onclick="nextA()">A</button>
  <button class="button2 text" onclick="nextS()">S</button>
  <button class="button2 text" onclick="nextD()">D</button>
  <button class="button2 text" onclick="nextB()">B</button>
</div>
<div class="place" id="partA">
  <p class="text">TEXT</p>
  <form>
    <input class="text button2 place" type="button" value="" onclick="window.location.href=''" />
  </form>
  <div class="place" id="partS">
    <p class="text">TEXT</p>
    <form>
      <input class="text button2 place" type="button" value="" onclick="window.location.href=''" />
    </form>
    <div class="place" id="partD">
      <p class="text">TEXT</p>
      <form>
        <input class="text button2 place" type="button" value="" onclick="window.location.href=''" />
      </form>
      <div class="place" id="partB">
        <p class="text">TEXT</p>
        <form>
          <input class="text button2 place" type="button" value="" onclick="window.location.href=''" />
        </form>
      </div>

I expect that, for example, button A is pressed, the block of text with the id of partA appears and no other block of text appears. What actually happens is that nextA renders all blocks of text and the functions nextS, nextD, and nextB don't even load.

Upvotes: 1

Views: 39

Answers (2)

Sebastian Przybylski
Sebastian Przybylski

Reputation: 153

Adding tags at the end of the tags solved the problem

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

The problem is that your elements S, D and B are all children of A; S is the child, D is the grandchild, and B is the great-grandchild. As such, they cannot be seen unless A is also visible. Once you toggle the visibility of A, you're automatically showing all of the children as well.

To correct this, simply add in four </div> to close off your .place elements, making them all siblings of one another, rather than having three descendants of A.

This can be seen in the following:

function nextA() {
  var x = document.getElementById("partA");
  x.style.display = "block";
}

function nextS() {
  var x = document.getElementById("partS");
  x.style.display = "block";
}

function nextD() {
  var x = document.getElementById("partD");
  x.style.display = "block";
}

function nextB() {
  var x = document.getElementById("partB");
  x.style.display = "block";
}
.text {
  margin-top: 25px;
  font-size: 21px;
  text-align: center;
  animation: fadein 4.5s;
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#partA {
  display: none;
}

#partS {
  display: none;
}

#partD {
  display: none;
}

#partB {
  display: none;
}
<div class="place" id="part7">
  <p class="text">text</p>
  <button class="button2 text" onclick="nextA()">A</button>
  <button class="button2 text" onclick="nextS()">S</button>
  <button class="button2 text" onclick="nextD()">D</button>
  <button class="button2 text" onclick="nextB()">B</button>
</div>
<div class="place" id="partA">
  <p class="text">TEXT</p>
  <form>
    <input class="text button2 place" type="button" value="" onclick="window.location.href=''" />
  </form>
</div>
<div class="place" id="partS">
  <p class="text">TEXT</p>
  <form>
    <input class="text button2 place" type="button" value="" onclick="window.location.href=''" />
  </form>
</div>
<div class="place" id="partD">
  <p class="text">TEXT</p>
  <form>
    <input class="text button2 place" type="button" value="" onclick="window.location.href=''" />
  </form>
</div>
<div class="place" id="partB">
  <p class="text">TEXT</p>
  <form>
    <input class="text button2 place" type="button" value="" onclick="window.location.href=''" />
  </form>
</div>

Note: you'll also want to make use of unobtrusive JavaScript by adding event handlers (in place of onclick), though that is supplementary to the problem demonstrated in the question.

Upvotes: 2

Related Questions