getElementById always returns null when trying to find response to an input form [closed]-CodePudding

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.

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 & num2

  } else if (operator == "OR") {
    document.getElementById("replaceable").innerHTML = num1 | num2

  } else if (operator == "XOR") {
    document.getElementById("replaceable").innerHTML = num1 ^ num2

  }
}

<h1>AND OR XOR BITWISE OPERATIONS</h1>

<form id="numbers">
  <input type="radio" id="AND" name="ANDORXOR" value="AND">AND <br>
  <input type="radio" id="OR" name="ANDORXOR" value="OR">OR <br>
  <input type="radio" id="XOR" name="ANDORXOR" value="XOR">XOR <br> First number: <input type="text" id="num1"><br> Second number: <input type="text" id="num2"><br><br>
  <input id="btn" type="button" onclick="andorxor(0, 0)" value="Calculate">
</form>

<p id="replaceable">Click "Calculate"</p>

CodePudding user response：

The getElementById's are fine, you are using the wrong name in your FindRadioButton function:

const rbs = document.querySelectorAll('input[name="choice"]');

name="choice" should match the name of your inputs: name="ANDORXOR":

<h1>AND OR XOR BITWISE OPERATIONS</h1>

<form id="numbers">
  <input type="radio" id="AND" name="ANDORXOR" value="AND">AND <br>
  <input type="radio" id="OR" name="ANDORXOR" value="OR">OR <br>
  <input type="radio" id="XOR" name="ANDORXOR" value="XOR">XOR <br> First number: <input type="text" id="num1"><br> Second number: <input type="text" id="num2"><br><br>
  <input id="btn" type="button" onclick="andorxor(0, 0)" value="Calculate">
</form>

<p id="replaceable">Click "Calculate"</p>

<script>
  function FindRadioButton() {
    const rbs = document.querySelectorAll('input[name="ANDORXOR"]');
    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 & num2

    } else if (operator == "OR") {
      document.getElementById("replaceable").innerHTML = num1 | num2

    } else if (operator == "XOR") {
      document.getElementById("replaceable").innerHTML = num1 ^ num2

    }
  }
</script>
javascript html typeerror

CodePudding user response：

do yourself a favor, and get this course from Udemy. Max is the best teacher you can get, and I already bought and did many of his courses. His Angular course helped me a lot and I am now frontend techlead for a big company

https://www.udemy.com/course/javascript-the-complete-guide-2020-beginner-advanced/