[英]html button javascript function
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. 我想在我的javascript文件中有一个按钮执行一个函数,但是当单击该按钮时它无法执行此操作。
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? 我做错了什么?
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>
Now it works, you were trying to take value from elements that aren't present in your code. 现在它可以工作,你试图从代码中不存在的元素中获取值。
JQuery approach: JQuery方法:
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: Javascript方法:
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>
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")
}
}
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>
This problem may occurred due to browser: 浏览器可能会出现此问题:
Solutions are : 解决方案是:
1: Rename "output()" function to any like "output1()" 1:将“output()”函数重命名为“output1()”之类的函数
2: Replace onclick="output();" 2:替换onclick =“output();” to onclick="return output();" to onclick =“return output();”
3: You can use Debugger; 3:你可以使用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.. 它就像检查点,所以你可以在按ctrl + shift + i然后按F10逐行执行后查看代码流程。
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 :) 谢谢 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.