按钮 OnClick - 如何添加功能？-解网

问：

我被交给了一项任务，要开发一个小代码，我需要在其中制作一个可调整的有序列表。它需要有一个占位符，用于键入和添加列表项，一个单击按钮，该按钮将该信息添加到有序列表和每个项目旁边的复选框，以便可以检查它们并且项目的内容必须是删除线。这就是我目前所拥有的，有人可以为我照亮这一点吗？

function addToList() {
  let listItem = document.createElement("li");
  let textInput = document.getElementById("textInput");
  let checkboxList = document.getElementById("checkboxList");
  // .innerHTML is what stays inside the <li>...</> on the HTML main code
  listItem.innerHTML = textInput.value;
  // textInput.value = "" clears the placeholder after the button is clicked
  textInput.value = "";
  checkboxList.appendChild(listItem);
}

<input type="text" placeholder="Write here" id="textInput" />
<input type="button" id="button1" value="Add to List" onclick="addToList()" />
<ol id="checkboxList"></ol>

JavaScript的 [HTML全文] 列表按钮点击

// Access the DOM element that needs an event handler and set the handler up
// in JavaScript with .addEventListener() instead of in the HTML with onXyz.
// Note that with `.addEventListener()` you only want to reference the function
// that will be the event handler, so you don't put () after it.
document.querySelector("#button1").addEventListener("click", addToList);

// Get your static element references just once, not every time the function runs
const textInput = document.getElementById("textInput");
const checkboxList = document.getElementById("checkboxList");

// Functions that have been registered as event handlers will automatically
// be passed an argument that references the event object, so your event
// handling functions should set up a parameter to recieve that reference.
// The event reference can give you access to a variety of useful information
// like what key or mouse button was pressed or what the original element was
// that triggered the event (very handy when dealing with event bubbling).
function addToList(event) {
  const listItem = document.createElement("li");
  // Don't use .innerHTML if you can avoid it because it has performance and
  // security implications. Since the text you are working with here comes
  // from a textbox, there won't be any HTML that users enter anyway, so
  // it's better to use .textContent, which doesn't invoke the HTML parser
  // and doesn't open your code up to injection attacks.
  listItem.textContent = textInput.value;
  
  // Now, create a new checkbox to go with the list item
  const cb = document.createElement("input");
  
  // And configure all the aspects of the new checkbox
  cb.type = "checkbox"
  cb.addEventListener("click", function(event){
    listItem.classList.toggle("strikethrough"); // Toggle the CSS class that does the line through
  });

  listItem.appendChild(cb);   // Now add the new checkbox to the list item

  textInput.value = "";
  checkboxList.appendChild(listItem);
}

.strikethrough { text-decoration:line-through; }

<input type="text" placeholder="Write here" id="textInput">
<input type="button" id="button1" value="Add to List">
<ol id="checkboxList"></ol>

上一个：无法设置 undefined 的属性（设置“onclick”）

下一个：JavaScript 可排序列表中的拖放问题

按钮 OnClick - 如何添加功能？

Button OnClick - How do I Add Function?

评论