Помощь по коду


#1
Имеется следующий код:

<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>

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

#2
<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>

#3

я бы переписал послностью код. И поменял оформление, позиционирование кнопок с помощью nbsp не самая лучшая идея, намного проще это сделать через CSS

<div id="output"></div>

<button id="btn1">Вперед</button>
<button id="btn2">Назад</button>

<script>
    var message1 = "Test Test Test Test Test Test Test Test Test Test Test Test";
    var message2 = "Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2";
    var message3 = "Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3";

    var outputDiv = document.getElementById("output");
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");

    
    function type(message) {
        var i = 0;
        outputDiv.innerHTML = "";
        
        var interval = setInterval(function () {
            outputDiv.innerHTML += message[i]; // вывести один символ из сообщения
            i++;
            if (i == message.length) clearInterval(interval); // остановить интервал если вывели все сообщение
        }, 20);
    }

    // клик по кнопке вперед
    btn1.onclick = function () {
        type(message2);
    }
    
    // клик по кнопке назад
    btn2.onclick = function () {
        type(message3);
    }

    // запуск после загрузки
    type(message1);

</script>

#4

Объясните пожалуйста более подробно функцию function changeBg(direction)


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

Желательно не использовать глобальные переменные!