在javascript中，我生成了这个HTML元素:
tdSecond.innerHTML += `<select id="train_input" class="custom-select" style="width: 70px; margin-bottom: 10px;" onchange="setAndReload(${data[i]['id']})">
所以在这个选择的变化，我想调用setAndReload函数与data[i]['id']参数。但是，当我在setAndReload函数中执行该参数的控制台日志时，我得到的是:
[object HTMLHeadingElement]
我如何将参数传递给onclick正确，让我得到真正的字符串?
data[i]是一个对象，它持有id属性(这是字符串)。我想要发送一个字符串作为参数。
当您尝试在onchange函数中获得选定值作为参数时，您可以这样做:
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事件的选择值。
祝你今天愉快!
你真的应该使用数据属性和委托
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']}")>`
我相信你可以在数据数组上使用映射，而不是连接到innerHTML
您可能希望使用单个事件侦听器而不是多个内联事件处理程序，如下面的代码片段所示。我不确定您的select元素(包括其更改侦听器)打算做什么，所以我只是让它从数据数组中显示/隐藏相应的Train。
innerHTML方法使用——因此addTrainInput函数演示了这一点。(比较"马虎"one_answers"马虎"。在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: "  < picture of Train 1 >"},
{id: "Train2", image: "  < picture of Train 2 >"},
{id: "Train3", image: "  < picture of Train 3 >"},
];
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>