html button javascript function

Question

I am wanting to have a button execute a function in my javascript file but it fails to do so when the button is clicked.

 function output() { if (form.inl.value == "1" && form.gate.value == "and" && form.inll.value == "0") { alert("output is 0") } else { if (form.inl.value == "1" && form.gate.value == "and" && form.inll.value == "1") { alert("output is 1") } } } 

 <select id="inl"> <option value="1">1</option> <option value="0">0</option> </select> <select id="gate"> <option value="and">and</option> <option value="or">or</option> <option value="not">not</option> </select> <select id="inll"> <option value="1">1</option> <option value="0">0</option> </select> <input id="out" type="button" value="output" onclick="output();"> 

What is it that I am doing wrong?

Answer 1

Try the following:

 function output(){ var inl = document.getElementById('inl').value; var ln1 = document.getElementById('inll').value; var gate = document.getElementById('gate').value; if((inl == "1" && gate == "or" && ln1 == "0") || (inl == "0" && gate == "or" && ln1 == "1") || (inl == "1" && gate == "and" && ln1 == "1") || (inl == "1" && gate == "or" && ln1 == "1")){ alert("output is 1") } else{ alert("output is 0") } } 

 <select id="inl"> <option value="1">1</option> <option value="0">0</option> </select> <select id="gate"> <option value="and">and</option> <option value="or">or</option> <option value="not">not</option> </select> <select id="inll"> <option value="1">1</option> <option value="0">0</option> </select> <input id="out" type="button" value="output" onclick="output();"></body> 

Answer 2

Now it works, you were trying to take value from elements that aren't present in your code.

JQuery approach:

 function output(){ if($("#inl")[0].value == "1" && $("#gate")[0].value == "and" && $("#inll")[0].value == "0"){ alert("output is 0") } else{ if($("#inl")[0].value == "1" && $("#gate")[0].value == "and" && $("#inll")[0].value == "1"){ alert("output is 1") } } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="inl"> <option value="1">1</option> <option value="0">0</option> </select> <select id="gate"> <option value="and">and</option> <option value="or">or</option> <option value="not">not</option> </select> <select id="inll"> <option value="1">1</option> <option value="0">0</option> </select> <input id="out" type="button" value="output" onclick="output();"></body> 

Javascript approach:

 function output(){ if(document.getElementById("inl").value == "1" && document.getElementById("gate").value == "and" && document.getElementById("inll").value == "0"){ alert("output is 0") } else{ if(document.getElementById("inl").value == "1" && document.getElementById("gate").value == "and" && document.getElementById("inll").value == "1"){ alert("output is 1") } } } 

 <select id="inl"> <option value="1">1</option> <option value="0">0</option> </select> <select id="gate"> <option value="and">and</option> <option value="or">or</option> <option value="not">not</option> </select> <select id="inll"> <option value="1">1</option> <option value="0">0</option> </select> <input id="out" type="button" value="output" onclick="output();"></body> 

Answer 3

Try this
function output(){
if(form.elements["inl"].value == "1" && form.elements["gate"].value == "and" && form.elements["inll"].value == "0"){
    alert("output is 0")

}
else{
if(form.elements["inll"].value == "1" && form.elements["gate"].value == "and" && form.elements["inll"].value == "1"){
        alert("output is 1")
    }
}

Answer 4

You can access the form by name. I would grab the fields by names and parse them as integers.

Then perform native calculations.

 function output() { let form = document.forms['my-logic-form'], left = parseInt(form.inl.value, 10), op = form.gate.value, right = parseInt(form.inll.value, 10); alert('Output is: ' + doCalculation(op, left, right)); } function doCalculation(op, left, right) { switch (op) { case 'and' : return left && right; case 'or' : return left || right; case 'not' : return !left; // Unary (right is ignored) default : return -1; // Undefined operation } } 

 <form name="my-logic-form"> <select name="inl"> <option value="1">1</option> <option value="0">0</option> </select> <select name="gate"> <option value="and">and</option> <option value="or">or</option> <option value="not">not</option> </select> <select name="inll"> <option value="1">1</option> <option value="0">0</option> </select> <input name="out" type="button" value="output" onclick="output();"> </form> 

Answer 5

This problem may occurred due to browser:

Solutions are :

1: Rename "output()" function to any like "output1()"

2: Replace onclick="output();" to onclick="return output();"

3: You can use Debugger; and check whether your function is called or not. it is like checkpoint so you can check flow of your code after pressing ctrl+shift+i and then F10 to execute line by line..

eg.

function output() {
    debugger;
  if (form.inl.value == "1" && form.gate.value == "and" && form.inll.value == "0") {
    debugger;
    alert("output is 0")
  } else {
    debugger;
    if (form.inl.value == "1" && form.gate.value == "and" && form.inll.value == "1") {
      alert("output is 1")
    }
  }
}

One from this solutions is definitely useful to you. Thank you :)