Home > Software design >  hide and unhide div using javascript
hide and unhide div using javascript

Time:10-22

So I have a div, in which I can display when an input button is hit.

 <div class="select-list">
             <select name="relations" id="selectBox" style="text-transform: none;" class="select" required onchange="otherFunc()">
                <option value="">Choose</option>
                <option value="Son">Son</option>
                <option value="Daughter">Daughter</option>
                <option value="Other Relative">Other Relative</option>
                <option value="Other">Other</option>
            </select>

                <span class="highlight"></span>
                <span class="bar"></span>
        </div>
    </div>

    <script>
        function otherFunc() {
            var selectBox = document.getElementById("selectBox");
            var selectedValue = selectBox.options[selectBox.selectedIndex].value;
            console.log(selectedValue)
            if (selectedValue == "Other") {
                document.getElementById("other").innerHTML = ' <div class="group"><div class="col-25"><label>Please clarify if "Other"</label></div><div class="col-75"><input type="text" name="otherInput" required></div><span class="highlight"></span><span class="bar"></span></div>'
            } else {

            }
        }
    </script>

    <div id="other"></div>

however, now I want to change it so if someone hits Other, but then changes it back to any other option, it hides that div again <div id="other"></div>. How can I do this?

CodePudding user response:

You just need to add document.getElementById("other").innerHTML = ''; in your else to hide the div.

<div class="select-list">
    <select name="relations" id="selectBox" style="text-transform: none;" class="select" required onchange="otherFunc()">
        <option value="">Choose</option>
        <option value="Son">Son</option>
        <option value="Daughter">Daughter</option>
        <option value="Other Relative">Other Relative</option>
        <option value="Other">Other</option>
    </select>
    
    <span class="highlight"></span>
    <span class="bar"></span>
</div>
</div>
    
<script>
    function otherFunc() {
        var selectBox = document.getElementById("selectBox");
        var selectedValue = selectBox.options[selectBox.selectedIndex].value;
        console.log(selectedValue)
        if (selectedValue == "Other") {
            document.getElementById("other").innerHTML = ' <div class="group"><div class="col-25"><label>Please clarify if "Other"</label></div><div class="col-75"><input type="text" name="otherInput" required></div><span class="highlight"></span><span class="bar"></span></div>'
        } else {
            document.getElementById("other").innerHTML = '';
        }
    }
</script>
    
<div id="other"></div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

Solution #1 keeping your original code

        function otherFunc() {
            var selectBox = document.getElementById("selectBox");
            var selectedValue = selectBox.options[selectBox.selectedIndex].value;
            console.log(selectedValue)
            if (selectedValue == "Other") {
                document.getElementById("other").innerHTML = ' <div ><div ><label>Please clarify if "Other"</label></div><div ><input type="text" name="otherInput" required></div><span ></span><span ></span></div>'
            } else {
document.getElementById("other").innerHTML = '';
            }
        }
<div class="select-list">
             <select name="relations" id="selectBox" style="text-transform: none;" class="select" required onchange="otherFunc()">
                <option value="">Choose</option>
                <option value="Son">Son</option>
                <option value="Daughter">Daughter</option>
                <option value="Other Relative">Other Relative</option>
                <option value="Other">Other</option>
            </select>

                <span class="highlight"></span>
                <span class="bar"></span>
        </div>


    <div id="other"></div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Solution #2 You can do like this as well

var other = document.getElementById('other');
other.style.display = 'none';

function otherFunc() {
                var selectBox = document.getElementById("selectBox");
                var selectedValue = selectBox.options[selectBox.selectedIndex].value;
                console.log(selectedValue)
                if (selectedValue == "Other") {
                    other.style.display = 'block';
                } else {
                 other.style.display = 'none';
                 document.getElementById('otherInput').value = '';
                }
            }
<div class="select-list">
             <select name="relations" id="selectBox" style="text-transform: none;" class="select" required onchange="otherFunc()">
                <option value="">Choose</option>
                <option value="Son">Son</option>
                <option value="Daughter">Daughter</option>
                <option value="Other Relative">Other Relative</option>
                <option value="Other">Other</option>
            </select>

                <span class="highlight"></span>
                <span class="bar"></span>
        </div>


   <div id="other">
     
     <div class="group">
       <div class="col-25">
       <label>Please clarify if "Other"</label>
       </div>
     <div class="col-75">
       <input type="text" name="otherInput" Id="otherInput" required>
     </div>
       <span class="highlight"></span>
       <span class="bar"></span>
     </div>
     
   </div>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

well, use some css class (to set visibility, opacity / other prop on the element :

    <script>
      let otherDiv = undefined;
        function otherFunc() {
            var selectBox = document.getElementById("selectBox");
            var selectedValue = selectBox.options[selectBox.selectedIndex].value;
            console.log(selectedValue)
            if (selectedValue == "Other") {
                otherDiv = document.getElementById("other");
                otherDiv.style.opacity = 1;
                otherDiv.innerHTML = ' <div class="group"><div class="col-25"><label>Please clarify if "Other"</label></div><div class="col-75"><input type="text" name="otherInput" required></div><span class="highlight"></span><span class="bar"></span></div>'
            } else {
              if(!!otherDiv)
                otherDiv.style.opacity = 0;
            }
        }
    </script>

https://plnkr.co/edit/3sT9kwDyp5GBIC0Q?preview

  • Related