如何通過JS的DOM將占位符附加到按鈕？
[英]How do I attach placeholder to the button through JS' DOM?
問題描述
我試圖弄清楚如何將按鈕'Delete'附加到每個列表元素上，以便提前制作，以便以后可以為其他列表元素添加更多按鈕。但是當我創建按鈕時，它們出現時沒有文本，只是我想通過命令'document.getElementByClassName[list_number + "_button"].placeholder = "Delete"來修復'document.getElementByClassName[list_number + "_button"].placeholder = "Delete" ，但是我在嘗試將類名附加到按鈕時遇到了一個錯誤：
Uncaught TypeError: Cannot read property 'classList' of undefined
at addButton (script.js:74)
at script.js:82
但是奇怪的是，此錯誤僅顯示在[1]列表對象上，而不顯示在[0]上。由於某些原因，使用[0]對象，一切正常，盡管我沒有成功附加名稱。我想由於第一個按鈕實際上是“發送”，所以問題在於列表計算，但是當我將var list_number = 0的值從0更改為1時，情況變得更糟，並立即給出錯誤。
如何在按鈕中附加文字，使它們看起來正常？
注意：與按鈕相關的命令位於末尾，所有較早的命令都是通過輸入將新元素添加到列表並使元素直行的命令
碼
var button = document.getElementById("button"); var modify_list = document.getElementById("userinput"); var ul = document.querySelector("ul"); var li = document.querySelectorAll("li"); var all_buttons = document.querySelectorAll("button"); var i = 0; //Attach classes to the li while (li.length > i) { li[i].classList.add(i); li[i].classList.add('done'); li[i].classList.add('cursor'); i++ } //Toggle the line-through function(later we will cal the function that will toggle once more when clicked on element of the list. var n = 0 while (li.length > n) { li[n].classList.toggle("done"); n++ } //Command to add new elements to the list and make line-thorugh when clicked. function inputLength() { return modify_list.value.length; } function addToTheList() { var li = document.createElement("li"); li.appendChild(document.createTextNode(modify_list.value)); ul.appendChild(li); modify_list.value = ''; } function addAfterClick() { if (inputLength() === 0) { alert("Please,don\\'t enter the empty list"); } else { addToTheList(); } } function addAfterEnter(key) { if (key.keyCode === 13 && inputLength() > 0) { addToTheList(); } } button.addEventListener("click", addAfterClick); modify_list.addEventListener("keypress", addAfterEnter); function toggle(number) { li[number].classList.toggle("done"); } ul.addEventListener("click", whenClicked); function whenClicked(event) { var li_number = event.target.className[0]; //In JS it doesn't matter in some occasions if it's a string or number,I suppouse. // var li_number = Number(li_number_string); // console.log(li_number); toggle(li_number); } // Create buttons and their functions function addButton(list_number) { var button = document.createElement("button"); li[list_number].appendChild(button); //append button near the respective li objects all_buttons[list_number].classList.add(list_number + "_button") //create class for the button console.log(all_buttons[list_number].classList); // document.getElementByClassName[list_number + "_button"].placeholder = "Delete" } var list_number = 0 // because under number 0 we have "Send" button while (li.length > list_number) { addButton(list_number); list_number++; } // console.log(list_number);
.done { color: red; text-decoration: line-through; } .cursor { cursor: pointer; }
<!DOCTYPE html> <html> <head> <title>DOM</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>What plans do I have till the end of the summer?</h1> <p>They are:</p> <input type="text" name="add activities" id="userinput" placeholder="add activities"> <button id="button">Send</button> <ul> <li>Learn German</li> <li>Learn Japanese</li> <li>Learn Java Script</li> <li>Physical activities</li> </ul> <script type="text/javascript" src="script.js"></script> </body> </html>
1 個解決方案
解決方案1
1 已采納 2019-07-30 19:52:08
您可以使用.innerText屬性設置要在程序生成的HTMLButtonElement上顯示的文本。 .placeholder屬性具有不同的用途。
讓我們仔細看看您的addButton函數：
function addButton(list_number){
var button = document.createElement("button");
li[list_number].appendChild(button); //append button near the respective li objects
all_buttons[list_number].classList.add(list_number + "_button") //create class for the button
console.log(all_buttons[list_number].classList);
// document.getElementByClassName[list_number + "_button"].placeholder = "Delete"
}
前兩行沒問題。 麻煩從這里開始：
all_buttons[list_number].classList.add(list_number + "_button");
all_buttons是在將動態生成的按鈕元素添加到DOM之前初始化的按鈕的HTML集合，因此它僅包含通過HTML設置的按鈕。 這意味着此數組已過時，並且每次添加或刪除按鈕時都需要更新。
此外，如果要操作新生成的按鈕的屬性，則根本不需要使用該數組-您可以使用變量button直接訪問它。 我還建議給這些按鈕一個唯一的ID，以便您以后可以引用它們並為它提供一個click事件監聽器。 另外，由於已經有一個名為button的全局變量，因此應在函數內部為變量指定其他名稱，例如localButton 。
這是一個例子：
var button = document.getElementById("button"); var modify_list = document.getElementById("userinput"); var ul = document.querySelector("ul"); var li = document.querySelectorAll("li"); var all_buttons = document.querySelectorAll("button"); var i = 0; //Attach classes to the li while (li.length > i) { li[i].classList.add(i); li[i].classList.add('done'); li[i].classList.add('cursor'); i++ } //Toggle the line-through function(later we will cal the function that will toggle once more when clicked on element of the list. var n = 0; while (li.length > n) { li[n].classList.toggle("done"); n++; } //Command to add new elements to the list and make line-thorugh when clicked. function inputLength() { return modify_list.value.length; } function addToTheList() { var li = document.createElement("li"); li.appendChild(document.createTextNode(modify_list.value)); ul.appendChild(li); modify_list.value = ''; } function addAfterClick() { if (inputLength() === 0) { alert("Please,don\\'t enter the empty list"); } else { addToTheList(); } } function addAfterEnter(key) { if (key.keyCode === 13 && inputLength() > 0) { addToTheList(); } } button.addEventListener("click", addAfterClick); modify_list.addEventListener("keypress", addAfterEnter); function toggle(number) { li[number].classList.toggle("done"); } ul.addEventListener("click", whenClicked); function whenClicked(event) { var li_number = event.target.className[0]; //In JS it doesn't matter in some occasions if it's a string or number,I suppouse. // var li_number = Number(li_number_string); // console.log(li_number); toggle(li_number); } // Create buttons and their functions function addButton(list_number) { var localButton = document.createElement("button"); localButton.innerText = "Delete"; localButton.id = "myButton" + list_number; li[list_number].appendChild(localButton); } var list_number = 0 // because under number 0 we have "Send" button while (li.length > list_number) { addButton(list_number); list_number++; }
.done { color: red; text-decoration: line-through; } .cursor { cursor: pointer; }
<h1>What plans do I have till the end of the summer?</h1> <p>They are:</p> <input type="text" name="add activities" id="userinput" placeholder="add activities"> <button id="button">Send</button> <ul> <li>Learn German</li> <li>Learn Japanese</li> <li>Learn Java Script</li> <li>Physical activities</li> </ul>
如何將 Javascript 事件附加到移動版 Safari 的后退按鈕？
[英]How do I attach a Javascript event to the mobile Safari back button?
如何將Facebook的JavaScript SDK函數附加到按鈕？
[英]how do I attach a javascript SDK function for Facebook to a button?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.