Question

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语句都将这个错误推给了我。

意外类型强制

我可以通过使用三重等于来解决它。

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

如果用户选择“ AND”门和1和0，则为此示例。 1和0转换为布尔值，因此1为true，0为false，然后输出通过逻辑门运行的结果，因此0。

Answer 1

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

/* 
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>

使用HTML和JavaScript的逻辑门

1 个答案: