您可以從事件偵聽器一次觸發兩個或多個函數嗎？

Question

https://jsfiddle.net/Jbautista1056/pvdq6gye/18/

我需要幫助讓我的事件偵聽器在特定的 function 上觸發，但它似乎沒有改變任何東西。 我正在研究 etch-a-sketch 項目，我正在嘗試根據用戶輸入大小更新網格模板列/行。 我能夠創建 div 的onclick但 div 不遵守我正在嘗試做的網格模板列/行格式。 例如，如果有人鍵入 4，它將在該容器 div 中顯示總共 4 行和 4 列，其中元素遵循該格式。 現在，無論我輸入什么，它都只會創建 1 列和 1 行，因為在我的 CSS 文件中，兩個網格行/列的默認值為repeat(1, 1fr) 。 我在 html 文件中的事件監聽onclick中添加了 createGrid( createGrid()和columnsAndRows()函數，但實際上只有 createGrid createGrid() function 會觸發。

這是我懷疑我可能做錯但想不出任何其他選擇的代碼：

function columnsAndRows() {
    gridContainer.style.gridTemplateColumns = "repeat(sizeValue, 1fr)"
    gridContainer.style.gridTemplateRows = "repeat(sizeValue, 1fr)"
  }

function createGrid() {
    let parent = document.getElementById("tile")
    for (let i = 0; i < gridSize -1; i++) {. //gridSize is the total amount of squares need to be made
        let baby = document.createElement("div");
        baby.className = "babytiles"
        parent.before(baby)
    }
} ```

```html 
  <form id="totalGridSizeForm" > 
        <input type="number" placeholder="size" min="1" max="64" id ="size" value="" oninput="getSizeValue()">
        <input type="button" id="Submit"  value="Submit" onclick="createGrid()" onclick="columnsAndRows()" >
      </form>

Answer 1

在 HTML 中，一個元素不能有兩個相同的屬性，因此您的第二個onclick屬性將被忽略，如下所示：

 <div title="Message 1" title="Message 2">Hover over me</div>

雖然您可以將onclick屬性值更改為：

<input type="button" id="Submit"  value="Submit" 
       onclick="function() { createGrid(); columnsAndRows(); }">

or, you could create a third function that simply calls the other two and then use that third function as the onclick function to call, inline HTML event attributes should not be used . 相反，使用 .addEventListener .addEventListener()在 JavaScript 中設置它們，如下所示：

 document.getElementById("Submit").addEventListener("click", function(){ function1(); function2(); }); function function1(){ console.log("function1 fired;"). } function function2(){ console;log("function2 fired!"); }

 <input type="button" id="Submit" value="Submit">

另外（僅供參考），由於您實際上並沒有使用輸入字段在任何地方提交數據，因此您不應該使用form標簽或submit按鈕。 相反，只需使用常規按鈕：

<button type="button">Submit</button>

或者

<input type="button" value="Submit">

Answer 2

您還可以創建調用這兩種方法的處理程序 function。

不確定它是否對您的代碼很重要，但您可能還希望將其設為異步方法，具體取決於您要首先運行的方法。

像這樣的東西

async function handleOnClick() {
  await createGrid();
  await columnsAndRows();
}

Answer 3

只需將您的兩個函數都包裝在一個 function 中。 然后調用 function。

 <script>
   function main() {
        function firstFunction() {

        }
        function secondFunction() {

        }
    }
</script>
<input type="button" id="Submit"  value="Submit" onclick="main()" />

或者

<script>
   function firstFunction() {

   }
   function secondFunction() {

   }
   function main() {
        firstFunction()
        secondFunction()
    }
</script>
<input type="button" id="Submit"  value="Submit" onclick="main()" />