如何通过单击单选按钮来切换 div？

Question

By default the both reagent_code should be hidden. By selecting the radio button, have to show the appropriate DIV (following its #id).

 function marketer(x) { if (x == 0) { document.getElementById('reagent_code').style.display = 'none'; } else if (x == 1) { document.getElementById('reagent_code').style.display = 'block'; return; } }

 <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="marketer" id="yes" onclick="marketer(1)" value="1"> <label class="form-check-label" for="yes">Yes</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="marketer" id="no" onclick="marketer(0)" value="0"> <label class="form-check-label" for="no">No</label> </div>

I get this error.

TypeError: marketer is not a function

Answer 1

Following suggestion of AvcS to your code, without any other library.

The function marketer should be defined on global scope, use window.marketer = function, if you are defining it inside a function

 window.marketer = function(x) { if (x == 0) { document.getElementById('reagent_code').style.display = 'none'; } else if (x == 1) { document.getElementById('reagent_code').style.display = 'block'; return; } }

 <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="marketer" id="yes" onclick="marketer(1)" value="1"> <label class="form-check-label" for="yes">Yes</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="marketer" id="no" onclick="marketer(0)" value="0"> <label class="form-check-label" for="no">No</label> </div> </div> <div id='reagent_code'> My amazing div </div>

However, as suggested by Rory McCrossan , you should review your code.

Answer 2

Try This

<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="marketer" id="yes" onclick="marketer(1)" value="1">
    <label class="form-check-label" for="yes">Yes</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="marketer" id="no" onclick="marketer(0)" value="0">
    <label class="form-check-label" for="no">No</label>
  </div>
  <!-- div to hide and show -->
  <div id="div1" style="display: none;">
      <h1>this is div 1 will show if yes</h1>
  </div>
  <div id="div2" style="display: none;">
      <h1>this is div 2 will show if no</h1>
  </div>
<script>
    function marketer(x) {
          if (x == 0) {
            document.getElementById('div1').style.display = 'none';
            document.getElementById('div2').style.display = 'block';
          } else if (x == 1) {
            document.getElementById('div1').style.display = 'block';
            document.getElementById('div2').style.display = 'none';
            return;
          }
        }
</script>

Answer 3

1. make sure you do not use the same function names and elements names
2. use an event listener and toggle the element

jQuery

 $("[name=marketer]").on("click", function() { console.log(this.value) $('#reagent_code').toggle(this.value == 1) }) $("[name=marketer]:checked").click()

 #Reagent { display: none }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="marketer" checked id="yes" value="1"> <label class="form-check-label" for="yes">Yes</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="marketer" id="no" value="0"> <label class="form-check-label" for="no">No</label> </div> <div id="reagent_code">Reagent</div>

Plain JS

 [...document.querySelectorAll("[name=marketer]")].forEach(function(elem) { elem.addEventListener("click", function() { console.log(this.value) document.getElementById('reagent_code').style.display = this.value === "0" ? 'none' : 'block'; }) if (elem.checked) { elem.click(); } })

 #Reagent { display:none }

 <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="marketer" checked id="yes" value="1"> <label class="form-check-label" for="yes">Yes</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="marketer" id="no" value="0"> <label class="form-check-label" for="no">No</label> </div> <div id="reagent_code">Reagent</div>

Answer 4

Try this simple code below :

 $('input[type=radio]').change(function(){ if($(this).val() == 'ON') { return $('.content').css('display', 'block'); } return $('.content').css('display', 'none'); });

 <input type="radio" name="radio" id="radio-1" value="ON" checked=""> <label for="radio-1">ON</label> <input type="radio" name="radio" id="radio-2" value="OFF"> <label for="radio-2">OFF</label> <div class="content"> Hello world. </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>