Function does not fire

Question

I’m starting to work / learn the DOM, but I’m having difficulties, because:

        const celsius = document.getElementsByName('celsius')[0]
        const fahrenheit = document.getElementsByName('fahrenheit')[0]
        const buttonClear = document.getElementsByName('limpar')[0]
        const buttonSubmit = document.getElementsByName('converter')[0]

        //buttonClear.addEventListener('click', limparBox(celsius, fahrenheit))
        //buttonClear.onclick = limparBox(celsius, fahrenheit)

        function limparBox(input1, input2) {
            input1.value = "";
            input2.value = "";
        }

input[type=text] {
  padding: 5px;
  border: solid 1px black;
  font-style: italic;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  text-align: center;
  border-radius: 2px;
}

button[type=submit] {
  background-color: #74f541;
  padding: 10px;
  font-weight: bold;
  border-radius: 3px;
  border: solid 1px black;
}

button[type=reset] {
  background-color: #f2fa83;
  padding: 10px;
  font-weight: bold;
  border-radius: 3px;
  border: solid 1px black;
}

<input type="text" name="celsius" placeholder="Celsius">
<button type="submit" name="converter">Converter para Fahrenheit</button>
<button type="reset" name="limpar">Limpar Textos</button>
<input type="text" name="fahrenheit" placeholder="Fahrenheit">

This one of mine function if I run in the console of own browser the boxes are clean, but when I put it (function) to execute the click of a button is not called, I tried so hard through a callback how much for a property onclick.

It is also only possible to access the elements DOM being in the escopo global javascript?

Answer 1

Your code is not working because you are not passing a function to the event onclick.

buttonClear.addEventListener('click', limparBox(celsius, fahrenheit))
buttonClear.onclick = limparBox(celsius, fahrenheit)

In these two lines of code, you are invoking the function limparBox and passing her return as Handler, but that function doesn’t even have a return (not that she needs).

To pass a function, you need to pass the name of the function without invoking it, for example:

buttonClear.addEventListener('click', limparBox)
buttonClear.onclick = limparBox

But this will not work very well in your case as you want to invoke the functions by passing the parameters celsius and fahrenheit, so instead, you can create a new anonymous function, and invoke the function limparBox with the correct parameters within it:

buttonClear.addEventListener('click', function() {
    limparBox(celsius, fahrenheit)
})

//ou

buttonClear.onclick = function() {
    limparBox(celsius, fahrenheit)
}

And you don’t need to be in the global scope to access the DOM, the object document is accessible globally, which means you can access it within any scope, your code could be written as follows:

// handler para limpar os inputs
document.getElementsByName('limpar')[0].addEventListener('click', function() {
    const celsius = document.getElementsByName('celsius')[0]
    const fahrenheit = document.getElementsByName('fahrenheit')[0]

    celcius.value = ''
    fahrenheit.value = ''
})