时间戳

首页 > 解决方案 > 使用 HTML 和 JavaScript 的逻辑门

javascript - 使用 HTML 和 JavaScript 的逻辑门

问题描述

HTML 和 JavaScript 的新手，我正在尝试制作一个网页，让用户选择他们想要使用的门，例如

AND

OR

XOR

NAND

NOR

用户通过下拉框输入他们的选择，然后他们选择要输入的值1或0。

这就是我现在所拥有的功能，我正在使用 console.log 来测试它是否正确接收了它所做的选择，但我不知道如何从这里继续前进以及如何运行逻辑门.

 function Logic() {
         console.log("Invoked Logic")
        if (document.getElementById('gate').value == "1")
            console.log("1")
        else if (document.getElementById('gate').value == "2") {
            console.log("2")
        }
        else if(document.getElementById('gate').value == "3") {
            console.log("3")
        }
        else if (document.getElementById('gate').value == "4") {
            console.log("4")
        }
        else if (document.getElementById('gate').value == "5") {
            console.log("5")
        }
        else {
            alert("Not a valid option.");
        }
    }
        <label>Which Logic Gate would you like?</label> <select id="gate">
    <option value ="d"> Please Select</option>
       <option value="1" >AND</option>
        <option value ="2">OR</option>
        <option value="3">XOR</option>
        <option value ="4">NAND</option>
        <option value="5">NOR</option>
</select> <br> <br>



        <label>What value would you like the second input to be?</label> <select id="v2">
    <option value ="d"> Please Select</option>
    <option value="b1">0</option>
    <option value ="b2">1</option>
</select>

对于 1 或 0 的值，我使用另一个下拉菜单（其中两个）。

我将如何获取两个下拉列表的值，然后将它们输入相应的逻辑门？

编辑似乎我所有的 if 语句都将这个错误推给了我。

意外类型强制

我能够通过使用三等号来修复它。

这不是主要问题，我的问题是我不明白如何将两个作为字符串的下拉值本身转换为布尔值，然后将其运行到逻辑门方程中。

如果用户选择了“与”门和 a1和，这就是一个例子0。1and被转换为布尔值，0因此 1 为真，0 为假，然后输出它们通过逻辑门运行的结果 so 0。

标签： javascripthtml

解决方案

将逻辑功能附加到选择框的更改事件。检查它们是否都具有有效值。如果是这样，则根据使用的门计算结果。

/* 
document.getElementById('gate').addEventListener('change', logic);
document.getElementById('v1').addEventListener('change', logic);
document.getElementById('v2').addEventListener('change', logic);
*/
document.getElementById('buttonId').addEventListener('click', logic);

function logic() {
  var elGate = document.getElementById('gate');
  var elV1 = document.getElementById('v1');
  var elV2 = document.getElementById('v2');

  var gateValue = elGate.value !== 'd' ? parseInt(elGate.value) : undefined;
  var v1Value = elV1.value === 'b1' ? false : elV1.value === 'b2' ? true : undefined;
  var v2Value = elV2.value === 'b1' ? false : elV2.value === 'b2' ? true : undefined;

  var result = 'Invalid result';

  if (v1Value !== undefined && v2Value !== undefined && gateValue !== undefined && gateValue > 0 && gateValue < 6) {
    switch (gateValue) {
      case 1:
        result = (v1Value && v2Value) ? 'true' : 'false';
        break;
      case 2:
        result = (v1Value || v2Value) ? 'true' : 'false';
        break;
      case 3:
        result = ((v1Value && !v2Value) || (!v1Value && v2Value)) ? 'true' : 'false';
        break;
      case 4:
        result = (!(v1Value && v2Value)) ? 'true' : 'false';
        break;
      case 5:
        result = (!(v1Value || v2Value)) ? 'true' : 'false';
        break;
      default:
        break;
    }
  }
  document.getElementById('result').value = result;
}
<select id="gate">
  <option value="d"> Please Select</option>
  <option value="1">AND</option>
  <option value="2">OR</option>
  <option value="3">XOR</option>
  <option value="4">NAND</option>
  <option value="5">NOR</option>
</select>

<select id="v1">
  <option value="d"> Please Select</option>
  <option value="b1">0</option>
  <option value="b2">1</option>
</select>

<select id="v2">
  <option value="d"> Please Select</option>
  <option value="b1">0</option>
  <option value="b2">1</option>
</select>

<input id="result">
<button id="buttonId">Run Logic</button>

推荐阅读