我正在尝试创建待办事项列表,可以在其中添加新任务以执行与默认任务相同的功能(可点击的任务旁边带有“删除”按钮)。我当前的代码正在创建新按钮,但是它只是一个空的灰色矩形,没有任何内容(但是它可以正常工作-正在删除选定的任务)-如何将新按钮的内容设置为“删除”?
SNIPPET
function createListElement() {
var li = document.createElement("li");
var span = document.createElement("span");//create span
var button1 = document.createElement("button");//create button
span.appendChild(document.createTextNode(input.value)); //assign value to span
span.classList.add("complited"); //add class "complited" to span
li.appendChild(span); //put span as li child
ul.appendChild(li); // put li as ul child
li.appendChild(button1);
button1.classList.add("buttonli");
button1.value("Delete"); // here I've got error "button1.value is not a function"
li.classList.add("clickable"); //asign "clickable" class to li
input.value = "";
}
<ul id="ul1">
<li class="bold red clickable" random="23"><span class="complited">Notebook</span><button class="buttonli">Delete</button></li>
<li class="clickable"><span class="complited">Jello</span> <button class="buttonli">Delete</button></li>
<li class="clickable"><span class="complited">Spinach</span> <button class="buttonli">Delete</button></li>
<li class="clickable"><span class="complited">Rice</span> <button class="buttonli">Delete</button></li>
<li class="clickable"><span class="complited">Birthday Cake</span> <button class="buttonli">Delete</button></li>
<li class="clickable"><span class="complited">Candles</span> <button class="buttonli">Delete</button></li>
</ul>
答案 0 :(得分:1)
button1.value("Delete"); // here I've got error "button1.value is not a function"
不,这是一个简单的访问器属性。
button1.value = "Delete"
…,但是它设置了使用按钮提交表单时将提交的值。它不设置显示文本,即显示在按钮元素内的内容。
这就是为什么你写:
<button class="buttonli">Delete</button>
而不是:
<button class="buttonli" value="Delete"></button>
因此,创建一个文本节点并将其放在按钮内:
const button_text = document.createTextNode("Delete");
button1.appendChild(button_text);
答案 1 :(得分:0)
使用innerHTML
代替value
。
button1.innerHTML = "Delete";
答案 2 :(得分:0)
function createListElement() {
var li = document.createElement("li");
var span = document.createElement("span"); //create span
var button1 = document.createElement("button"); //create
var ul = document.getElementById("ul1"); //ul
var input = document.createElement("input"); //ul
span.appendChild(document.createTextNode(input.value)); //assign value to span
span.classList.add("complited"); //add class "complited" to span
li.appendChild(span); //put span as li child
ul.appendChild(li); // put li as ul child
li.appendChild(button1);
button1.classList.add("buttonli");
button1.innerHTML = "Delete"; //Because you are using a <button> instead of <input type="button">, you need to set the innerHTML
li.classList.add("clickable"); //asign "clickable" class to li
input.value = "";
}
那是因为您使用而不是因此需要设置innerHTML。 Check this answer here
检查提琴风箱。 Jsfiddle with solution
答案 3 :(得分:0)
使用button1.innerHTML
function createListElement() {
var input = document.getElementById("inputtext");
var ul = document.getElementById("ul1");
var li = document.createElement("li");
var span = document.createElement("span"); //create span
var button1 = document.createElement("button"); //create button
span.appendChild(document.createTextNode(input.value)); //assign value to span
span.classList.add("complited"); //add class "complited" to span
li.appendChild(span); //put span as li child
ul.appendChild(li); // put li as ul child
li.appendChild(button1);
button1.classList.add("buttonli");
button1.innerHTML = "Delete"; // here I've got error "button1.value is not a function"
li.classList.add("clickable"); //asign "clickable" class to li
input.value = "";
}
<ul id="ul1">
<li class="bold red clickable" random="23"><span class="complited">Notebook</span><button class="buttonli">Delete</button></li>
<li class="clickable"><span class="complited">Jello</span> <button class="buttonli">Delete</button></li>
<li class="clickable"><span class="complited">Spinach</span> <button class="buttonli">Delete</button></li>
<li class="clickable"><span class="complited">Rice</span> <button class="buttonli">Delete</button></li>
<li class="clickable"><span class="complited">Birthday Cake</span> <button class="buttonli">Delete</button></li>
<li class="clickable"><span class="complited">Candles</span> <button class="buttonli">Delete</button></li>
</ul>
<input id="inputtext" type="text"/>
<button onclick="createListElement()">Create</button>