成功讓「開始推薦」按鈕產生反應，不過現在按下按鈕，只會出現固定的提示訊息。
真正的 AI Recipe 網站，應該要先知道使用者有哪些食材，才能根據需求推薦料理。
因此，今天要開始處理食材輸入功能。

一、設計食材輸入介面
昨天已經建立了輸入框，今天先修改 HTML，替輸入框和按鈕加入專屬的 id，方便 JavaScript 找到它們。

這裡使用了 id，讓每個元素都有自己的識別名稱。

例如，id="ingredients" 就是食材輸入框的識別名稱。

二、先處理空白輸入
使用者有可能還沒輸入食材，就直接按下推薦按鈕。
為了避免這種情況，今天先加入基本的檢查功能。
在 script.js 中加入：
const ingredientsInput =
document.querySelector("#ingredients");
const recommendBtn =
document.querySelector("#recommendBtn");
const message =
document.querySelector("#message");
recommendBtn.addEventListener("click", function () {
const ingredients = ingredientsInput.value.trim();
if (ingredients === "") {
message.textContent = "請先輸入食材喔！";
return;
}
message.textContent = "已收到你的食材！";
});

三、程式碼解析
這次使用了幾個新觀念：

• .value：取得輸入框裡的文字。
• .trim()：移除文字前後多餘的空白。
• if：判斷是否符合條件。
• textContent：修改網頁上的文字。
• return：結束這次函式的執行。

當使用者沒有輸入任何內容時，網站會提醒他先輸入食材；如果有輸入，則會顯示收到食材的訊息。

四、成果
完成了基本的食材輸入檢查，讓網站開始具備實際操作的流程。
目前還沒有進行真正的食譜推薦，但已經能夠接收使用者的輸入。
下一篇將繼續處理這些食材，並把它們整理成更容易使用的格式。