How to display a show/hide content based on image change in if/else javascript

user_3871501 0
Viewed 108

I am having a if / else statement that display a div containing images. There are two images, Image 1 & Image 2.

And a dropdown of two selections. by choosing one option value and first image the condition logic working fine.

Query: when change to second image and choosing the option value how to make the condition work and display a different div

HTML

<p class="text-center accuracy">
    <span id="img-left" class="arrow" onclick=larrow();>
    <i class="fas fa-angle-left"></i></span>
    <span id="changer-txt" class="accuracy changedtext">Image 1</span>
    <span id="img-right" name="cat" class="arrow" onclick=rarrow();>
    <i class="fas fa-angle-right"></i></span> <br /> <span>&nbsp;</span>
</p>

JS

if ($('#dropdown').val() == 'Timeseries' && $('#changer-txt').val() == 'Image 2') {
    $('#time_black_low').show();
}

changer-txt statement is not true and condition not working.

show-hide html javascript
2 Answers

You have to use $('#changer-txt').text() instead of $('#changer-txt').val()

HTML

<p class="text-center accuracy">
    <span id="img-left" class="arrow" onclick=larrow();>
    <i class="fas fa-angle-left"></i></span>
    <span id="changer-txt" class="accuracy changedtext">Image 1</span>
    <span id="img-right" name="cat" class="arrow" onclick=rarrow();>
    <i class="fas fa-angle-right"></i></span> <br /> <span>&nbsp;</span>
</p>

JS

if ($('#dropdown').val() == 'Timeseries' && $('#changer-txt').text() == 'Image 2') {
     $('#time_black_low').show();
}
user_93254700

I have made some changes to your code.

Changes are marked as either <!-- CHANGE HERE:... --> in HTML code and // CHANGE HERE: ... in JS code:

// CHANGE HERE: show default values properly
$('#output').hide();
$('#second-output').hide();
$('#model1').show();
$('#model1-div').show();

function larrow() {
  document.getElementById('changer-txt').innerHTML = "Image 1";
}

function rarrow() {
  document.getElementById('changer-txt').innerHTML = "Image 2";
}

$('#dropdown').on('change', function() {
  switch (this.value) {
    case 'model1':
      $('.model1').show();
      $('.model2').hide();
      break;
    case 'model2':
      $('.model2').show();
      $('.model1').hide();
      break;
    default:
  }
});


$('#go').on('click', function() {
  //console.log($('#changer-txt').html(), $('#dropdown').val(), $('#sub').val());
  //console.log($('#changer-txt').html() == "Image 2", $('#dropdown').val() == "model1", $('#sub').val() == "submodel1");

  // CHANGE HERE: simplify the checks
  if ($('#dropdown').val() == 'model1' && $('#sub').val() == 'submodel1') {
    // CHANGE HERE: use html() instead of val() to access innerHTML
    if ($('#changer-txt').html() == 'Image 2') {
      $('#second-output').show();
      $('#output').hide();
    } else {
      $('#output').show();
      $('#second-output').hide();
    }
  }

});
.model1,
.model2,
#output #second_output {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <p> Select Model</p>
  <select id="dropdown">
    <option value="model1">Model 1</option>
    <option value="model2">Model 2</option>
  </select>

  <div id="model1" class="model1">
    <p class="text-center accuracy">
      <span id="img-left" class="arrow" onclick=larrow();>&lt;</span>
      <!-- CHANGE HERE: move &nbsp outside changer-txt -->
      <span>&nbsp;&nbsp;</span>
      <span id="changer-txt" class="accuracy changedtext">Image 1</span>
      <span>&nbsp;&nbsp;</span>
      <span id="img-right" class="arrow" onclick=rarrow();> > </span>
      <br>
      <span>&nbsp;</span>
    </p>
  </div>

  <!-- CHANGE HERE: id should be unique -->
  <div id="model1-div" class="model1"> Model 1 Working !!! </div>

  <div class="model2"> Model 2 Working !!! </div>

</section>
<br><br><br>
<section>

  <select id="sub">
    <option value="submodel1" selected>Sub Model 1 </option>
    <option value="submodel2">Sub Model 2</option>
  </select>

  <button id="go" type="button" class="btn btn-blue btn-lg">Launch </button>

</section>

<div id="output">
  <p> Final Output !! </p>
</div>

<!-- CHANGE HERE: replaced underscore with hyphen in id (optional) -->
<div id="second-output">
  <p> Output 2nd Image Final Output !! </p>
</div>

user_46883210
Related