Вставка php в код html

И к каждому своему js событию вешаешь делегирование

Код (Javascript):

1. document.addEventListener('DOMContentLoaded', function()
2. {
3.  
4.     document.addEventListener('click', function(event)
5.     {
6.      
7.         var target = event.target;
8.  
9.         var id = target.getAttribute('id'),
10.             video = document.querySelector('#video-article');
11.  
12.         if(id == '#knopka1')
13.         {
14.             getAjax('japan/video-article/ohsawa1.txt', function(data){
15.  
16.                 video.innerHTML = data;
17.             });
18.         }
19.  
20.         if(id == '#knopka2')
21.         {
22.             getAjax('japan/video-article/ohsawa2.txt', function(data){
23.  
24.                 video.innerHTML = data;
25.             });
26.         }
27.     })
28. })
29.  
30.  
31. function getAjax(url, success) {
32.     var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
33.     xhr.open('GET', url);
34.     xhr.onreadystatechange = function() {
35.         if (xhr.readyState>3 && xhr.status==200) {success(xhr.responseText);}
36.         if (xhr.status==500) {
37.             if( xhr.responseText.length !== 0 ){
38.                 console.log( xhr.responseText );
39.             }
40.         }
41.     };
42.     xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
43.     xhr.send();
44.     return xhr;
45. }

И не плоди id, сделай один класс. Добавь ему какой нибудь атрибут. И при нажатии смотри на этот трибут

 

Смотри, ты можешь его уменьшить так, не плоди id

HTML:

1. <button class="k_video" url='japan/video-article/ohsawa1.txt'>knopka1</button>
2. <button class="k_video" url='japan/video-article/ohsawa2.txt'>knopka2</button>
3. <button class="k_video" url='japan/video-article/ohsawa3.txt'>knopka3</button>
4. <button class="k_video" url='japan/video-article/ohsawa4.txt'>knopka4</button>
5. <button class="k_video" url='japan/video-article/ohsawa5.txt'>knopka5</button>
6. <button class="k_video" url='japan/video-article/ohsawa6.txt'>knopka6</button>
7. <button class="k_video" url='japan/video-article/ohsawa7.txt'>knopka7</button>
8. <button class="k_video" url='japan/video-article/ohsawa8.txt'>knopka8</button>
9. <script>
10. document.addEventListener('DOMContentLoaded', function()
11. {
12.  
13.     document.addEventListener('click', function(event)
14.     {
15.         var target = event.target;
16.  
17.         var k_video = target.classList.contains("k_video"),
18.             video = document.querySelector('#video-article');
19.  
20.         if(k_video)
21.         {
22.             var url = target.getAttribute('url');
23.  
24.             getAjax(url, function(data){
25.                 video.innerHTML = data;
26.             });
27.         }
28.     })
29. })
30. </script>

 

Короче дальше сам)
--- Добавлено ---
Ты не плодишь под каждый id событие, одно событие на класс. Считываем урл с кнопки. Кода меньше. Ты можешь хоть сотню кнопок создать, js код не увеличится.
Выше продемонстрировал

 

@jKPQ17 давай сам, подумай и сделай.