HTML Button calls a wrong function onclick : <p>I made a html document that is basically a program that converts a decimal number into binary. It works. I added a 'Reverse' button that would do the opposite (convert binary into decimal) and for some reason it runs the code that should be run by the 'Convert' button. This is the code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function decimalToBinary() {
  document.getElementsByClassName('inputBox')[0].placeholder = 'Enter decimal number'
  alert('Hello')
}

function binaryToDecimal() {
  document.getElementsByClassName('inputBox')[0].placeholder = 'Enter binary number'
  alert('Hi')
}

function reverse() {
                if (document.getElementById('decimalNumber').placeholder === 'Enter decimal number') {
                    document.getElementById('convertButton').onclick = binaryToDecimal()
                } else if (document.getElementById('decimalNumber').placeholder === 'Enter binary number') {
                    document.getElementById('convertButton').onclick = decimalToBinary()
                }
            }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="number" class="inputBox" id="decimalNumber" placeholder="Enter decimal number" min="0" step="0.0001"&gt;
&lt;button id="convertButton" class="button hoverTurquoise" onclick="decimalToBinary()"&gt;Convert&lt;/button&gt;
&lt;button class="button hoverTurquoise reverse" onclick="reverse()"&gt;Reverse&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p>(I replaced all the code that converts the numbers into alert messages so it's easier to understand)</p>

<p>If anyone's got any ideas on how to fix this, please let me know. Thanks</p>
