Не работают кнопки через js

Question

Не работают кнопки через js

Алексей Скиргико Знаток (463), на голосовании 10 месяцев назад

JS:
document.getElementById('add-Button').addEventListener('click', function() {
var actor=prompt('Введите имя актера');
if (actor) {
var li = document.createElement('li');
}
};
document.getElementById('remove-Button').addEventListener('click', function() {
var lastActor = document.getElementById('actor-list').lastElementChild;
if(lastActor) {
lastActor.remove();
}
};
HTML:
<html>
<head>
<meta charset="UTF-8">
<title> Слово Пацана</title>
<link rel="stylesheet" type="text/css" href="tr.css" />
</head>
<body>
<h1> Список актеров сериала "Слово пацана"</h1>
<div class='container'>
<div class='actors-container'>
<ul id='actors-list'>
<li>Иван Янковский</li>
<li>Анастасия Красовская</li>
</ul>
<div class='button-container'>
<button id='add-button'> Добавить в список</button>
<button id='remove-button'> Удалить из списка</button>
</div>
</div>
<div class='video-container'>
<iframe width=560 height=315 src=' https://www.slovo-pacana1s.online/ ' >
</div>
</div>
<script src='tr.js'></script>
</body>
</html>

Answer 1

Kredwi Мудрец (11239) 11 месяцев назад

А код скинуть не?
JavaScript - Зависит от РеГиСтРа.
Добавь атрибут onclick="названиеФункции()"

Алексей СкиргикоЗнаток (463) 11 месяцев назад

обновил )

Алексей СкиргикоЗнаток (463) 11 месяцев назад

Добавь атрибут onclick="названиеФункции()" это куда?(

Kredwi Мудрец (11239) Алексей Скиргико, в html <button id='add-button' onclick="названиеФункции()"> Добавить в список</button> <button id='remove-button' onclick="названиеФункции()"> Удалить из списка</button>

Алексей СкиргикоЗнаток (463) 11 месяцев назад

Спасибо за помощь!

Answer 2

и не будут))

  
 
     
    Слово Пацана 
     
 
 
    Список актеров сериала "Слово пацана"
 
     
         
             
                Иван Янковский
 
                Анастасия Красовская

 document.getElementById('add-button').addEventListener('click', function() { 
    var actor = prompt('Введите имя актера'); 
    if (actor) { 
        var li = document.createElement('li'); 
        li.textContent = actor; 
        document.getElementById('actors-list').appendChild(li); 
    } 
}); 
 
document.getElementById('remove-button').addEventListener('click', function() { 
    var lastActor = document.getElementById('actors-list').lastElementChild; 
    if (lastActor) { 
        lastActor.remove(); 
    } 
});

Answer 3

В функции add-Button() вы не добавляете элемент li в список actors-list. Вы просто создаете его, но не добавляете. Чтобы добавить элемент в список, вы можете использовать метод appendChild():

 var li = document.createElement('li'); 
li.textContent = actor; 
document.getElementById('actors-list').appendChild(li);

В функции remove-Button() вы не проверяете, есть ли в списке хотя бы один элемент. Если список пуст, то переменная lastActor будет иметь значение null, и метод remove() вызовет ошибку. Чтобы избежать этой ошибки, вы можете использовать оператор ||:

 var lastActor = document.getElementById('actors-list').lastElementChild; 
if (lastActor || lastActor === null) { 
  lastActor.remove(); 
}

Код

 document.getElementById('add-Button').addEventListener('click', function() { 
  var actor = prompt('Введите имя актера'); 
  if (actor) { 
    var li = document.createElement('li'); 
    li.textContent = actor; 
    document.getElementById('actors-list').appendChild(li); 
  } 
}); 
 
document.getElementById('remove-Button').addEventListener('click', function() { 
  var lastActor = document.getElementById('actors-list').lastElementChild; 
  if (lastActor || lastActor === null) { 
    lastActor.remove(); 
  } 
});