CODEWITHSUNDEEP
javascript
Canpakes
Canpakes

Reputation: 75

Show Hide Table Using Checkbox

I have two tables and what im trying to do is if user checked on radio button "Cookies" a table for cookies will appear. Same with the other one, if radio button for candies is checked then the same thing happen.

Somehow my code is not working?

https://jsfiddle.net/es7aj8bw/1/

function streamverify(x) {
  if (x == 0)
    document.getElementById('upstream_tab').style.display = 'block';
  else if (x == 1)
    document.getElementById('downstream_tab').style.display = 'block';
  else
    document.getElementById('upstream_tab').style.display = 'none';
  document.getElementById('downstream_tab').style.display = 'none';
  return;
}
.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg .tg-s268 {
  text-align: left
}
<input type="radio" name="rad1" onclick="streamverify(0)">Cookies
<input type="radio" name="rad1" onclick="streamverify(1)">Candies

<div id="upstream_tab">
  <table class="tg">
    <tr>
      <th class="tg-s268">Cookies</th>
    </tr>
    <tr>
      <td class="tg-s268"></td>
    </tr>
  </table>
</div>



<br>
<div id="downstream_tab">
  <table class="tg">
    <tr>
      <th class="tg-s268">Candies</th>
    </tr>
    <tr>
      <td class="tg-s268"></td>
    </tr>
  </table>
</div>

Upvotes: 2

Views: 69

Answers (4)

Ciccio
Ciccio

Reputation: 468

I suggest to use also the onchange function instead of onclick function

<input type="radio" name="rad1" value="0" onchange="streamverify(this);">Cookies
<input type="radio" name="rad1" value="1" onchange="streamverify(this);">Candies

and for Javascript change

function streamverify(x) {
  if (x.value == 0) {
    document.getElementById('upstream_tab').style.display = 'block';
    document.getElementById('downstream_tab').style.display = 'none';
  } else if (x.value == 1) {
    document.getElementById('downstream_tab').style.display = 'block';
    document.getElementById('upstream_tab').style.display = 'none';
  } else {
    document.getElementById('upstream_tab').style.display = 'none';
    document.getElementById('downstream_tab').style.display = 'none';
  }
}

Upvotes: 1

satwik
satwik

Reputation: 607

Please refer to the link for the updated one

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

Upvotes: 1

Sudhir Ojha
Sudhir Ojha

Reputation: 3305

Just correct your if else condition like following:

function streamverify(x) {
  if (x == 0) {
    document.getElementById('upstream_tab').style.display = 'block';
    document.getElementById('downstream_tab').style.display = 'none';
  } else {
    document.getElementById('downstream_tab').style.display = 'block';
    document.getElementById('upstream_tab').style.display = 'none';
  }
  return;
}
.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg .tg-s268 {
  text-align: left
}
<input type="radio" name="rad1" onclick="streamverify(0)">Cookies
<input type="radio" name="rad1" onclick="streamverify(1)">Candies

<div id="upstream_tab">
  <table class="tg">
    <tr>
      <th class="tg-s268">Cookies</th>
    </tr>
    <tr>
      <td class="tg-s268"></td>
    </tr>
  </table>
</div>



<br>
<div id="downstream_tab">
  <table class="tg">
    <tr>
      <th class="tg-s268">Candies</th>
    </tr>
    <tr>
      <td class="tg-s268"></td>
    </tr>
  </table>
</div>

Upvotes: 2

michaelitoh
michaelitoh

Reputation: 2340

You have to fix your if conditions.

function streamverify(x) {
  if (x == 0) {
    document.getElementById('downstream_tab').style.display = 'none';
    document.getElementById('upstream_tab').style.display = 'block';
  } else if (x == 1) {
    document.getElementById('downstream_tab').style.display = 'block';
    document.getElementById('upstream_tab').style.display = 'none';
  }

}
.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg .tg-s268 {
  text-align: left
}
<input type="radio" name="rad1" onclick="streamverify(0)">Cookies
<input type="radio" name="rad1" onclick="streamverify(1)">Candies

<div id="upstream_tab">
  <table class="tg">
    <tr>
      <th class="tg-s268">Cookies</th>
    </tr>
    <tr>
      <td class="tg-s268"></td>
    </tr>
  </table>
</div>



<br>
<div id="downstream_tab">
  <table class="tg">
    <tr>
      <th class="tg-s268">Candies</th>
    </tr>
    <tr>
      <td class="tg-s268"></td>
    </tr>
  </table>
</div>

Upvotes: 1

Related Questions