How to implement a reset button?

[Porphyrogennitos]

Hello guys. I have this CodePen.

I’m using this code:

document.getElementById('reset').onclick = function() {
  document.getElementById('celsius').innerHTML = '';
};

But it doesn’t work. Can you tell me how to fix it and why this snippet doesn’t work?

[jwilkins.oboe]

Hi @Porphyrogennitos !

You will want to clear the results and change the placeholder to its original text.

clear the input field
https://www.w3schools.com/howto/howto_html_clear_input.asp

Change placeholder text
https://www.w3schools.com/jsref/prop_text_placeholder.asp

[jwilkins.oboe]

Screenshot of entering input

Screenshot of working reset button

[lasjorg]

I don’t think you want to change the placeholder value?

• Clear the input using the .value property

• Clear the .innerHTML on the #fahrenheit element.

[jwilkins.oboe]

Oh yeah I guess that placeholder wouldn’t matter.
But the other link they could use.

[Porphyrogennitos]

So, I was able to make it with your help but I ran into another problem.

I converted the classic: function() to an arrow function and now it’s not working. I checked and I did the conversion correctly but the problem exists.

[lasjorg]

Click the down arrow on the code box and use the Analyze function.

---

With const and let you can not use the variable before the declaration, they are not hoisted.

With a normal function declaration you can use it before the declaration.

If you had a function expression, which is what an arrow function is but declared using var you would still not be able to use the function. The variable holding the function would contain the value undefined as only declarations are hoisted, but it wouldn’t throw an error.

---

Edit: In case it wasn’t clear. This code.

document.getElementById("convert").onclick = convert;
document.getElementById("reset").onclick = reset;

Needs to come after the arrow function definitions.

[Porphyrogennitos]

Thank you so much @lasjorg and @jwilkins.oboe!