-3

The clear button isn't working to clear 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 = "";
}
hata
  • 11,633
  • 6
  • 46
  • 69
Kimberly Aguilar
  • 63
  • 1
  • 3
  • There are two elements with ID `history` (which isn't valid anyway as IDs have to be unique). You will then get the first such element, which is an empty `
    `, and a form doesn't have a `value`. (Note that a `
    ` doesn't have a `value` either, so it's unclear what you really try to do here...)
     – CherryDT Nov 06 '21 at 03:27
  • Does this answer your question? [Can an HTML element have multiple ids?](https://stackoverflow.com/questions/192048/can-an-html-element-have-multiple-ids) – Ouroborus Nov 06 '21 at 03:49

4 Answers4

1

You have two elements with the same id (the <form> and the <div>). Browsers will render this, but it is invalid html, as the id attribute is supposed to be unique to an element. getElementById() is going to grab the first element with the designated id.

The second problem with your html is that neither form or div elements have a value attribute, so there is nothing for your function to clear. It is unclear from your example which element is supposed to be cleared by your button. For the <div>, you could try setting document.getElementById('yourUniqueId').innerHtml = "". That will clear any html inside of the <div>.

Silinus
  • 168
  • 4
0

  1. you have two 'history' id's - not a good practice

  2. use 'innerhtml' instead of value - will yield much better results. value is better for like inputs like a

josephc
  • 17
  • 5
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 06 '21 at 03:58
0

Make sure you provide a unique ID for your elements, 2 elements above has the same ID, also the function must be defined before calling it.

  • Always check your Console for logging/errors :)
MarkiePQ
  • 1
  • 2
0

You don't need javascript for clear button, you can just use html for clear button only in form tag. Use for clear.

Here is a simple example: example

Asqar Arslonov
  • 16