troubles with js logic gates-CodePudding

i was trying to learn javascript in order to program websites i already knew html and css and thought about making a simple logic gate, but once i had built it i couldnt get it to work. this is the html doc with the script below.

<!DOCTYPE html>
<html>
<body>
<p id="logic">xor: 0 or: 0 and: 0</p>
<button onclick="thisScript()">script</button>
<script>
let A = 1
let B = 1
function thisScript() {
if ((A == 1 || B == 1)&& !(A == 1 && B == 1)) {
let xor = 1
} else {
let xor = 0
}
if (A == 1 || B == 1) {
let or = 1
} else {
let or = 0
};
if (A == 1 && B == 1) {
let and = 1
} else {
let and = 0
};
document.getElementById("logic").innerHTML = `xor: ${xor} or: ${or} and: ${and}`
};
</script>
</body>
</html>

i tried moving the dom inside each of the if/else statements and it still didnt work it still said that the variable xor was undefined

CodePudding user response：

This is just a variable scope problem, your variables were scoped to the if statements which meant that they weren't accesible to the last line of code in your function. The below snippet makes the variables global, but scoping them to the function also works (second snippet). Checkout this webpage for more info on JS scopes.

let A = 1
let B = 1
let xor, and, or;

function thisScript() {
  if ((A == 1 || B == 1) && !(A == 1 && B == 1)) {
    xor = 1
  } else {
    xor = 0
  }
  if (A == 1 || B == 1) {
    or = 1
  } else {
    or = 0
  };
  if (A == 1 && B == 1) {
    and = 1
  } else {
    and = 0
  };
  document.getElementById("logic").innerHTML = `xor: ${xor} or: ${or} and: ${and}`
};

<!DOCTYPE html>
<html>

<body>
  <p id="logic">xor: 0 or: 0 and: 0</p>
  <button onclick="thisScript()">script</button>

</body>

</html>

let A = 1
let B = 1


function thisScript() {
  let xor, and, or;
  if ((A == 1 || B == 1) && !(A == 1 && B == 1)) {
    xor = 1
  } else {
    xor = 0
  }
  if (A == 1 || B == 1) {
    or = 1
  } else {
    or = 0
  };
  if (A == 1 && B == 1) {
    and = 1
  } else {
    and = 0
  };
  document.getElementById("logic").innerHTML = `xor: ${xor} or: ${or} and: ${and}`
};

<!DOCTYPE html>
<html>

<body>
  <p id="logic">xor: 0 or: 0 and: 0</p>
  <button onclick="thisScript()">script</button>

</body>

</html>