Why is line 102-112 not working? I mean the delete button and not the clear history button

Question

https://code.sololearn.com/WSQE4hf7Ogm0/?ref=app

Answer 1

Arnesh

Starting with line 102 you don't need to pass the variable [no] to the callback function del(), because [no] is a global variable. And something else you must be aware of when dealing with addEventListener's callback function, the first parameter of the callback function is an event object [in this case it is a MouseEvent Object] meaning this statement [ button.addEventListener("click",function del(no){...}) ] is passing a MouseEvent object and not the global variable [no].
https://www.w3schools.com/jsref/met_element_addeventlistener.asp

The next issue I see is lines 103,105,107 and 109, [ document.querySelectorAll("#no")[0] ]. The problem here is that querySelectorAll("#no") is trying to find any element with an id matching the string "no" and not the number assigned to the global variable [no]. Thus the querySelectorAll() will never find the id numbered elements. You can either do some concatenation or use template literals to solve this issue but as soon as you solve that issue it will lead to another and that is using querySelector with IDs that are numbers. Please follow the link- https://stackoverflow.com/questions/20306204/using-queryselector-with-ids-that-are-numbers

At line 78 [ var cont=document.createElement("div") ] is the solution to you problems along with using another name for list clearing function instead of clear(), such as clearList and then define the function clearList()
https://code.sololearn.com/W8kXT5zBLyS2/#html

Answer 2

One thing I have noticed is that you have multiple objects with the id “no”. An id is unique to a single object so you can only use it once.

You can use class if you want to refer to multiple objects - use button.className = “no”.