Question

btnUpdate = document.createElement("BUTTON");
var t = document.createTextNode("Update");
btnUpdate.id = 'update0';
btnUpdate.appendChild(t);
tabCell.appendChild(btnUpdate);

我有一行简单的代码，我用javascript创建了一个按钮。如何通过相同的javascript文件访问此按钮？我想为它添加onClick功能。

document.getElementById("update0").onclick = edit_row(0);

我尝试添加上面的代码行，但现在它不会显示表，但会立即跳转到edit_row（）函数。

编辑：

function showCustomer() {

  var obj, dbParam, xmlhttp, myObj, x, txt = "",tabCell;    
  var btnUpdate;
  obj = { "table":"Successful", "limit":20 };
  dbParam = JSON.stringify(obj); 
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    myObj = JSON.parse(xmlhttp.responseText);
    console.log(myObj);
    var col = [];
    for (var i = 0; i < myObj.length; i++) {
        for (var key in myObj[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }
    key="Update";
    col.push(key);
    console.log(col);
    // CREATE DYNAMIC TABLE.
    var table = document.createElement("table");

    // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

    var tr = table.insertRow(-1);                   // TABLE ROW.

    for (var i = 0; i < col.length; i++) {
        var th = document.createElement("th");      // TABLE HEADER.
        th.innerHTML = col[i];
        tr.appendChild(th);
    }

    // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < myObj.length; i++) {

        tr = table.insertRow(-1);
        tabCell = null;
        for (var j = 0; j < col.length-1; j++) {
            tabCell = tr.insertCell(-1);
            tabCell.innerHTML = myObj[i][col[j]];
        }
        tabCell = tr.insertCell(-1);
        btnUpdate = document.createElement("BUTTON");
        var t = document.createTextNode("Update");
        btnUpdate.id = 'update'+i;
        btnUpdate.appendChild(t);
        tabCell.appendChild(btnUpdate);
    }
    tr = table.insertRow(-1);

        tabCell = null;
        for (var j = 0; j < col.length-1; j++) {
            tabCell = tr.insertCell(-1);
            tabCell.innerHTML = " ";
        }
        tabCell = tr.insertCell(-1);
        var btn = document.createElement("BUTTON");
        var t = document.createTextNode("Add Row");
        btn.appendChild(t);
        tabCell.appendChild(btn);

        document.getElementById("update0").addEventListener = function (){
            edit_row(0);
        };

    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
    var divContainer = document.getElementById("showData");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    }
  };
  xmlhttp.open("POST", "http://localhost:8090/Vaccine", true);
  xmlhttp.setRequestHeader("Content-type", "application/JSON");
  xmlhttp.send("x=" + dbParam);  
}

function edit_row(no)
{
    alert("HELLO");
}

Answer 1

你必须在点击事件的回调中这样做。如果你内联，它会在javascript读取你的代码时直接执行。

document.getElementById("update0").onclick = function (){
    edit_row(0);
};

Answer 2

这一行：

document.getElementById("update0").onclick = edit_row(0);

您没有将click事件“附加”到edit_row函数。您正在使用edit_row（0）invokation的结果设置onclick属性。

另外，请勿使用onclick属性。

请改用addEventListener功能。

document.getElementById("update0").addEventListener("click", function () {
    edit_row(0);
});

如果您需要一个理由：通过覆盖onclick属性，您可能会禁用元素上的任何其他点击事件侦听器。通过使用addEventListener()，您可以在同一元素/事件对上拥有多个事件侦听器。

您可以在创建按钮后立即执行此操作。你以后不需要通过它来获取它。

您的代码如下所示：

btnUpdate = document.createElement("BUTTON");
var t = document.createTextNode("Update");
btnUpdate.id = 'update0';
btnUpdate.appendChild(t);
btnUpdate.addEventListener("click", function () {
    edit_row(0);
});

Answer 3

如何通过相同的javascript文件访问此按钮？

就像你一直在访问它一样。

它存储在btnUpdate变量中。使用它。

但现在它不会显示表格，但会立即跳转到edit_row（）函数。

这是因为您正在调用 edit_row并将其返回值设置为点击处理程序。

由于您想要向其传递参数，最简单的方法是创建一个新函数。

function edit_row_first_argument_0 () {
    edit_row(0);
}

button.addEventListener("click", edit_row_first_argument_0);

（您可以使用匿名函数表达式，为了清楚起见，我使用上面的详细方法）。

Answer 4

试试这个：

btnUpdate = document.createElement("BUTTON");
var t = document.createTextNode("Update");
btnUpdate.id = 'update0';
btnUpdate.appendChild(t);
tabCell.appendChild(btnUpdate);
btnUpdate.addEventListener("click", (e) => {
   // this linked to btnUpdate
   // Here make whatever you want
   // You can call edit_row now
   edit_row(0)
})

Answer 5

您的按钮似乎尚未在DOM中，因此您无法使用document找到它。如果变量btnUpdate位于btnUpdate.onclick = function() {}之类的同一文件中，或使用addEventListener btnUpdate.addEventListener('click', function() {})，则可以使用变量edit_row(0)。

此外，您似乎正在执行btnUpdate.addEventListener('click', function() { edit_row(0); })功能。你需要将它放在像

这样的函数中

<ul>
 <li> Airbag pentru sofer ; inteligent, airbag pentru pasager ; cu buton deactivare inteligent  </li><li> Airbag lateral in fata  </li><li> Airbag-uri cortina din fata pana in spate  </li><li> Control electronic al tractiunii  </li><li> ESP  </li><li> Servodirectie asistata electric, variabila in functie de viteza  </li><li> Asistent plecare in panta  </li><li> ABS Frana de mana electrica  </li><li> Aer conditionat automat si pe doua zone  </li><li> Sistem Audio cu RDS cu radio AM/FM ecran tactil color si ecran color  </li><li> Comenzi audio pe volan  </li><li> Conexiuni pentru AUX si USB Bluetooth pentru telefon si include streaming audio  </li><li> 7 difuzoare  </li><li> 1 ecran multifunctional tactil, 7,0  </li><li> Cruise control  </li><li> Computer de bord include viteza medie, consum mediu, consum instantaneu si autonomie ramasa  </li><li> Start/Stop  </li><li> Faruri cu cu lentile focalizante si bec halogen halogen Lumini de zi  </li><li> Oglinzi exterioare reglabile electric, incalzite si in culoarea caroseriei </li><li> Geamuri electrice fata si spate  </li><li> Insertii crom In jurul geamurilor laterale  </li><li> Stergatoare cu senzor ploaie  </li><li> Volan imbracat in piele, multifunctional, cu reglare pe inaltime si cu reglare in adancime  </li><li> Tapiterie din stofa cu piele sintetica  </li><li> Senzor presiune pneuri afiseaza presiunea cu senzor montat pe jante  </li><li> Cotiera centrala fata  </li><li> Cotiera centrala spate  </li><li> Scaun sofer individual, reglabil electric, 2 reglaje electrice cu reglaj: manual, scaun pasager individual cu reglaj: manual  </li><li> Scaune spate rabatabile 60/40 , cu 0 reglaje electrice  </li><li> Inchidere centralizata din telecomanda  </li><li> Pregatire isofix  </li><li> Jante fata si spate din aliaj , diametru 18 inchi, latime 8,5 inchi  </li><li> Anvelope fata, spate, 245 mm latime, 45% profil si rating W ; index incarcare: 96 conventionale, (date oficiale) si 18 inchi diametru  </li><li> Mase: masa maxima autorizata (kg): 2.015, masa neta (kg): 1.366, masa maxima pentru remorca cu frane (kg): 1.405, masa maxima pentru remorca fara frane (kg): 730 si EU  </li><li> Garantie: durata luni: 24, sau km: Nelimitat  </li><li> Asistenta rutiera: durata luni: 12, sau km: Nelimitat</li>
</ul>

Answer 6

你在最后有（）时调用该函数，所以

document.getElementById("update0").onclick = edit_row(0);

会立即调用edit_row

为什么不这样做呢：

btnUpdate = document.createElement("BUTTON");
var t = document.createTextNode("Update");
btnUpdate.id = 'update0';
btnUpdate.onclick=function() {
   edit_row(this.id.replace("update","")); // or use a data-attribute
}
btnUpdate.appendChild(t);
tabCell.appendChild(btnUpdate);

或使用事件委托：

Native JS equivalent to jquery delegation

如何访问动态创建的按钮？

6 个答案: