js逻辑门的问题

Question

我正在尝试学习 javascript 以便对我已经知道 html 和 css 的网站进行编程，并考虑制作一个简单的逻辑门，但是一旦我建立了它无法让它工作。这是带有以下脚本的 html 文档。

<!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>

我尝试将 dom 移动到每个 if/else 语句中，但仍然没有用它仍然说变量 xor 未定义

Answer 1

这只是一个变量范围问题，您的变量被限定在 if 语句中，这意味着它们无法访问您函数中最后一行代码。下面的代码片段使变量成为全局变量，但将它们限定在函数范围内也有效（第二个代码片段）。查看 this webpage 了解有关 JS 作用域的更多信息。

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>

js逻辑门的问题

troubles with js logic gates

html

javascript

logic

dom