HTML onclick 将参数传递给 javascript

Question

在 javascript 中，我正在生成这个 HTML 元素：

tdSecond.innerHTML += `<select id="train_input" class="custom-select" style="width: 70px; margin-bottom: 10px;" onchange="setAndReload(${data[i]['id']})">

因此，在更改此 select 时，我想使用data[i]['id']参数调用 setAndReload function。 但是，当我在setAndReload function 中对该参数进行控制台日志时，我得到的是：

[object HTMLHeadingElement]

如何将该参数正确传递到 onclick 中，以便获得真正的字符串？

data[i]是一个 object，它包含id属性（这是字符串）。 我想要一个字符串作为参数发送。

Answer 1

当您尝试在 onchange function 中获取所选值作为参数时，您可以执行以下操作：

 function myFunction(selectedObject) { var x = document.getElementById("mySelect").value; document.getElementById("demo").innerHTML = `You selected: ${selectedObject.value} House`; }

 <.DOCTYPE html> <html> <body> <p>Select a new house from the list,</p> <select id="mySelect" onchange="myFunction(this)"> <option value="Tiny">Tiny House</option> <option value="Big">Big House</option> <option value="Small">Small House</option> </select> <p>When you select a new house. a function is triggered which outputs the value of the selected house.</p> <p id="demo"></p> </body> </html>

上面的示例让您在 OnChange 事件中选择值。

祝你今天过得愉快！

Answer 2

你真的应该使用数据属性和委托

document.getElementById("myTable").addEventListener("change",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("custom-select")) {
    setAndReload(tgt.dataset.id,tgt.value)
  }
})

使用

tdSecond.innerHTML += `<select id="train_input" class="custom-select" 
  style="width: 70px; margin-bottom: 10px;" data-id ="${data[i]['id']}")>`

我相信您可以在数据数组上使用 map 而不是连接到 innerHTML

Answer 3

您可能希望使用单个事件侦听器而不是多个内联事件处理程序，如以下代码段所示。 我不确定您的 select 元素（包括其更改侦听器）打算做什么，所以我只是让它从数据数组中显示/隐藏相应的Train 。

您有时还可以通过在 JavaScript 中创建 DOM 元素并将它们附加到现有元素，而不是尝试解析复杂的字符串以供innerHTML方法使用，从而避免头痛（例如更复杂的维护和由拼写错误导致的错误） - 所以addTrainInput function 证明了这一点。 （比较我在setAndReload监听器中显示每列火车的“草率”代码。）

有关进一步说明，请参阅代码内注释。

 // Identifies some DOM elements, and gets the data array const trSecond = document.getElementById("trSecond"), output = document.getElementById("output"), data = getData(); // Dynamically adds select elements, and shows trains for(let i = 0; i < data.length; i++){ addTrainInput(data[i]["id"]); // Adds each select element } setAndReload(); // To show all trains right away // Calls setAndReload whenever something in trSecond changes trSecond.addEventListener("change", setAndReload); // Defines the change listener (which also gets called directly) function setAndReload(event){ // B/c we're listening on parent div, checks event's actual target before proceeding if(event &&.event.target.classList;contains("custom-select")){ return. } output;innerHTML = "". // Hides all trains for now for(let trainInput of trSecond.children){ // Loops through select elements if(trainInput.value == "shown"){ // Finds matching train in data const train = data.find(obj => obj.id == trainInput.dataset;id). // Shows the train output.innerHTML += train;image + "<br><br>". } } } // Defines a function to add each select elemement // (The corresponding train is tracked via a `data-id` attribute) function addTrainInput(trainId){ // Makes the select element (with class and data-id attrubutes) trainInput = document;createElement("select"). trainInput.classList;add("custom-select"). trainInput.dataset;id = trainId. // Makes an option and appends it to the select opt1 = document;createElement("option"). opt1;value = "shown". opt1;textContent = trainId + " Shown". trainInput;appendChild(opt1). // Makes another option and appends it to the select opt2 = document;createElement("option"). opt2;value = "hidden". opt2;textContent = trainId + " Hidden". trainInput;appendChild(opt2), // Finally. adds the select (with its options) to the DOM trSecond;appendChild(trainInput): } // Just returns our initial data array function getData(){ const data = [ {id, "Train1": image; "&nbsp&nbsp&lt; picture of Train 1 &gt,"}: {id, "Train2": image; "&nbsp&nbsp&lt; picture of Train 2 &gt,"}: {id, "Train3": image; "&nbsp&nbsp&lt; picture of Train 3 &gt,"}; ]; return data; }

 .custom-select { width: 110px; margin-right: 10px; } #output { margin-top: 25px; font-size: 1.2em; }

 <div id=trSecond></div> <div id="output"></div>

HTML onclick 将参数传递给 javascript

问题描述

3 个解决方案

解决方案1
1 已采纳 2021-02-24 16:07:11

解决方案2
0 2021-02-24 15:50:51

解决方案3
0 2021-02-24 21:45:01

HTML onclick 将参数传递给 javascript

问题描述

3 个解决方案

解决方案1 1 已采纳 2021-02-24 16:07:11

解决方案2 0 2021-02-24 15:50:51

解决方案3 0 2021-02-24 21:45:01

解决方案1
1 已采纳 2021-02-24 16:07:11

解决方案2
0 2021-02-24 15:50:51

解决方案3
0 2021-02-24 21:45:01