JavaScript / JQuery button function not working properly

Question

I'm building a website that allows a user to select one of the character. When the user clicks on 'Confirm', I want the page to be routed by showing the selected image and option to go back and select other characters. I want it to be shown as follows

But for some reason, the code shows up like this:

I don't see the 'Other' button, but it only comes out with a Confirm button. Not sure how to fix it..

Here is the code:

var elementSelected = null;
var typeSelected = false;

$(document).on('click', '.image > img', function() {
  $('.image > img').each(function() {
    $(this).removeClass('active');
  })
  $(this).addClass('active');
  elementSelected = $(this);
  typeSelected = false;
});

$(document).on('input', '#text-src', function() {
  $('.image > img').each(function() {
    $(this).removeClass('active');
  })
  elementSelected = $(this);
  typeSelected = true;
})

$(document).on('click', '#button-confirm', function() {
  $('.image').hide();
  if (typeSelected == true) {
    $('.view-image > img').attr('src', elementSelected.val());
  } else {
    $('.view-image > img').attr('src', elementSelected.attr('src'));
  }
  $('.view-image').fadeIn('high');
})

$(document).on('click', '#button-other', function() {
  $('.view-image').hide();
  $('.image').fadeIn('high');
})

.image {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  margin-top: 40px;
  margin-left: 50px;
}

.image img {
  cursor: pointer;
}

.image img:hover {
  border: solid 2px #1e88e5;
  border-radius: 2px;
}

.image #mother img:hover {
  border: solid 2px #1e88e5;
  border-radius: 2px;
}

#dog {
  width: 70%;
  height: 70%;
}

#mother {
  width: 70%;
  height: 70%;
}

#soldier {
  width: 70%;
  height: 70%;
  margin-top: 50%
}

#teacher {
  width: 70%;
  height: 70%;
  margin-top: 50%;
}

.button {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 60%;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: rgb(43, 43, 219);
  text-align: center;
  cursor: pointer;
  border-radius: 2px;
}

.button:hover {
  background-color: #242424;
}

.button:active {
  background-color: #121212;
}

.button>span {
  color: #eeeeee
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<nav class="navbar navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="">
      <img src="./images/Hamburger_icon.svg" alt="Hamburger Menu" />
    </a>
    <a href="styles/Jason/settings.html">
      <ul class="navbar-nav">
        <img src="./images/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile" height="50vh" />
      </ul>
    </a>
  </div>
</nav>
<div class="image">
  <img src="images/dog.png" id="dog" alt="dog">
  <img src="images/mother.png" id="mother" alt="mother">
  <img src="images/military.png" id="soldier" alt="soldier">
  <img src="images/teacher.png" id="teacher" alt="teacher">
</div>
<div class="button" id="button-confirm">
  <span>Confirm</span>
</div>
<div class="view-image" style="display:none;">
  <img src="" />
  <div class="button" id="button-other"><span>Other</span></div>
</div>

<div class="fixed-bottom">
  <div class="navbar navbar-dark bg-primary">
    <div class="container-fluid">
      <div id="grid">
        <div class="bot-nav-img">
          <img src="./images/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal" height="50vh" />
        </div>
        <div class="bot-nav-img">
          <img src="./images/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home" height="50vh" />
        </div>
        <div class="bot-nav-img">
          <a href="goals.html">
            <img src="./images/bootstrap-icons-1.3.0/table.svg" alt="Goals" height="50vh" />
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="./styles/Jason/coach_selection.js"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
-->

WombleNumber1 · Answer 1 · 2021-03-22T11:33:37.510

I am not a html/css expert, however I can see in chrome dev tools that the 'Other' button is certainly there (and the script is working as expected) however it is hidden behind the fixed footer. A quick google on 'bootstrap fixed footer body' found this answer -

Flushing footer to bottom of the page, twitter bootstrap

and I indeed got your snippet working (i.e. the 'Other' button showing) by adding the following styles to your css -

body {
  padding-bottom:150px;
}

fixed-bottom {
  margin-top:-150px;
}

with regards to the confirm button still showing, you can modify the script as following to show/hide the confirm button accordingly -

$(document).on('click', '#button-confirm', function() {
  $('.image').hide();
  $('#button-confirm').hide();
  if (typeSelected == true) {
    $('.view-image > img').attr('src', elementSelected.val());
  } else {
    $('.view-image > img').attr('src', elementSelected.attr('src'));
  }
  $('.view-image').fadeIn('high');
})

$(document).on('click', '#button-other', function() {
  $('.view-image').hide();
  $('.image').fadeIn('high');
  $('#button-confirm').show();
})

JavaScript / JQuery button function not working properly

1 Answers1