Вывод текста под нужным номером
 

Всем добрый вечер.
Имеется около ста текстов.
Требуется, чтобы когда пользователь вводил ползунками определенное число, отображалось содержимое нужного текста. Подскажите пожалуйста, как это реализовать?
Тексты пока напечатаны в отдельный файл. Переменные текстам не объявлял. Куда лучше их поместить, в эту же страницу или на новую? И как лучше каждый текст объявить переменной?
Нашел, что можно каждый текст объявить как var u333 = "Привет". Но это не удобный способ, так как текст придется записывать в строчку, что плохо при дальнейшем редактировании (текст содержит маркированные списки).

<form onsubmit="return false"
oninput="d.value = 'u' + a.value + b.value + c.value">

<input name="a" type="range" min=1 max=5>
<input name="b" type="range" min=1 max=5>
<input name="c" type="range" min=1 max=5>

<output name="d">

<script>
var u333 = "Привет"
document.write(d); --Здесь должно быть Привет при a=b=c=3
</script>

</form>

Заранее спасибо

я бы наверно вывел прям на страницу каждый текст в скрытый див
(c div.style.display='none') и со своим id

Div точно лучше, так как является блочным. Но как-то не получилось сделать невидимым.

<div.style.display='none' id="u111">
   <ul><li>Fisher</li>
             <ul><li>John</li>
             </ul>
   </ul>
</div>

И как потом невидимый div сделать отображаемый при указании пользователем номера его id

arkada38,

<div id="div1">
   <ul><li>Fisher</li>
             <ul><li>John</li>
             </ul>
   </ul>
</div>
<div id="div2" style="display: none;">
   <ul><li>John</li>
             <ul><li>Fisher</li>
             </ul>
   </ul>
</div>
<input type="button" value="click" onClick="document.getElementById('div2').style.display == 'none' ? (document.getElementById('div2').style.display = 'block', document.getElementById('div1').style.display = 'none') : (document.getElementById('div2').style.display = 'none', document.getElementById('div1').style.display = 'block')">

Таким образом, нажимая на кнопку, меняется div1 на div2 и наоборот.
Но надо без кнопки, и чтобы пользователь вводил порядковый номер дива вручную.
Используя ползунки, пользователь вводит уникальный номер дива, а рядом выводится содержимое дива.

<form onsubmit="return false"
oninput="d.value = 'u' + a.value + b.value + c.value">

<input name="a" type="range" min=1 max=5>
<input name="b" type="range" min=1 max=5>
<input name="c" type="range" min=1 max=4>

<output name="d">

<div id="u554" style="display: none;">
Содержимое первого
</div>
<div id="u553" style="display: none;">
Содержимое второго
</div>

</form>

То есть d и показывает id нужного дива. Какой нужно ввести код, чтобы выводилось содержимое нужного дива?

arkada38,

<script>
function func(id) {
    for (i=0; i < document.getElementById("divs").getElementsByTagName("div").length; i++) {
        document.getElementById("divs").getElementsByTagName("div")[i].style.display = "none";
        if (document.getElementById("divs").getElementsByTagName("div")[i].id == id) { document.getElementById("divs").getElementsByTagName("div")[i].style.display = "block"; }
    }
}
</script>
<form onsubmit="return false" oninput="func('u' + a.value + b.value + c.value);">
<input name="a" type="range" min=1 max=5>
<input name="b" type="range" min=1 max=5>
<input name="c" type="range" min=1 max=4>

<output name="d">

<div id="divs">
<div id="u554" style="display: none;">
Содержимое первого
</div>
<div id="u553" style="display: none;">
Содержимое второго
</div>
</div>

</form>

Огромное спасибо, так все работает как надо!