Смена текста при нажатии на кнопку.

[Anorions]

Добрый день всем. В JS и CSS я новенький, поэтому прошу помощи.
Имеется код:

	
	
<div style="text-align:left;">
<div id="type_text" class="box">
<script language="JavaScript">
var text = 'текст 1 текст1 текст 1.<br> '+
' ...текст 1 текст1 текст 1<br>'+ 
' текст 1 текст1 текст 1.'+ 
' текст 1 текст1 текст 1,'+ 
' текст 1 текст1 текст 1'+ 
' текст 1 текст1 текст 1';
i = 0;
function type(){
	i++;
	if( i <= text.length )
	if(text.substr(i-1,1)=='<'){ 
     document.getElementById("type_text").innerHTML +='<br>' 
    }
	else
	{ 
		document.getElementById("type_text").innerHTML = text.substr(0, i);
	}
	setTimeout( type, 20 );
}
type();
</script>
</div>
</div>
<div id="dalee">
<form>
<table style="height: 70%; width: 60%; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="text-align: left;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<input onclick="changeBg(this);return false;" type="button" value="Назад" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</td>
<td style="text-align: right;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<input onclick="changeBg(this);return false;" type="button" value="Читать далее" /></td>
</tr>
</tbody>
</table>
</form>
</div>

При нажатии кнопки "Читать далее" должен появиться другой текст взамен старого в том же блоке, а при нажатии кнопки назад, должен появиться предыдущий текст. Прошу помощи и по возможности пример кодом и из за того, что новенький в этом всём, более простым языком объяснить.
P.S. если в этом коде что то смущает, поправьте, пожалуйста.

[Naive]

<div style="text-align:left;">
<div id="type_text" class="box">
<script language="JavaScript">
var text = ['текст 1 текст1 текст 1.<br> '+
' ...текст 1 текст1 текст 1<br>'+ 
' текст 1 текст1 текст 1.'+ 
' текст 1 текст1 текст 1,'+ 
' текст 1 текст1 текст 1'+ 
' текст 1 текст1 текст 1',
  'Умножение вектора на число, конечно, допускает интеграл по поверхности. Аксиома, в первом приближении, стремительно оправдывает детерминант. Лемма отрицательна. Собственное подмножество ускоряет абсолютно сходящийся ряд, таким образом сбылась мечта идиота - утверждение полностью доказано.',

  'Матожидание последовательно. Нормальное распределение, конечно, поразительно. Согласно последним исследованиям, огибающая семейства прямых уравновешивает абстрактный сходящийся ряд, дальнейшие выкладки оставим студентам в качестве несложной домашней работы.',

  'Интеграл по бесконечной области продуцирует постулат, что неудивительно. Непрерывная функция, общеизвестно, искажает интеграл Гамильтона. Относительная погрешность ускоряет абстрактный интеграл Гамильтона, как и предполагалось. Достаточное условие сходимости небезынтересно изменяет комплексный интеграл от функции комплексной переменной.'
];
var i = 0;
var target = 0;
var timer;

function type( text ){
  clearTimeout( timer );
  i++;
  if( i <= text.length )
  if(text.substr(i-1,1)=='<'){ 
     document.getElementById("type_text").innerHTML +='<br>' 
    }
  else
  { 
    document.getElementById("type_text").innerHTML = text.substr(0, i);
  }
  timer = setTimeout( function(){ type(text) }, 20 );
};
type( text[ target ] );

function changeBg( direction ){
  i = 0;
  target = Math.min(
    text.length-1,
    Math.max(
      0,
      target + direction
    )
  );
  type( text[ target ] );
};

</script>
</div>
</div>
<div id="dalee">
<form>
<table style="height: 70%; width: 60%; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="text-align: left;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<input onclick="changeBg(-1);return false;" type="button" value="Назад" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</td>
<td style="text-align: right;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<input onclick="changeBg(1);return false;" type="button" value="Читать далее" /></td>
</tr>
</tbody>
</table>
</form>
</div>

как-то так

[Anorions]

Спасибо большое! А не могли бы, пожалуйста, немного объяснить то, что сделали? function changeBg( direction ) особенно эту функцию, пожалуйста

[Naive]

function changeBg( direction ){// принимаем внутрь смещение от текущего куска текста
  i = 0;// обнуляем глобальный счетчик символов для ф-ии type()
  target = Math.min( // ищем айди нового куска текста
    text.length-1, // отсекаем полученные значения, которые превышают массив
    Math.max(
      0, // отсекаем отрицательные значения
      target + direction // получаем значение для сравнения с минимальным и максимальным
    )
  );
  type( text[ target ] ); // перезапускаем функцию
};

п.с. глобальные переменные -- сущее зло