There is a code:

var arr = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30); var RandElement = Math.floor(Math.random() * arr.length); var link = ''; console.log(RandElement); 

And swith :

  switch (RandElement) { case 0: var SummDok = document.getElementById('left_block_menu'), SummSumm='текст'; SummDok.innerHTML = SummSumm; break; case 1: var SummDok = document.getElementById('left_block_menu'), SummSumm='текст'; SummDok.innerHTML = SummSumm; break; ... 

And everything is done perfectly, the random number is determined, and depending on it, one or another text is issued. But there is another button, when you click on that, the number should increase by one and produce the result without refreshing the page (taking into account the changed number, that is, if there was case3 , then after pressing the text should be taken from case4 . I only did it :

  document.querySelector('.but_rek_left_block3').onclick = function() { RandElement++; if (RandElement == 31) { RandElement = 0; } console.log(RandElement); switch (RandElement) { case 0: var SummDok = document.getElementById('left_block_menu'), SummSumm='текст'; SummDok.innerHTML = SummSumm; break; case 1: var SummDok = document.getElementById('left_block_menu'), SummSumm='текст'; SummDok.innerHTML = SummSumm; break; ... 

But this is an increase in the code, since both are swith by 30, and in the button too .. can there be a way to shorten it all?

Here is the div (button):

 <div class="but_rek_left_block3" id="but_rek_left_block3"> <div><spans>Пропустить</spans></div> </div> 
  • @Qwertiy, do you suggest duplicating it? - Grundy
  • And why do we need arr if only its length is used and why switch, if the case in it performs the same actions - Mike
  • Write as convenient. What is there to cut something? - user208916
  • @Hipster ye 30 keystov in switch, of course, this should be rewritten as in the example provided by Qwertiy - Rostyslav Kuzmovych

2 answers 2

If I correctly understood the task and should simply be substituted into a div, then the code is:

 var caces = 30; var SummDok = document.getElementById('left_block_menu'); var RandElement = Math.round(- 0.5 + Math.random() * (caces + 1)); function insertValue(){ SummDok.innerHTML = RandElement; } insertValue(); document.querySelector('.but_rek_left_block3').onclick = function() { RandElement +=1; if (RandElement === 31) { RandElement = 0; } insertValue(); } 

    Here is a possible solution. https://jsbin.com/naxelijoro/5/edit?html,js,output

    html:

     <div id="left_block_menu"></div> <div class="but_rek_left_block3" id="but_rek_left_block3"> <div><span>Пропустить</span></div> </div> 

    javascript:

     function insertSumm(RandElement){ var SummSumm = ''; var SummDok = document.getElementById('left_block_menu'); switch (RandElement) { case 0: SummSumm='текст0'; break; case 1: SummSumm='текст1'; break; case 2: SummSumm='текст2'; break; } SummDok.innerHTML = SummSumm; } window.onload = function(){ //здесь переменной length присвоено 2 для примера //вы можете поставить 30 и соответственно расширить функцию insertSumm var length = 2; var RandElement = Math.floor(Math.random() * length); insertSumm(RandElement); var button = document.getElementById('but_rek_left_block3'); button.addEventListener('click', function(){ RandElement++; if(RandElement > length){ RandElement = 0; } insertSumm(RandElement); }); }; 

    It would be better, of course, if you explained what changes depending on what number falls into the switch statement. Then probably it would be possible to eliminate this terrible construction in 30 cases!