Как исправить сортировку по алфавиту , чтобы можно было сортировать несколько разных списков? (в теге pre)

У меня есть вот такой код

<script>  
    function сортировать() {  
        // Получаем содержимое тега <pre>  
        var текст = document.getElementById('текст').textContent;  
  
        // Разбиваем текст на массив слов  
        var слова = текст.split(/\s+/);  
  
        // Сортируем массив слов  
        слова.sort(); 
        document.getElementById('текст').textContent = слова.join('\n');  
    }  
</script>  

<pre id="текст">  
    Банан
    Арбуз
    Юла
    Валера
    Яков
    Туз 
</pre>  
 <button onclick="сортировать()">Сортировать</button>  
<pre id="текст">  
    Банан
    Арбуз
    Юла
    Валера
    Яков
    Туз 
</pre>  
<button onclick="сортировать()">Сортировать</button>  

Он сортирует слова по алфавиту , но проблема в том , что лишь для одного списка (точнее не списка , а не знаю как это правильно назвать , ну вообщем слова в теге pre) , подскажите пожалуйста как сделать так что бы можно было отсортировывать сразу несколько


Ответы (1 шт):

Автор решения: UModeL

Если разметка будет в точности такой и не будет меняться, то можно получать предыдущий элемент для нажатой кнопки:

function сортировать(btn) {
  // Получаем содержимое тега <pre>  
  var текст = btn.previousElementSibling.textContent;
  // Разбиваем текст на массив слов  
  var слова = текст.split(/\s+/);
  // Сортируем массив слов  
  слова.sort();
  btn.previousElementSibling.textContent = слова.join('\n');
}
<pre>  
    Банан
    Арбуз
    Юла
    Валера
    Яков
    Туз 
</pre>
<button onclick="сортировать(this)">Сортировать</button>
<pre>  
    Банан
    Арбуз
    Юла
    Валера
    Яков
    Туз 
</pre>
<button onclick="сортировать(this)">Сортировать</button>

Но, правильно - это назначить уникальный ID (каковым он и должен быть):

function сортировать(id) {
  // Получаем содержимое тега <pre>  
  var текст = document.getElementById(id).textContent;
  // Разбиваем текст на массив слов  
  var слова = текст.split(/\s+/);
  // Сортируем массив слов  
  слова.sort();
  document.getElementById(id).textContent = слова.join('\n');
}
<pre id="текст1">  
    Банан
    Арбуз
    Юла
    Валера
    Яков
    Туз 
</pre>
<button onclick="сортировать('текст1')">Сортировать</button>
<pre id="текст2">  
    Банан
    Арбуз
    Юла
    Валера
    Яков
    Туз 
</pre>
<button onclick="сортировать('текст2')">Сортировать</button>

→ Ссылка