CODEWITHSUNDEEP
javascriptshow-hide
schuggerleo
schuggerleo

Reputation: 1

JavaScript: How to display all divs until one gets selected

This is what I want to achieve: If you chose one option only this single div should be displayed and the other ones are hidden.

For now only the div gets hidden which is selected and the others are shown. I can’t get behind why. This is my code I’m working on so far:

    var DynDiv = new Array(1, 2, 3, 4);

    function showSelected(sapna) {
        var t = 'dyndiv' + sapna,
            r, dv;
        for (var i = 0; i < DynDiv.length; i++) {
            r = 'dyndiv' + DynDiv[i];
            dv = document.getElementById(r);
            if (dv) {
                if (t === r) {
                    dv.style.display = 'none';
                } else {
                    dv.style.display = 'block';
                }
            }
        }
        return false;
    }
<body>
<h1>Choose your flavor</h1>
    <select id="flavor" onchange="showSelected(this.value)">
        <option value="1">Sweet</option>
        <option value="2">Bitter</option>
        <option value="3">Salty</option>
        <option value="4">Umami</option>
    </select>

    <div id="dyndiv1" style="display:block;">
		<h3>Div1</h3>
		<p>Sweet Lorem Ipsum</p>
	</div>
    <div id="dyndiv2" style="display:block;">
		<h3>Div2</h3>
		<p>Bitter Lorem Ipsum</p>
	</div>
    <div id="dyndiv3" style="display:block;">
		<h3>Div3</h3>
		<p>Salty Lorem Ipsum</p>
	</div>
    <div id="dyndiv4" style="display:block;">
		<h3>Div4</h3>
		<p>Umami Lorem Ipsum</p>
	</div>
</body>

Thank you for having a look at it!

Upvotes: 0

Views: 49

Answers (4)

Ele
Ele

Reputation: 33726

You've put the wrong condition.

This the change in your code:

if (t === r) {
    dv.style.display = 'block';
  } else {
    dv.style.display = 'none';
  }

Snippet:

var DynDiv = new Array(1, 2, 3, 4);

function showSelected(sapna) {
  var t = 'dyndiv' + sapna,
    r, dv;
  for (var i = 0; i < DynDiv.length; i++) {
    r = 'dyndiv' + DynDiv[i];
    dv = document.getElementById(r);
    if (dv) {
      if (t === r) {
        dv.style.display = 'block';
      } else {

        dv.style.display = 'none';
      }
    }
  }
  return false;
}
<body>
  <h1>Choose your flavor</h1>
  <select id="flavor" onchange="showSelected(this.value)">
        <option value="1">Sweet</option>
        <option value="2">Bitter</option>
        <option value="3">Salty</option>
        <option value="4">Umami</option>
    </select>

  <div id="dyndiv1" style="display:block;">
    <h3>Div1</h3>
    <p>Sweet Lorem Ipsum</p>
  </div>
  <div id="dyndiv2" style="display:block;">
    <h3>Div2</h3>
    <p>Bitter Lorem Ipsum</p>
  </div>
  <div id="dyndiv3" style="display:block;">
    <h3>Div3</h3>
    <p>Salty Lorem Ipsum</p>
  </div>
  <div id="dyndiv4" style="display:block;">
    <h3>Div4</h3>
    <p>Umami Lorem Ipsum</p>
  </div>
</body>

Upvotes: 0

S&#233;bastien
S&#233;bastien

Reputation: 12139

You are 99% there... You just mixed up the CSS properties

if (t === r) {
    dv.style.display = 'block';
} else {
    dv.style.display = 'none';
}


var DynDiv = new Array(1, 2, 3, 4);

function showSelected(sapna) {
  var t = 'dyndiv' + sapna,
    r, dv;
  for (var i = 0; i < DynDiv.length; i++) {
    r = 'dyndiv' + DynDiv[i];
    dv = document.getElementById(r);
    if (dv) {
      if (t === r) {
        dv.style.display = 'block';
      } else {
        dv.style.display = 'none';
      }
    }
  }
  return false;
}
<body>
  <h1>Choose your flavor</h1>
  <select id="flavor" onchange="showSelected(this.value)">
        <option value="1">Sweet</option>
        <option value="2">Bitter</option>
        <option value="3">Salty</option>
        <option value="4">Umami</option>
    </select>

  <div id="dyndiv1" style="display:block;">
    <h3>Div1</h3>
    <p>Sweet Lorem Ipsum</p>
  </div>
  <div id="dyndiv2" style="display:block;">
    <h3>Div2</h3>
    <p>Bitter Lorem Ipsum</p>
  </div>
  <div id="dyndiv3" style="display:block;">
    <h3>Div3</h3>
    <p>Salty Lorem Ipsum</p>
  </div>
  <div id="dyndiv4" style="display:block;">
    <h3>Div4</h3>
    <p>Umami Lorem Ipsum</p>
  </div>
</body>

Upvotes: 0

Corey Davenport
Corey Davenport

Reputation: 81

Try reversing dv.style.display = 'none'; and dv.style.display = 'block';

var DynDiv = new Array(1, 2, 3, 4);

    function showSelected(sapna) {
        var t = 'dyndiv' + sapna,
            r, dv;
        for (var i = 0; i < DynDiv.length; i++) {
            r = 'dyndiv' + DynDiv[i];
            dv = document.getElementById(r);
            if (dv) {
                if (t === r) {
                    dv.style.display = 'block';
                } else {
                    dv.style.display = 'none';
                }
            }
        }
        return false;
    }

Upvotes: 0

sumeet kumar
sumeet kumar

Reputation: 2648

You have your logic reversed as you want to hide others which are not selected.

 if (t === r) {
    dv.style.display = 'block';
} else {
     dv.style.display = 'none';
}    


var DynDiv = new Array(1, 2, 3, 4);

    function showSelected(sapna) {
        var t = 'dyndiv' + sapna,
            r, dv;
        for (var i = 0; i < DynDiv.length; i++) {
            r = 'dyndiv' + DynDiv[i];
            dv = document.getElementById(r);
            if (dv) {
                if (t === r) {
                    dv.style.display = 'block';
                } else {
                    dv.style.display = 'none';
                }
            }
        }
        return false;
    }
<body>
<h1>Choose your flavor</h1>
    <select id="flavor" onchange="showSelected(this.value)">
        <option value="1">Sweet</option>
        <option value="2">Bitter</option>
        <option value="3">Salty</option>
        <option value="4">Umami</option>
    </select>

    <div id="dyndiv1" style="display:block;">
		<h3>Div1</h3>
		<p>Sweet Lorem Ipsum</p>
	</div>
    <div id="dyndiv2" style="display:block;">
		<h3>Div2</h3>
		<p>Bitter Lorem Ipsum</p>
	</div>
    <div id="dyndiv3" style="display:block;">
		<h3>Div3</h3>
		<p>Salty Lorem Ipsum</p>
	</div>
    <div id="dyndiv4" style="display:block;">
		<h3>Div4</h3>
		<p>Umami Lorem Ipsum</p>
	</div>
</body>

Upvotes: 1

Related Questions