HTML Textarea 不保留其內容 (Javascript)

Question

html 文本區域綁定到彈出屏幕。

重新打開彈出窗口后，文本不會保留在該區域中。 保存按鈕將文本區域的內容保存到一個變量：

let textAreaContent=""; //in the beginning of script page.

function handleClick(){
    textAreaContent = document.getElementById("textarea").value;
    console.log(textAreaContent)
    return null;
}

單擊保存按鈕時，我可以在控制台中看到文本區域內容的更改值。 我試圖將 textAreaContent 變量分配給 HTML textarea，但它沒有用。 彈出頁面：

<textarea id="textarea" rows="4" cols="40" style="border 1px solid black">${textAreaContent}</textarea>
<button onClick={handleClick()}>Save</button>

為什么textarea的內容沒有變化？ 我究竟做錯了什么？

Answer 1

首先，您在 style 屬性中輸入錯誤，這是正確的語法。

style="border: 1px solid black;"

對於 onClick 處理程序，請嘗試以下操作：

<button onClick="handleClick()">Save</button>

如果您希望信息持久保存，您可以使用全局變量或 session 存儲。

  function handleClick() {
    var textAreaContent = document.getElementById("textarea").value;
    sessionStorage.setItem("textAreaContent", textAreaContent);
    return null;
  }

然后您可以稍后使用 sessionStorage.getItem 方法獲取信息並將值添加回來

// whenever popup opens, 
document.getElementById("textarea").value = sessionStorage.getItem('textAreaContent')