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

[arkada38]

Всем добрый вечер.
Имеется около ста текстов.
Требуется, чтобы когда пользователь вводил ползунками определенное число, отображалось содержимое нужного текста. Подскажите пожалуйста, как это реализовать?
Тексты пока напечатаны в отдельный файл. Переменные текстам не объявлял. Куда лучше их поместить, в эту же страницу или на новую? И как лучше каждый текст объявить переменной?
Нашел, что можно каждый текст объявить как 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>

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

[vadim5june]

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

[arkada38]

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

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

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

[lord2kim]

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')">

[arkada38]

Таким образом, нажимая на кнопку, меняется 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 нужного дива. Какой нужно ввести код, чтобы выводилось содержимое нужного дива?

[lord2kim]

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>

[arkada38]

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