为什么不清除按钮功能不起作用？

Question

清除按钮无法清除list-group history

//html 
<button class="btn btn-primary mb-3" 
   type="button" 
   id="clear-inputs"
   onclick="clearIt()">
    Clear history 
</button>
<form id="history"></form>
<div class="list-group" id="history"></div>

//javascript clear button function                           
function clearIt() {
  document.getElementById('history').value = "";
}

Answer 1

您有两个具有相同id元素（ <form>和<div> ）。 浏览器会呈现它，但它是无效的 html，因为id属性应该是元素唯一的。 getElementById()将获取具有指定id的第一个元素。

您的 html 的第二个问题是form或div元素都没有value属性，因此您的函数无需清除任何内容。 从您的示例中不清楚您的按钮应该清除哪个元素。 对于<div> ，您可以尝试设置document.getElementById('yourUniqueId').innerHtml = "" 。 这将清除<div>内的所有 html。

Answer 2

1. 你有两个“历史”ID - 不是一个好习惯

2. 使用 'innerhtml' 而不是 value - 会产生更好的结果。 值对于像 a 这样的输入更好

Answer 3

确保为元素提供唯一 ID，上面的 2 个元素具有相同的 ID，并且必须在调用之前定义该函数。

• 始终检查您的控制台是否有日志记录/错误:)

Answer 4

你不需要javascript来清除按钮，你可以只在表单标签中使用html来清除按钮。 用于清除。

这是一个简单的例子： example