0
在我与任何东西联系之前，我想让你知道我已经读了很多关于我的问题。而且我知道这个问题的标题可能会被编辑为重复，这完全可以，如果我最终得到解决我的问题的解决方案&。AddEventListener for loop closure
所以我有一个表，并希望更改标题的名称，点击它们。我基本上想要的是每当我点击一个标题。我想采取它的内在的HTML，并将其作为文本框的价值。
我一直在试图做一个for循环没有成功。每次我点击任何标题，我的文本框就会填满最后一个标题。我已经有了我的代码的工作版本，每个代码都有单独的点击事件功能，但是我认为这可以通过for循环闭环来实现。
/*/ =========================================================== /*/
for (var i = 1; i < 4; i++) {
document.getElementById('H' + i).addEventListener("click", HeaderClicked);
console.log("TH " + i + " click event added!");
for (var x = 0; x < 2; x++) {
function HeaderClicked() {
headerText.focus();
headerText.value = tableHeaders[x].innerHTML;
console.log("TH clicked");
console.log("X is " + x);
}
}
}
/*/ =========================================================== /*/
document.getElementById('Rename').addEventListener("click", Renaming);
var tableHeaders = [document.getElementById("H1"), document.getElementById("H2"),
document.getElementById("H3")
];
var headerText = document.getElementById("headerText");
function Renaming() {
var newName = document.getElementById("newName").value;
var addRowLabel = document.getElementById("addRowLabel");
switch (headerText.value) {
case tableHeaders[0].innerHTML:
tableHeaders[0].innerHTML = newName;
addRowLabel.innerHTML = "Data(" + newName + " " + tableHeaders[1].innerHTML + " " + tableHeaders[2].innerHTML + ")";
console.log("Header 1 changed!");
break;
case tableHeaders[1].innerHTML:
tableHeaders[1].innerHTML = newName;
addRowLabel.innerHTML = "Data(" + tableHeaders[0].innerHTML + " " + newName + " " + tableHeaders[2].innerHTML + ")";
console.log("Header 2 changed!");
break;
case tableHeaders[2].innerHTML:
tableHeaders[2].innerHTML = newName;
console.log("Header 3 changed!");
addRowLabel.innerHTML = "Data(" + tableHeaders[0].innerHTML + " " + tableHeaders[1].innerHTML + " " + newName + ")";
break;
default:
console.log("Name doesn't exist");
}
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table id="myTable" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<thead>
<tr>
<th id="H1" class="mdl-data-table__cell--non-numeric">ClickMe1</th>
<th id="H2">ClickMe2</th>
<th id="H3">ClickMe3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</table>
<div id="Controls">
<br>
<div id="SmallerLabels" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="headerText" autocomplete='off' />
<label class="mdl-textfield__label" for="CurrentName">Header name</label>
</div>
-
<div id="SmallerLabels" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="newName" autocomplete='off' />
<label class="mdl-textfield__label" for="NewName">Header New Name</label>
</div>
<button id="Rename" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">
Rename
</button>
</div>
</body>
</html>
<style>
button {
margin: 10px 5px 5px 10px;
}
table {
margin: 10px 5px 5px 10px;
}
#SmallerLabels {
width: 140px;
}
#Controls {
margin: auto 5px auto 10px;
}
</style>
定义'HeaderClicked'只有一次，在某处全局，并且使用'this'来代替希望切换值的'Hi'头元素。 – Sebas