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