troubles with js logic gates

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x