Multiple Javascript If / Else Statements not working, only last one is executing

by

First of all, your poor indentation of code made this question very difficult to read and troubleshoot. I had to not only recreate the solution, but I also had to fix your invalid HTML. All of that was necessary before I recognized your problem is simply this —

Your first IF condition does work….

if (document.getElementById('BSN').value === 'Yes') {
  document.getElementById('BSNQuestion').style.display = 'table-row';
  document.getElementById('NSG_Grad_Yr').style.display = 'block';
  document.getElementById('Est_NSG_School').style.display = 'block';
} else {
  document.getElementById('BSNQuestion').style.display = 'none';
  document.getElementById('NSG_Grad_Yr').style.display = 'none';
  document.getElementById('Est_NSG_School').style.display = 'none';
}

… but its effects are later reversed by this condition:

if (document.getElementById('BSN').value === 'Currently Enrolled') {
  document.getElementById('BSNQuestion').style.display = 'table-row';
  document.getElementById('NSG_Grad_Yr').style.display = 'block';
  document.getElementById('Est_NSG_School').style.display = 'block';

} else {
  document.getElementById('BSNQuestion').style.display = 'none';
  document.getElementById('NSG_Grad_Yr').style.display = 'none';
  document.getElementById('Est_NSG_School').style.display = 'none';
}

Suppose value == ‘Yes’ then you continue to check value == ‘Currently Enrolled’. Since value was not ‘Currently Enrolled’ (since we know it was ‘Yes’) you still trigger the else condition that hides the display (even though you want it to show for ‘Yes’).

To fix, do this:

var answer = document.getElementById('BSN').value;
if (answer === 'Yes' || answer === 'Currently Enrolled') {
  document.getElementById('BSNQuestion').style.display = 'table-row';
  document.getElementById('NSG_Grad_Yr').style.display = 'block';
  document.getElementById('Est_NSG_School').style.display = 'block';
} else {
  document.getElementById('BSNQuestion').style.display = 'none';
  document.getElementById('NSG_Grad_Yr').style.display = 'none';
  document.getElementById('Est_NSG_School').style.display = 'none';
}

Fiddle >

More Related Contents:

  1. Link Replacement With JavaScript [closed]
  2. How to Protect website code PHP / JS? [closed]
  3. How to create blog posts with HTML and CSS? [closed]
  4. How to get the selected radio button’s value?
  5. JQuery: How to call RESIZE event only once it’s FINISHED resizing?
  6. JavaScript not running on jsfiddle.net
  7. Open links made by createObjectURL in IE11
  8. How to Implement DOM Data Binding in JavaScript
  9. HTML5 Canvas drawImage ratio bug iOS
  10. How to get html elements from an object tag?
  11. Detect if HTML5 Video element is playing [duplicate]
  12. get a list of all folders in directory [closed]
  13. Is it OK to add your own attributes to HTML elements? [duplicate]
  14. location.host vs location.hostname and cross-browser compatibility?
  15. Scale a div to fit in window but preserve aspect ratio
  16. How to save data from a form with HTML5 Local Storage?
  17. Submit form after calling e.preventDefault()
  18. jQuery in Chrome returns “block” instead of “inline”
  19. How do I retrieve if the popstate event comes from back or forward actions with the HTML5 pushstate?
  20. Close a div by clicking outside
  21. Change form values after submit button pressed
  22. How do you automatically set the focus to a textbox when a web page loads?
  23. JavaScript on the bottom of the page?
  24. How to write into a file (in user directory) using JavaScript?
  25. Getting HTML elements by their attribute names
  26. Vue.js data-bind style backgroundImage not working
  27. How can I capture an image via the user’s webcam using getUserMedia?
  28. Call Library function from html with google.script.run
  29. Display Spreadsheet Data to HTML Table
  30. How can I calculate the difference between two times that are in 24 hour format?

Leave a Comment