在javascript中生成一個按鈕

Question

我是用js生成網頁，需要生成一個按鈕。 代碼大部分都在工作，但是當我嘗試設置 onclick 屬性時，我遇到了問題。 onclick 屬性是在調用一個函數，我需要給它一個屬性。 我的代碼中有一個變量，其中包含我需要賦予函數的值，但我不知道如何將此值放入參數中。 如果這沒有意義，那可能是因為我不擅長解釋事情。

基本上，我有：

var potato = 5;
var btn = document.createElement(“button”);
btn.setAtribute(“onclick”, “coolFunction(potato);”);

當我打開頁面並轉到開發視圖時，按鈕如下所示：

<button onclick=“coolFunction(potato);”>this is a button</button>

但是，我想要那里的土豆價值，而不是土豆本身。

有什么想法嗎？

Answer 1

你可以這樣做

var potato = 5;
var btn = document.createElement('button');
btn.setAttribute('onclick',`coolFunction(${potato});`); 

Answer 2

您還可以使用 onclick 調用匿名函數：

btn.onclick = () => coolFunction(potato)

Answer 3

我會完全放棄內聯 JS。 將potato的值添加到按鈕上的數據屬性和一些文本內容，並將其添加到頁面。

接下來向按鈕添加一個事件偵聽器。 當按鈕上的點擊事件被觸發時，它會調用該函數，它可以獲取數據屬性的值並對其進行處理。 在這里，我只是將值記錄到控制台。

 const potato = 5; const btn = document.createElement('button'); btn.textContent = 'Click me for potato'; btn.dataset.potato = potato; document.body.append(btn); btn.addEventListener('click', coolFunction); function coolFunction() { console.log(this.dataset.potato); }