title: getElementById always returns null when trying to find response to an input form
body: <p>I'm trying to learn JavaScript and I've been reusing this input code with getelementbyid a couple times now but suddenly it just decided to break and wont return anything other than null and I have no clue on how to fix it.</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 FindRadioButton() {
    const rbs = document.querySelectorAll('input[name="choice"]');
    let selectedValue;
    for (const rb of rbs) {
      if (rb.checked) {
        selectedValue = rb.value;
        break;
      }
    }
    return selectedValue
  }
  
  function andorxor(num1, num2) {
    num1 = parseInt(document.getElementById("num1").value)
    num2 = parseInt(document.getElementById("num2").value)
    operator = FindRadioButton()
    if (operator == "AND") {
      document.getElementById("replaceable").innerHTML = num1 &amp; num2
  
    } else if (operator == "OR") {
      document.getElementById("replaceable").innerHTML = num1 | num2
  
    } else if (operator == "XOR") {
      document.getElementById("replaceable").innerHTML = num1 ^ num2
  
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;AND OR XOR BITWISE OPERATIONS&lt;/h1&gt;
  
  &lt;form id="numbers"&gt;
    &lt;input type="radio" id="AND" name="ANDORXOR" value="AND"&gt;AND &lt;br&gt;
    &lt;input type="radio" id="OR" name="ANDORXOR" value="OR"&gt;OR &lt;br&gt;
    &lt;input type="radio" id="XOR" name="ANDORXOR" value="XOR"&gt;XOR &lt;br&gt; First number: &lt;input type="text" id="num1"&gt;&lt;br&gt; Second number: &lt;input type="text" id="num2"&gt;&lt;br&gt;&lt;br&gt;
    &lt;input id="btn" type="button" onclick="andorxor(0, 0)" value="Calculate"&gt;
  &lt;/form&gt;
  
  &lt;p id="replaceable"&gt;Click "Calculate"&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>