如何訪問在 javascript 中的另一個函數中創建的元素？

Question

我在屏幕上有一個主按鈕，當我單擊該按鈕時，它會創建另外兩個按鈕，那么這兩個按鈕也應該具有自己的功能和單擊事件。 但是，它們是在函數中創建的，沒有全局變量或 ID，我不知道如何訪問它們。 有人有什么建議嗎？

//html

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <h1>Dataset Maker</h1>
        <button id="create-btn">+ Create Dataset</button>
        <script src="index.js"></script>
    </body>
</html>

//javascript

document.getElementById("create-btn").addEventListener("click",createDataset)


function createDataset(){
    var jsonBtn = document.createElement("Button")
    jsonBtn.setAttribute("id", "json-btn")
    jsonBtn.innerHTML = "JSON"
    document.body.appendChild(jsonBtn)
    
    var csvBtn = document.createElement("Button")
    csvBtn.innerHTML = "CSV"
    document.body.appendChild(csvBtn)
    
}

function jsonButton(){
    var browseJsonBtn = document.getElementById("json-btn")
    browseBtn.innerHTML = "Browse Files"
    document.body.appendChild(browseBtn)
    
}

function csvButton(){
    var browseCsvBtn = document.createElement("Button")
    browseCsvBtn.innerHTML = "Browse Files"
    document.body.appendChild(browseCsvBtn)
    
}

Answer 1

在 HTML 中創建所有三個按鈕（放置 CSS 是您的選擇）

您可以只對 2 個不可見的按鈕執行display: none ，並且在 javascript 的幫助下，您可以將它們的顯示設置為initial 。 將此事件添加到第三個按鈕。

例子：

 function displayButtons() { document.getElementById('jsonBtn').style.display = 'initial'; document.getElementById('csvBtn').style.display = 'initial'; }

 #jsonBtn, #csvBtn { display: none; }

 <button id="createButton" onclick="displayButtons()"> Create Button </button> <button id="jsonBtn"> Js button </button> <button id="csvBtn"> CSV button </button>

這實際上比自己“創建”按鈕要好。

Answer 2

 <html> <head> <link rel="stylesheet" href="index.css"> <style> .jbtn, .csv-btn{ background-color: crimson; color: white; padding: 5px; margin: 5px; } </style> </head> <body> <h1>Dataset Maker</h1> <button id="create-btn">+ Create Dataset</button> <script> document.getElementById("create-btn").addEventListener("click", createDataset) function createDataset() { var jsonBtn = document.createElement("Button") jsonBtn.setAttribute("id", "json-btn") jsonBtn.innerHTML = "JSON" jsonBtn.classList.add("jbtn") document.body.appendChild(jsonBtn) var csvBtn = document.createElement("Button") csvBtn.innerHTML = "CSV" csvBtn.classList.add("csv-btn") document.body.appendChild(csvBtn) } function jsonButton() { var browseJsonBtn = document.getElementById("json-btn"); browseBtn.innerHTML = "Browse Files"; document.body.appendChild(browseBtn); } function csvButton() { var browseCsvBtn = document.createElement("Button") browseCsvBtn.innerHTML = "Browse Files" document.body.appendChild(browseCsvBtn) } </script> </body> </html>

jsonBtn.classList.add("jbtn")

使用它，您可以在創建按鈕后添加一個類，該類可用於訪問元素。

Answer 3

抱歉，我很久沒有使用純 JavaScript 了。 我只是在 jquery 中建議我的代碼。 如果你改成 jquery，你所有的 js 代碼都會被下面的代碼替換：

$(document).on('click', '#create-btn', function(){
   var btn = $('<button class="json-btn">');
   btn.html('JSON');
   $('body').append(btn);

   btn = $('<button class="csv-btn">');
   btn.html('CSV');
   $('body').append(btn);
});

$(document).on('click', '.json-btn', function(){
   $(this).html('Browse Files'); // dont know exactly what you main here
});

$(document).on('click', '.csv-btn', function(){
   $(this).html('Browse Files'); // dont know exactly what you main here
});

如何訪問在 javascript 中的另一個函數中創建的元素？

問題描述

3 個解決方案

解決方案1
1 已采納 2021-07-07 15:23:39

解決方案2
1 2021-07-07 15:59:51

解決方案3
0 2021-07-07 15:16:17

如何訪問在 javascript 中的另一個函數中創建的元素？

問題描述

3 個解決方案

解決方案1 1 已采納 2021-07-07 15:23:39

解決方案2 1 2021-07-07 15:59:51

解決方案3 0 2021-07-07 15:16:17

解決方案1
1 已采納 2021-07-07 15:23:39

解決方案2
1 2021-07-07 15:59:51

解決方案3
0 2021-07-07 15:16:17