JavaScript, если нажать кнопку, а затем сделать что-то

Question

Я хочу иметь 2 кнопки. Кнопку A при нажатии добавляет в массив A. Кнопка B> Массив B.

var names = ['Hannah', 'Lucy', 'Brenda', 'Lauren', 'Mary']; 

<button id="likebutton" type="button">Like</button> 
<button id="dislikebutton" type="button">Dislike</button> 
function likeOrDislike(){ 
    var off = true; 
    document.getElementById('likeButton').onClick = function(){ 
    var off = false; 
    } 
    document.getElementById('dislikeButton').onClick = function(){ 
    var off = true; 
    } 
    if(off = false) { 
    liked.push(names[0]) 
    names.splice(0, 1) 
    } 
    else if (off = true) { 
    disliked.push(names[0]) 
    names.splice(0, 1) 
    } 
}; 

Тогда я вызываю эту функцию в это время цикла:

while(names.length > 0){ 
    document.getElementById('demo').innerHTML = names[0]; 
    likeOrDislike() 
}; 

Я уверен, что есть лучший способ сделать это, то эта ужасная переменная. Я получаю эту ошибку в данный момент

tinder.html:25 Uncaught TypeError: Cannot set property 'onClick' of null

Answer 1

Использование .addEventListener('click', callback) или .onclick вместо .onClick

Для сравнения значения используются двойные или тройные == равных ===

Не используйте while в таком контексте. Функция будет циклироваться все время!

Узнайте больше о Javascript, например, на w3schools

Я создал работающий jsFiddle для вас.

Вот код:

var names = ['Hannah', 'Lucy', 'Brenda', 'Lauren', 'Mary'], 
liked = [], 
disliked = []; 

showName(); 
document.getElementById('likeButton').onclick = like; 
document.getElementById('dislikeButton').onclick = dislike; 

function showName(){ 
     var name = names[0]; 
    if(!name){ 
     name = "The End"; 
    }  
    document.getElementById('demo').innerHTML = name; 
} 

function like(){ 
    liked.push(names[0]); 
    names.splice(0, 1); 
    showName(); 
} 

function dislike(){ 
    disliked.push(names[0]); 
    names.splice(0, 1); 
    showName(); 
}