zh-tw Fix flaws:

1. id 參考英文版改回英文字串
2. 圖片連結修正與新增三張 zh-tw 版對應圖片
3. 修正 http 成 https
4. 將 zh-tw 缺失的三頁連結按提示改成 en-us 相對路徑
5. 修改指向同頁的連結中文名稱

4 files changed, 23 insertions, 23 deletions

diff --git a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/console-log-output.png b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/console-log-output.png
new file mode 100644
index 0000000000..9e532a9a36
--- /dev/null
+++ b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/console-log-output.png
diff --git a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.html b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.html
index 2b8a058524..3d108aea3b 100644
--- a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.html
+++ b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.html
@@ -22,7 +22,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
  </tbody>
 </table>
 
-<h2 id="錯誤類型">錯誤類型</h2>
+<h2 id="Types_of_error">錯誤類型</h2>
 
 <p>一般來說，當你的編碼有錯誤時，主要有兩種類型</p>
 
@@ -33,9 +33,9 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 
 <p>好的，但事情並沒有那麼單純——當你越深入，就會發現更多不同的因素。但上述的分類已經足夠應付初期的工程師職涯了。接著，我們將更深入來討論這兩個類型。</p>
 
-<h2 id="一個錯誤範例">一個錯誤範例</h2>
+<h2 id="An_erroneous_example">一個錯誤範例</h2>
 
-<p>讓我們從剛剛的猜數字遊戲開始——在這個版本中，我們將故意引入一些錯誤以便從中學習。前往Github下載一份<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a>（或運行線上版 <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">running live here</a>）。</p>
+<p>讓我們從剛剛的猜數字遊戲開始——在這個版本中，我們將故意引入一些錯誤以便從中學習。前往Github下載一份<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a>（或運行線上版 <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">running live here</a>）。</p>
 
 <ol>
  <li>首先，在編輯器與瀏覽器分別開啟你剛下載檔案。</li>
@@ -48,12 +48,12 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 
 <p>現在，先讓我們來看看開發者主控台有沒有提示我們任何錯誤，然後試著修正他們。你會在接下來的段落中學到如何修正這些錯誤。</p>
 
-<h2 id="修復語法錯誤">修復語法錯誤</h2>
+<h2 id="Fixing_syntax_errors">修復語法錯誤</h2>
 
-<p>在前篇文章中我們讓你在<a href="/zh-TW/docs/Learn/Common_questions/What_are_browser_developer_tools" rel="nofollow">開發者工具JavaScript console</a>中輸入了一些JavaScript指令（如果你不記得怎麼打開這個東西，點選前面的連結複習一下）。更重要的是，主控台在瀏覽器的JavaScript引擎讀取到有語法錯誤的JavaScript時會提示一些錯誤訊息。現在讓我們來看看：</p>
+<p>在前篇文章中我們讓你在<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools" rel="nofollow">開發者工具JavaScript console</a>中輸入了一些JavaScript指令（如果你不記得怎麼打開這個東西，點選前面的連結複習一下）。更重要的是，主控台在瀏覽器的JavaScript引擎讀取到有語法錯誤的JavaScript時會提示一些錯誤訊息。現在讓我們來看看：</p>
 
 <ol>
- <li>切換到你開啟了<code>number-game-errors.html</code> 的分頁，然後打開你的JavaScript主控台。你應該會看到如下的幾行錯誤訊息：<img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li>
+ <li>切換到你開啟了<code>number-game-errors.html</code> 的分頁，然後打開你的JavaScript主控台。你應該會看到如下的幾行錯誤訊息：<img alt="" src="not-a-function.png" style="display: block; margin: 0 auto;"></li>
  <li>這是一個非常容易追尋的錯誤，而且瀏覽器還給你了不少有用的資訊來幫助你（這張截圖是Firefox的，但其他瀏覽器也會提示相似的錯誤訊息）。從左到右，我們可以看到：
   <ul>
    <li>一個紅色的「X」代表這是一個錯誤訊息。</li>
@@ -66,7 +66,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
  <li>如果我們在編輯器中檢視第86行，我們會看到：
   <pre class="brush: js notranslate">guessSubmit.addeventListener('click', checkGuess);</pre>
  </li>
- <li>主控台提示的錯誤訊息寫著「guessSubmit.addeventListener is not a function（guessSubmit.addeventListener 並不是一個函式）」，所以我們大概是哪裡拼錯字了。如果你並不確定一個函式的正確名稱如何拼寫，打開MDN確認看看是個不錯的選擇。最佳做法是在你喜歡的搜尋引擎搜尋「mdn<em>關鍵字</em>」。為了節省時間，這裡提供你一個捷徑：<code><a href="/zh-TW/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>。</li>
+ <li>主控台提示的錯誤訊息寫著「guessSubmit.addeventListener is not a function（guessSubmit.addeventListener 並不是一個函式）」，所以我們大概是哪裡拼錯字了。如果你並不確定一個函式的正確名稱如何拼寫，打開MDN確認看看是個不錯的選擇。最佳做法是在你喜歡的搜尋引擎搜尋「mdn<em>關鍵字</em>」。為了節省時間，這裡提供你一個捷徑：<code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>。</li>
  <li>回來看看這個頁面，我們明顯是把函式名稱給拼錯了！記住，JavaScript是會區分大小寫的，所以任何些微的拼寫錯誤甚至是大小寫錯誤都會造成錯誤發生。把<code>addeventListener</code> 改成<code>addEventListener</code> 問題就解決了。現在將你的程式碼修正吧。</li>
 </ol>
 
@@ -74,11 +74,11 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 <p><strong>Note</strong>: 看看這個<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a>連結來了解更多有關這類錯誤的資訊。</p>
 </div>
 
-<h3 id="語法錯誤：第二回合">語法錯誤：第二回合</h3>
+<h3 id="Syntax_errors_round_two">語法錯誤：第二回合</h3>
 
 <ol>
  <li>將你的頁面存檔並重整，你現在應該會看到剛剛的錯誤消失了。</li>
- <li>現在試著輸入一個猜測並按下Submit guess按鈕，你會發現...另一個錯誤！<img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li>
+ <li>現在試著輸入一個猜測並按下Submit guess按鈕，你會發現...另一個錯誤！<img alt="" src="variable-is-null.png" style="display: block; margin: 0 auto;"></li>
  <li>這次的錯誤是「TypeError: lowOrHi is null（TypeError: lowOrHi 為 null）」，在第78行的位置。
   <div class="note"><strong>Note</strong>：<code><a href="/zh-TW/docs/Glossary/Null">Null</a></code>是一個特別的值，代表著「空」、「什麼都沒有」。<code>lowOrHi</code>被宣告為一個變數，但並沒有被賦予任何有意義的值——他既沒有變數型態，也沒有值。</div>
 
@@ -94,10 +94,10 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
   <pre class="brush: js notranslate">console.log(lowOrHi);</pre>
 
   <div class="note">
-  <p><strong>Note</strong>:<code><a href="/zh-TW/docs/Web/API/Console/log">console.log()</a></code> 是一個非常好用的除錯功能，它能夠將值印出至主控台中。所以這行程式碼會在第48行賦值給<code>lowOrHi</code>後，將它的值印出至主控台中。</p>
+  <p><strong>Note</strong>:<code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> 是一個非常好用的除錯功能，它能夠將值印出至主控台中。所以這行程式碼會在第48行賦值給<code>lowOrHi</code>後，將它的值印出至主控台中。</p>
   </div>
  </li>
- <li>存檔並重整，你應該會在主控台中看到 <code>console.log()</code> 輸出的結果。<img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;">在這個時間點，<code>lowOrHi</code>的值是<code>null</code>。所以很明顯的，第 48 行一定出了什麼問題。</li>
+ <li>存檔並重整，你應該會在主控台中看到 <code>console.log()</code> 輸出的結果。<img alt="" src="console-log-output.png" style="display: block; margin: 0 auto;">在這個時間點，<code>lowOrHi</code>的值是<code>null</code>。所以很明顯的，第 48 行一定出了什麼問題。</li>
  <li>讓我們思考一下發生了什麼問題。第48行呼叫了 <code><a href="/zh-TW/docs/Web/API/Document/querySelector">document.querySelector()</a></code> 方法來透過CSS選擇器取得一個HTML元素參照。打開我們的網頁看看我們想要取得的段落元素：
   <pre class="brush: js notranslate">&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
  </li>
@@ -109,14 +109,14 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 <p><strong>Note</strong>: 看看這個 <a href="/zh-TW/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> 連結來了解更多有關這類錯誤的資訊。</p>
 </div>
 
-<h3 id="語法錯誤：第三回合">語法錯誤：第三回合</h3>
+<h3 id="Syntax_errors_round_three">語法錯誤：第三回合</h3>
 
 <ol>
  <li>現在如果你試著再次玩這個遊戲應該會相當順利，直到該讓遊戲結束的時機點才會發生錯誤：無論是猜對還是10次用完。</li>
  <li>此時console提供錯誤訊息跟一開始一樣： "TypeError: resetButton.addeventListener is not a function"! 然而此次錯誤來自第94行。查看第94行後，我們可以輕易發現依舊是屬性大小寫問題，一樣把<code>addeventListener</code> 改成 <code>.addEventListener</code>就沒問題了。</li>
 </ol>
 
-<h2 id="邏輯錯誤">邏輯錯誤</h2>
+<h2 id="A_logic_error">邏輯錯誤</h2>
 
 <p>到這邊為止遊戲應該可以進行得很順利，然而玩幾次下來無疑地你會發現「隨機」數字總是0或1，這可不是我們想要的！</p>
 
@@ -134,7 +134,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
  <li>儲存程式碼並更新頁面，然後再試玩幾次，你會看到<code>randomNumber</code> 在console中總是等於1，這就是問題所在。</li>
 </ol>
 
-<h3 id="修正小錯誤">修正小錯誤</h3>
+<h3 id="Working_through_the_logic">修正小錯誤</h3>
 
 <p>為了修正這個錯誤，我們得先了解它是怎麼運作的。首先，我們呼叫<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code>以產生一個介於0到1的隨機小數，例如：0.5675493843</p>
 
@@ -154,11 +154,11 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 
 <p>試著自己動手更新這兩行程式碼吧，儲存並更新頁面後你應該能看到遊戲如預期般進行！</p>
 
-<h2 id="其他常見錯誤">其他常見錯誤</h2>
+<h2 id="Other_common_errors">其他常見錯誤</h2>
 
 <p>還有些初學者非常容易忽略的小問題，這小節讓我們來概覽一下：</p>
 
-<h3 id="語法錯誤：語句缺少「_」_（SyntaxError_missing_before_statement）">語法錯誤：語句缺少「 ; 」<br>
+<h3 id="SyntaxError_missing_before_statement">語法錯誤：語句缺少「 ; 」<br>
  SyntaxError: missing ; before statement</h3>
 
 <p>這個錯誤是指每行程式碼結束時必須加上英文輸入法的分號<code>;</code>(請注意不要打成中文輸入法)，分號被遺忘的錯誤有時不太容易發現，此外另舉一例：如果我們改動下方變數<code>checkGuess()</code> 中的程式碼：</p>
@@ -175,7 +175,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 <p><strong>Note</strong>: 更多細節請參考右方關於<em>缺少分號的語法錯誤</em>文章頁面： <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: missing ; before statement</a> 。</p>
 </div>
 
-<h3 id="無論輸入什麼，程式總是顯示「你贏了」">無論輸入什麼，程式總是顯示「你贏了」</h3>
+<h3 id="The_program_always_says_youve_won_regardless_of_the_guess_you_enter">無論輸入什麼，程式總是顯示「你贏了」</h3>
 
 <p>還有另一種混用指派運算子(<code>=</code>)與嚴格比較運算子(<code>===</code>)的狀況，舉例如果我們將變數 <code>checkGuess()</code>中的嚴格比較運算子(<code>===</code>)</p>
 
@@ -187,7 +187,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 
 <p>這個檢查就失效了，程式會永遠回傳 <code>true</code>而勝利並結束遊戲。請小心！</p>
 
-<h3 id="語法錯誤：參數列表後面缺少「」_（SyntaxError_missing_after_argument_list）">語法錯誤：參數列表後面缺少「)<br>SyntaxError: missing ) after argument list</h3>
+<h3 id="SyntaxError_missing_after_argument_list">語法錯誤：參數列表後面缺少「)<br>SyntaxError: missing ) after argument list</h3>
 
 <p>給完函式或方法參數時別忘了放上<code>)</code>右括號（請注意不要打成中文輸入法）。</p>
 
@@ -195,7 +195,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 <p><strong>Note</strong>: 更多細節請參考右方關於<em>缺少右括號的語法錯誤</em>文章頁面：<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a>。</p>
 </div>
 
-<h3 id="語法錯誤：屬性ID後缺少「」_SyntaxError_missing_after_property_id">語法錯誤：屬性ID後缺少「:」<br>
+<h3 id="SyntaxError_missing_after_property_id">語法錯誤：屬性ID後缺少「:」<br>
  SyntaxError: missing : after property id</h3>
 
 <p>這個錯誤通常與JavaScript物件格式錯誤有關，在這個例子中，通過修改</p>
@@ -212,7 +212,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 
 <p>很簡單——這通常意味你的函式或條件結構式缺少一個大括號。若我們將<code>checkGuess()</code>函式末段的一個結尾大括號刪除，就會獲得這個錯誤。</p>
 
-<h3 id="SyntaxError_expected_expression_got_string">語法錯誤：預期得到表達式，但實際得到「字串」<br>SyntaxError: expected expression, got '<em>string</em>'</h3>
+<h3 id="SyntaxError_expected_expression_got_string_or_SyntaxError_unterminated_string_literal">語法錯誤：預期得到表達式，但實際得到「字串」<br>SyntaxError: expected expression, got '<em>string</em>'</h3>
  
  <p>或是</p>
  
@@ -226,7 +226,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 <p><strong>Note</strong>：有關這些錯誤的詳細資訊，可參閱<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a>與<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a></p>
 </div>
 
-<h2 id="小結">小結</h2>
+<h2 id="Summary">小結</h2>
 
 <p>那麼，我們得到它了——能在簡易JavaScript程式中找出錯誤的基礎知識。解決程式碼中的錯誤並不總是那麼簡單，但至少本章節可以為你省下幾小時的時間好用來睡覺，並讓你在早期學習過程更快的解決問題。</p>
 
@@ -241,12 +241,12 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 
 <p>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</p>
 
-<h2 id="在這個學習模組中">在這個學習模組中</h2>
+<h2 id="In_this_module">在這個學習模組中</h2>
 
 <ul>
  <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/What_is_JavaScript">什麼是JavaScript？</a></li>
  <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/A_first_splash">初次接觸Javascript</a></li>
- <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/What_went_wrong">什麼出錯了？JavaScript的疑難排解（除錯）</a></li>
+ <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/What_went_wrong">出了什麼問題？JavaScript 疑難排解</a></li>
  <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Variables">儲存你需要的資訊——變數</a></li>
  <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Math">JavaScript 的基本運算——數字與運算子</a></li>
  <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Strings">處理文字——JavaScript的字串</a></li>
diff --git a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/not-a-function.png b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/not-a-function.png
new file mode 100644
index 0000000000..7933668aa1
--- /dev/null
+++ b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/not-a-function.png
diff --git a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/variable-is-null.png b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/variable-is-null.png
new file mode 100644
index 0000000000..bcfd1aed32
--- /dev/null
+++ b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/variable-is-null.png