Conflict in the use of Javascript functions

Question

A clear() function was created to clear the numbers inserted in a display by another addNumber() function, but the first function is not having any effect when used.

Tips on how I can solve this problem, or improve my code?.

const operation = document.querySelectorAll("[data-operation]")
const numbers = document.querySelectorAll("[data-content]")
const del = document.querySelector("[data-del]")
const allClear = document.querySelector("[data-ac]")
const displayPrevious = document.querySelector("[data-previous]")
const displayCurrent = document.querySelector("[data-current]")
const displayOperator = document.querySelector("[data-operator]")

function clear (){
    displayCurrent.innerHTML = " "
}
function addNumber(number){
    number = event.target.innerHTML
    if(number === "." && displayCurrent.innerHTML.includes(".")){
        return
    }
    displayCurrent.innerHTML += number
}

Answer 1

Diego, since you didn’t post all the code, I imagined how it could be and I think it’s working properly:

const operation = document.querySelectorAll("[data-operation]");
const numbers = document.querySelectorAll("[data-content]");
const del = document.querySelector("[data-del]");
const allClear = document.querySelector("[data-ac]");
const displayPrevious = document.querySelector("[data-previous]");
const displayCurrent = document.querySelector("[data-current]");
const displayOperator = document.querySelector("[data-operator]");

function clear() {
    displayCurrent.innerHTML = " ";
}

function addNumber() {
    const number = event.target.innerHTML;
    if (number === "." && displayCurrent.innerHTML.includes(".")) {
        return;
    }

    displayCurrent.innerHTML += number;
}

numbers.forEach(a => a.addEventListener('click', addNumber));

allClear.addEventListener('click', clear);

div[data-content] {
  cursor: pointer;
  background: #ccc;
  padding: 6px;
  margin-bottom: 4px;
}

div[data-content]:hover {
  background: #efefef;
}

<div data-content>1</div>
<div data-content>2</div>
<div data-content>3</div>
<div data-content>.</div>
<div>
    data-current: <span data-current></span>
</div>
<button data-ac>clear</button>

If not, please post more details.

Answer 2

Its function has an inadequate space

**function clear (){**
  displayCurrent.innerHTML = " "
}

must be:

function clear(){
   displayCurrent.innerHTML = " "
}