這是因為你第一次按按鈕之後執行後來解決方法是在selectButton，這個 function 會幫div.menu button加上 click 事件所以你第一次按鈕之後，只是加上這個事件，並不會被執行到第二次按的時候因為已經有加上 click 事件了，所以才會有作用。
selectButton 函式中拿掉 click 事件，改成每次清空兩個語言按鈕的 selected class，然後再加上 selected class 到點選的按紐。function selectButton(lang) {
$('#zh-tw').removeClass('selected');
$('#en').removeClass('selected');
$('#' + lang).addClass('selected');
}
button 做出切換語言的按鈕，但想要讓畫面好看，所以選擇用 button 然後加了一些 CSS，並且讓當前語言的按鈕有被選取的感覺。可是在切換語言的時候，會出現一個外框，而且已經在 CSS 中設 border: none;，所以一直搞不清楚為什麼會有外框。
outline: none; 才可以。應該是 HTML 對 button 的原有設定，要是沒有偷看同學的作業我可能會卡關更久 QAQ你看一下上次作業的這一段：解答之後豁然開朗啊！果然對 Vanilla js 還不太懂，所以還一直用 jQuery 的思考方式去寫。
error: function(err) { $container.append('<div class="error">Failed to Load Twitch Data.</div>'); }這邊的err是$.ajax幫你傳進來的錯誤參數 可是當這次改寫成 vanilla js 的時候，你會發現你沒有err這個東西可以拿了 為什麼？因為它沒有給你，所以你這一段：
request.onreadystatechange = function () { if (this.readyState === 4 && this.status === 200) { var response = JSON.parse(this.responseText); callBack(null, response); } else { callBack(err); } }他才會出這個錯誤：Uncaught ReferenceError: err is not defined at XMLHttpRequest.request.onreadystatechange，意思就是err這個變數沒有宣告，也找不到這東西在哪 要改掉的話，你可以自己建一個 Error 出來，或是傳一個字串其實也可以
request.onreadystatechange = function () { if (this.readyState === 4 && this.status === 200) { var response = JSON.parse(this.responseText); callBack(null, response); } else { callBack(new Error('xhr not ready or status not equal to 200')); } }
success: function (response) {
var streams = response.streams;
for (var i = 0; i < streams.length; i++) {
$(getViewbox(streams[i])).insertBefore($('#first_viewbox'));
}
$('.container').append(
'<div class="viewbox">'+
'<div class="preview">'+
'<a href="'+url+'" target="_blank"><img src="'+channel.preview.medium+'"></a>'+
'</div>'+
'<div class="bottom">'+
'<div class="headpic">'+
'<img src="'+channel.channel.logo+'">'+
'</div>'+
'<div class="intro">'+
'<div class="channel_name">'+channel.channel.status+'</div>'+
'<div class="host_name">'+channel.channel.display_name+'</div>'+
'</div>'+
'</div>'+
'</div>');