Hiding a Button And Making It Visible Again Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Hiding a Button And Making It Visible Again without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I’ve been working for a while to make a button hidden and make it visible when an option af a select is selected. I put all of the code in the picture.The one that I couldn’t do is in the bottom. Here is my photo of the basic website. I want to make the buttons on the bottom of the picture hidden when nothing written on the first 2 selects. When the one at the left is Sports and the right one is Tennis, I want to make buttons visible again. Thank you… enter image description here

<h3 style="margin-top: 30px;">What Do You Like The Most?</h3>
      <div class="row">
        <div class="col-md-3">
          <select class="form-control" name="hobi" id="hobi" onchange="populate(this.id,'hobi2')" onChange="degistir()" >
            <option value="Not Selected">Not Selected</option>
            <option value="Sports">Sports</option>
            <option value="Technology">Technology</option>
            <option value="Music">Music</option>
            <option value="Art">Art</option>
            <option value="Romantic">Romantic</option>
            <option value="Other">Other</option>
          </select>
        </div>
        <div class="col-md-4">
          <select class="form-control" name="hobi2" onChange="hediyeler()" id="hobi2" ></select>
        </div>
      </div>
	
		<script>
		//Select Değişmesi İçin Olan
    function populate(hobi,hobi2){
      var s1 = document.getElementById("hobi");
      var s2 = document.getElementById("hobi2");
      s2.innerHTML = "Not Selected";

      if (s1.value === "Sports"){
        var optionArray = ["not selected | Not Selected", "tennis | Tennis", "basketball | Basketball", "football | Football", "volleyball | volleyball", "swimming | swimming", "athletics | Athletics", "extreme sports | Extreme Sports", "other | Other", "all | All"];

     }else if (s1.value === "Technology"){
        var optionArray = ["not selected | Not Selected", "electronic equipment | Electronic Equipment", "robotics | Robotics", "programming | Programming", "photoshop | Photoshop", "video edit | Video Edit", "other | Other", "all | All"];

      }else if (s1.value === "Music"){
        var optionArray = ["not selected | Not Selected", "piano | Piano", "guitar | Guitar", "violin family | Violin Family", "wind insturments | Wind Insturments", "percussion insturments | Percussion Insturments", "singing | Singing", "electronic music | Electronic Music", "other | Other", "all | All"];

      }else if (s1.value === "Art"){
        var optionArray = ["not selected | Not Selected", "painting | Painting", "3d design | 3D Design", "design | Design", "other | Other", "all | All"];

      }else if (s1.value === "Romantic"){
        var optionArray = ["not selected | Not Selected", "necklace | Necklace", "ring | Ring", "romantic ideas | Romantic Ideas", "other | Other", "all | All"];

      }else if (s1.value === "Other"){
        var optionArray = ["not selected | Not Selected", "no idea | I have No Idea What To Buy", "not find | I Couldn't Find The Best Gift"];
      }
      for(var option in optionArray){
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
      }
    }

		</script>
		
		
		
		<h3 style="margin-top: 30px">What Is Your Favorite Color?</h3>
      <div class="row">
        <div class="col-md-3">
        <select name="renkler" class="form-control" id="renkler">
          <option>Not Selected</option>
          <option>Blue</option>
          <option>Pink</option>
          <option>Red</option>
          <option>Purple</option>
          <option>Yellow</option>
          <option>White</option>
          <option>Black</option>
          <option>Brown</option>
          <option>Turquoise</option>
          <option>Green</option>
          <option>Gray</option>
          <option>Bisque</option>
          <option>Orange</option>
          <option>All</option>
          <option>I'm Not Sure</option>
          <option>I don't want to say</option>
        </select>
      </div>
      </div>
		
		<div class="first_question">
		<div class="first">
			<a href="#" id="raket"><button>Racket</button></a>
			<a href="#" id="ayakkabi"><button>Shoes</button></a>
			<a href="#" id="diger"><button>Other</button></a>
			</div>
				<div class="second">
			<a href="#" id="baskettop"><button>Basketball</button></a>
			<a href="#" id="basketkabi"><button>Basketball Shoes</button></a>
			</div>
		</div>
		
		
    
    
    //Here is my Javascript code that I couldn't make it work. I put the others for you to understand what am I doing well.
    <script>
			var secme1 = document.getElementById("hobi");
			var secme2 = document.getElementById("hobi2");
			var st1 = document.getElementById("raket");
			var st2 = document.getElementById("ayakkabi");
			var st3 = document.getElementById("diger");
			var sb1 = document.getElementById("baskettop");
			var sb2 = document.getElementById("basketkabi");
			if (function degistir(){
				st1.style.visibility = 'hidden';
				st2.style.visibility = 'hidden';
				st3.style.visibility = 'hidden';
				sb1.style.visibility = 'hidden';
				sb2.style.visibility = 'hidden';
				
				if (function hediyeler(){
				   if (secme1 === "Sports" && secme2 === "Tennis"){
			    st1.style.visibility = 'visible';
				st2.style.visibility = 'visible';
				st3.style.visibility = 'visible';

				   }
			});
				});else{
				st1.style.visibility = 'hidden';
				st2.style.visibility = 'hidden';
				st3.style.visibility = 'hidden';
				sb1.style.visibility = 'hidden';
				sb2.style.visibility = 'hidden';
				}

		
		</script>

Answer

Although your requirements are not clear in your question, here is a solution on the bases of what I understood by your question, I have just made this snippet for first three options, check if this works for you, if no then tell me the exact changes, is ill try to help you out.

$(document).ready(function() {
var selectedOptionforHobi1;
    $("select#hobi").change(function() {
        selectedOptionforHobi1 = $(this).children("option:selected").val();
        if (selectedOptionforHobi1 != 'NA') {
            $("select#hobi2").html("");
            $("#hobi2").show();
            if (selectedOptionforHobi1 == "sports") {
                $("select#hobi2").html("<option value='NA' selected>Not Selected</option><option value='Tennis'>Tennis</option><option value='Basketball'>Basketball</option><option value='Football'>Football</option><option value='Other'>Other</option><option value='All'>All</option>");
            } else if (selectedOptionforHobi1 == "tech") {
                $("select#hobi2").html("<option value='NA' selected>Not Selected</option><option value='Electronic Equipment'>Electronic Equipment</option><option value='Robotics'>Robotics</option><option value='Programming'>Programming</option><option value='Photoshop'>Photoshop</option><option value='all'>all</option>");
            } else if (selectedOptionforHobi1 == "music") {
                $("select#hobi2").html("<option value='NA' selected>Not Selected</option><option value='Piano'>Piano</option><option value='Guitar'>Guitar</option><option value='Violin Family'>Violin Family</option><option value='Electronic Music'>Electronic Music</option><option value='Other'>Other</option>");
            }
        }
        return selectedOptionforHobi1;
    });
    $(document).on('change', '#hobi2', function() {
        var selectedOption = $(this).children("option:selected").val();
        if (selectedOption == 'Tennis' && selectedOptionforHobi1 == 'sports') {
            $(".first_question>div").hide();
            $(".first_question .first").show();

        }
        if (selectedOption == 'Basketball' && selectedOptionforHobi1 == 'sports') {
            $(".first_question>div").hide();
            $(".first_question .second").show();

        }
    });
});
.first_question>div {
        display: none;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 style="margin-top: 30px;">What Do You Like The Most?</h3>
    <div class="row">
        <div class="col-md-3">
            <select class="form-control" name="hobi" id="hobi">
                <option value="NA" selected>Not Selected</option>
                <option value="sports">Sports</option>
                <option value="tech">Technology</option>
                <option value="music">Music</option>
                <option value="art">Art</option>
                <option value="romantic">Romantic</option>
                <option value="other">Other</option>
            </select>
        </div>
        <div class="col-md-4">
            <select class="form-control" name="hobi2" id="hobi2">
            </select>
        </div>
    </div>
    <h3 style="margin-top: 30px">What Is Your Favorite Color?</h3>
    <div class="row">
        <div class="col-md-3">
            <select name="renkler" class="form-control" id="renkler">
                <option>Not Selected</option>
                <option>Blue</option>
                <option>Pink</option>
                <option>Red</option>
                <option>Purple</option>
                <option>Yellow</option>
                <option>White</option>
                <option>Black</option>
                <option>Brown</option>
                <option>Turquoise</option>
                <option>Green</option>
                <option>Gray</option>
                <option>Bisque</option>
                <option>Orange</option>
                <option>All</option>
                <option>I'm Not Sure</option>
                <option>I don't want to say</option>
            </select>
        </div>
    </div>
    <div class="first_question">
        <div class="first">
            <button>Butotns in first div</button>
            <button>Butotns in first div</button>
            <button>Butotns in first div</button>
            <button>Butotns in first div</button>
        </div>
        <div class="second">
            <button>Butotns in second div</button>
            <button>Butotns in second div</button>
            <button>Butotns in second div</button>
        </div>
    </div>
We are here to answer your question about Hiding a Button And Making It Visible Again - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji