It should be: I click on the button - the corresponding content is included. Does not work.

function showIt() { var chart = document.getElementsByClassName('chart'); var button = document.getElementsByTagName('input'); function hideAll() { for (i = 0; i < chart.length; i++) { chart[i].style.display = 'none'; } } for (i = 0; i < button.length; i++) { switch (chart[i]) { case chart[0]: hideAll(); chart[0].style.display = 'block'; break; case chart[1]: hideAll(); chart[1].style.display = 'block'; break; case chart[2]: hideAll(); chart[2].style.display = 'block'; break; case 3: hideAll(); chart[3].style.display = 'block'; break; } } } 
 .chart { display: none; } 
 <ul class="navigation"> <a class="main" href="#url">Choose year</a> <li class="n2"><input type="button" value="2011" onclick="showIt()"></li> <li class="n3"><input type="button" value="2012" onclick="showIt()"></li> <li class="n4"><input type="button" value="2013" onclick="showIt()"></li> <li class="n5"><input type="button" value="2014" onclick="showIt()"></li> </ul> <div id="charts"> <div class="chart" id="chart_div1" style="width: 100%; height: 25px;">1</div> <div class="chart" id="chart_div2" style="width: 100%; height: 25px;">2</div> <div class="chart" id="chart_div3" style="width: 100%; height: 25px;">3</div> <div class="chart" id="chart_div4" style="width: 100%; height: 25px;">4</div> </div>

  • one
    Already passed it a few hours ago. This is a training task with a given layout, or what? - Regent
  • Not. I tried to do the same task in pure JS. Everything turned out, except for this stuff. I need to understand on JS how this is done, without jQuery, exactly in my approach. Some little thing I miss. What - I can not understand. - Alex
  • No, not a trifle. A bunch of for-switch-case , devoid of meaning, is, you see, not a trifle. And about "without jQuery" - do I understand correctly that you cannot write code written using jQuery into code without jQuery? - Regent
  • I can not. jQuery only superficially mastered. So far, I’m immersed in JavaScript, trying to do everything only with it. - Alex

1 answer 1

You showIt function does not determine which button was pressed. Accordingly, the necessary block cannot be determined because of this.
Since religion does not allow me to use onclick without good reason, the response uses addEventListener . The logic of the click event handler function does not change.

A variant based on the order of buttons and blocks:

 var charts = document.getElementsByClassName("chart"); var buttons = document.getElementsByTagName("input"); for (var button of buttons) { button.addEventListener("click", function() { for (var i = 0; i < buttons.length; i++) { charts[i].style.display = (buttons[i] == this) ? "block" : "none"; } }); } 
 .chart { display: none; } 
 <ul class="navigation"> <a class="main" href="#url">Choose year</a> <li class="n2"><input type="button" value="2011" /></li> <li class="n3"><input type="button" value="2012" /></li> <li class="n4"><input type="button" value="2013" /></li> <li class="n5"><input type="button" value="2014" /></li> </ul> <div id="charts"> <div class="chart" id="chart_div1" style="width: 100%; height: 25px;">1</div> <div class="chart" id="chart_div2" style="width: 100%; height: 25px;">2</div> <div class="chart" id="chart_div3" style="width: 100%; height: 25px;">3</div> <div class="chart" id="chart_div4" style="width: 100%; height: 25px;">4</div> </div>

A more flexible option using the data attribute, which stores the ID of the corresponding block:

 var charts = document.getElementsByClassName("chart"); var buttons = document.getElementsByTagName("input"); for (var button of buttons) { button.addEventListener("click", function() { var currentChart = document.getElementById(this.dataset.id); for (var chart of charts) { chart.style.display = (chart == currentChart) ? "block" : "none"; } }); } 
 .chart { display: none; } 
 <ul class="navigation"> <a class="main" href="#url">Choose year</a> <li class="n2"><input type="button" value="2011" data-id="chart_div1" /></li> <li class="n3"><input type="button" value="2012" data-id="chart_div2" /></li> <li class="n4"><input type="button" value="2013" data-id="chart_div3" /></li> <li class="n5"><input type="button" value="2014" data-id="chart_div4" /></li> </ul> <div id="charts"> <div class="chart" id="chart_div1" style="width: 100%; height: 25px;">1</div> <div class="chart" id="chart_div2" style="width: 100%; height: 25px;">2</div> <div class="chart" id="chart_div3" style="width: 100%; height: 25px;">3</div> <div class="chart" id="chart_div4" style="width: 100%; height: 25px;">4</div> </div>

  • and through surfacing there is no more right? not to produce handles - torokhkun
  • one
    @torokhkun no. Firstly, from the point of view of logic, it is necessary to handle clicking on buttons — strangely, it will see the processing of a click on some parent element. Secondly, from the point of view of resources, yes, adding one handler will be faster (although there is too little time to bother about it), but when an event is triggered, the ascent option will work longer (again, anyway time is irrelevant to the click event). So the main argument remains the first, and the second can be recalled in events that are generated many times in a second. - Regent