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

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

你有两个 'history' ID - 不是一个好习惯
使用 'innerhtml' 而不是值 - 会产生更好的结果。对于像
这样的输入，值更好

Answer 2

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

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

内的所有 html

Answer 3

确保为元素提供唯一 ID，以上2个元素有相同的ID，调用前必须先定义函数

始终检查您的控制台是否有 logging/errors :)

Answer 4

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

这是一个简单的例子：example

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

Why isn't clear button function isn't working?

javascript

button