Logic Gates using HTML and JavaScript

Question

New to HTML and JavaScript and I am attempting to make a webpage which let the user choose which gate they would like to use e.g.

AND

OR

XOR

NAND

NOR

The user enters their choice through a dropdown box then they choose the values to enter either 1 or 0.

This is all I have for the function right now, I was using the console.log to test if it was receiving the choice properly which it does, but I don't know how to move forwards from here and how to run the logic gates.

 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>

and for the value of 1 or 0 I use another drop down (two of them).

How would I go about getting the value of the two dropdowns then inputting them into the corresponding logic gates?

edit seems as though all of my if statements are pushing this error onto me.

Unexpected type coercion

I was able to fix it by using triple equals.

That isn't the main problem, my problem is that I do not understand how I can convert my two dropdown values which are strings into booleans themself and then run that into a logic gate equation.

An example of this if the user chose the "AND" gate and a 1 and 0. The 1 and 0 are converted into booleans so 1 being true and 0 being false and then outputting the result of them being ran through a logic gate so 0.

Consider using [switch-case](https://devdocs.io/javascript/statements/switch) for the first snippet. — shreyasminocha, Dec 14 '18 at 12:28
Type coercion is the process of converting a value from one type to another type. https://stackoverflow.com/questions/19915688/what-exactly-is-type-coercion-in-javascript covers this very well. — Isaac, Dec 14 '18 at 12:29
Possible duplicate of [What exactly is Type Coercion in Javascript?](https://stackoverflow.com/questions/19915688/what-exactly-is-type-coercion-in-javascript) — Isaac, Dec 14 '18 at 12:30
Off-topic but... Your code is so repetative. At least extract this part `document.getElementById('gate').value` to a variable. — Yury Tarabanko, Dec 14 '18 at 12:32
I'm quite new to HTML and javascript so I can only use simple methods really. — Rhys, Dec 14 '18 at 12:33
Do you know how all these `XOR`, `NAND` should work? If yes, then it's straight forward to apply comparison and show value to user, otherwise you should investigate them first. — Justinas, Dec 14 '18 at 13:01
I know how they all work, its just writing it in javascript as efficiently as possible as I lack the skills currently. — Rhys, Dec 18 '18 at 12:48

Mark Baijens · Accepted Answer · 2018-12-18T12:49:09.483

Attached the logic function to the change event of the select boxes. Checked if they all had a valid value. If so calculate the result based on the used gate.

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

Thanks, the logic works great but is there anyway to get this to run through a button? So only do the logic onclick ? — Rhys, Dec 18 '18 at 12:45
@Rhys Ofcourse, just bind the function to the click event of the button. I updated the snippet to demonstrate. — Mark Baijens, Dec 18 '18 at 12:49

Logic Gates using HTML and JavaScript

1 Answers1