Hide HTML based on Drop Down Value (vanilla)

Question

I'm very new to coding javascript and I've searched through a couple of posts and can't get this to work, so sorry if its an easy answer.

I need to show a div element based on whether one option is selected in a drop down menu. Needs to be inline, vanilla js (no jQuery). Here's what I have, but something isn't working.

Java:

<script type="text/javascript">
   var repeatCombo = document.getElementById("repeatSelect");
   var repeatVal = repeatCombo.options[repeatCombo.selectedIndex].text;

   function repeatCheck() {

   if (repeatVal = 'Repeat Deposit') {
        document.getElementById('repeatGroup').style.display = 'block';
   }
   else document.getElementById('repeatGroup').style.display = 'none';

   }
</script>

HTML:

<div class="form-group">
  <label class="col-md-4 control-label" for="repeatSelect">Initial/Repeat Deposit</label>  
  <div class="col-md-4">
  <select name="repeatSelect" class="form-control input-md" id="repeatSelect" onchange="javascript:repeatCheck();">  
    <option value="Initial Deposit" >Initial Deposit</option>
    <option value="Repeat Deposit" >Repeat Deposit</option>
  </select>
  </div>
</div>

<div id="repeatGroup" style="display: none;">
  <label class="col-md-4 control-label" for="repeatDepositInfo">Date of Initial Deposit</label>  
  <div class="col-md-4">
    <input name="repeatDepositInfo" class="form-control input-md" id="repeatDepositInfo" type="date" placeholder="">  
  </div>
</div>

Answer 1

Try this:

<script type="text/javascript">
    function repeatCheck() {
        var repeatCombo = document.getElementById("repeatSelect");
        var repeatVal = repeatCombo.options[repeatCombo.selectedIndex].text;

        if (repeatVal == 'Repeat Deposit') {
            document.getElementById('repeatGroup').style.display = 'block';
        } else { 
            document.getElementById('repeatGroup').style.display = 'none';
        }
    }
</script>

You had some syntax errors in your if statement and function. The else portion of the if statement requires brackets as well and remember to use the double equals when checking a value.

I also moved the repeatVal inside the function, otherwise when the function is ran, it will remain the initial value and will not be checked again. By placing it in the function the value is reset every time the function is initiated.

Edit : Thanks to Kudos Johnson for suggesting to put repeatCombo in the function as well.

Answer 2

This was pretty much solved already but I'll throw my hand as well.

Your two issues were the assignment operator in the if statement conditional, and you needed to move the repeatVal variable inside of the function because it needs to be checked every time the user changes the selected option. As it is now, the minute the script is loaded, the variable is assigned the default value of the select element and is static as nothing has the ability to change it.

Here's my code...

   var repeatCombo = document.getElementById("repeatSelect");

   function repeatCheck() {
   var repeatVal = repeatCombo.options[repeatCombo.selectedIndex].text;
   if (repeatVal == 'Repeat Deposit') {
        document.getElementById('repeatGroup').style.display = 'block';
   }
   else document.getElementById('repeatGroup').style.display = 'none';

   }