在下面的代码中，我试图获取单个输入的值，并在一次单击时将结果显示为图像。代码适用于单个输入，从最后到第一个我只启用了DC输入，DC输出，模拟输入和模拟输出等字段。如何在输入所有数字后单击显示图像
直流输入：16 直流输出：16 模拟输入：8 模拟输出：4
function toggleVisibility(id) {
var el = document.getElementById(id);
if (el.style.display=="block") {
el.style.display="none";
}
else {
el.style.display="block";
}
}
$(document).ready(function() {
$("#aibox").keyup(function(event) { // bind function called when key is released
$(".aibox").html("<input type=\"text\" id=\"aic\" placeholder=\"4-20mA\" size=\"10\"><br><input type=\"text\" id=\"aiv\" placeholder=\"0-10V\" size=\"10\">");
});
$("button").click(function() { // click method to call keydown() function
$("#aibox").keyup();
});
$("#aobox").keyup(function(event) { // bind function called when key is released
$(".aobox").html("<input type=\"text\" id=\"aoc\" placeholder=\"4-20mA\" size=\"10\"><br><input type=\"text\" id=\"aov\" placeholder=\"0-10V\" size=\"10\"> ");
});
$("button").click(function() { // click method to call keydown() function
$("#aobox").keyup();
});
});
function checkName() {
var text;
var di = document.getElementById("dibox").value;
if (di >= 16) {
text = "Use Digital Input Module";
document.getElementById('EZLGX-IO-16DCI').style.display='block'
return false;
}
var doo = document.getElementById("dobox").value;
if (doo >= 16) {
text = "Use Digital Output Module";
document.getElementById('EZLGX-IO-16DCOP').style.display='block'
return false;
}
var ainc = document.getElementById("aic").value;
var ainv = document.getElementById("aiv").value;
var aonc = document.getElementById("aoc").value;
var aonv = document.getElementById("aov").value;
//first If
if ((ainc && aonc <= 2) || (ainv && aonv <= 2)) {
text = "Use Two Combo Module";
document.getElementById('EZLGX-IO-4ACI4ACO').style.display='block';
document.getElementById('EZLGX-IO-8ACI').style.display='block';
return false;
// seconf if|| (ainv && aonv >= 3))
} else if (ainc && aonc >= 3) {
text = "Use Analog Input Current Module";
document.getElementById('EZLGX-IO-8ANI4ANOC').style.display='block';
return false;
} else if (ainv && aonv >= 3) {
text = "Use Analog Input Voltage Module";
document.getElementById('EZLGX-IO-8ANI4ANOV').style.display='block';
return false;
// last if
} else {
text = "Waaay off..";
}
document.getElementById("demo").innerHTML = text;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table width="815" border="0" cellspacing="1" cellpadding="2">
<tbody>
<tr>
<td rowspan="2"><strong>CPU</strong></td>
<td><label for="EZLGX-CPU-1UE">EZLGX-CPU-1UE</label> <input type="checkbox" name="finallevelusers[]" onChange="toggleVisibility('EZLGX-CPU-1UE');"/> </td>
<td colspan="3">CPU 500K words ladder memory, USB, Micro SD, Ethernet and 1 RS232/422/48 ports.</td>
</tr>
<tr>
<td><label for="EZLGX-CPU-2UE">EZLGX-CPU-2UE</label><input type="checkbox" name="finallevelusers[]" onChange="toggleVisibility('EZLGX-CPU-2UE');"/> </td>
<td colspan="3">CPU 500K words ladder memory, USB, Micro SD, Ethernet and 2 RS232/422/48 ports.</td>
</tr>
<tr>
<td width="20%"><strong>DC Inputs</strong></td>
<td width="20%"><strong>DC Outputs</strong></td>
<td width="20%"><strong>AC Inputs</strong></td>
<td width="20%"><strong>AC Outputs</strong></td>
<td width="20%"><strong>High Speed Counter</strong></td>
</tr>
<tr>
<td valign="top" style="font-size:11px"><input type="text" id="dibox" size="10" onkeyup="sum();"/>
<!--<div class="dibox"></div>--></td>
<td valign="top" style="font-size:11px"><input type="text" id="dobox" size="10" onkeyup="sum();"/>
<!--<div class="dobox"></div>--></td>
<td valign="top" style="font-size:11px"><input type="text" id="acibox" size="10" onkeyup="sum();"/>
<div class="acibox"></div></td>
<td valign="top" style="font-size:11px"><input type="text" id="acobox" size="10" onkeyup="sum();"/>
<div class="acobox"></div></td>
<td valign="top" style="font-size:11px"><input type="text" id="hscbox" size="10" onkeyup="sum();"/><div class="hscbox"></div></td>
</tr>
<tr>
<td><strong>Anaog Input</strong></td>
<td><strong>Analog Output</strong></td>
<td><strong>Temperature Input</strong></td>
<td><strong>Relay Output</strong></td>
<td> </td>
</tr>
<tr>
<td valign="top" style="font-size:11px"><input type="text" id="aibox" size="10" onkeyup="sum();"/>
<div class="aibox"></div></td>
<td valign="top" style="font-size:11px"><input type="text" id="aobox" size="10" onkeyup="sum();"/>
<div class="aobox"></div></td>
<td valign="top" style="font-size:11px"><input type="text" id="tibox" size="10" onkeyup="sum();"/>
<div class="tibox"></div></td>
<td valign="top" style="font-size:11px"><input type="text" id="ribox" size="10" onkeyup="sum();"/>
<div class="ribox"></div></td>
<td valign="top" style="font-size:11px"></td>
</tr>
<tr>
<td colspan="5">
<div class="box" style=" overflow: auto; height: 275px;"><hr /><img id="EZLGX-CPU-1UE" src="http://www.ezautomation.net/ioconfig/img/EZLGX-CPU-1UE.png" style="display: none; float: left"/><img id="EZLGX-CPU-2UE" src="http://www.ezautomation.net/ioconfig/img/EZLGX-CPU-2UE.png" style="display: none; float: left"/><img id="EZLGX-IO-16DCI" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-16DCI.png" style="display: none; float: left"/><img id="EZLGX-IO-8ACI" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-8ACI.png" style="display: none; float: left"/><img id="EZLGX-IO-4ACI4ACO" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-4ACI4ACO.png" style="display: none; float: left"/><img id="EZLGX-IO-16DCOP" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-16DCOP.png" style="display: none; float: left"/><img id="EZLGX-IO-16DCON" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-16DCON.png" style="display: none; float: left"/><img id="EZLGX-IO-4DCOP4RLO" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-4DCOP4RLO.png" style="display: none; float: left"/>
<img id="EZLGX-IO-8RLO" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-8RLO.png" style="display: none; float: left"/>
<img id="EZLGX-IO-8ACO" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-8ACO.png" style="display: none; float: left"/>
<img id="EZLGX-IO-8ANI4ANOV" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-8ANI4ANOV.png" style="display: none; float: left"/>
<img id="EZLGX-IO-8ANI4ANOC" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-8ANI4ANOC.png" style="display: none; float: left"/>
<img id="EZLGX-IO-4THIE" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-4THIE.png" style="display: none; float: left"/>
<img id="EZLGX-IO-4RTD" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-4RTD.png" style="display: none; float: left"/>
<img id="EZLGX-IO-HSCNT" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-HSCNT.png" style="display: none; float: left"/>
</div></td>
</tr>
</tbody>
</table>
<!--Analog In<input type="text" id="aic" placeholder="4-20mA" ><br><input type="text" id="aiv" placeholder="0-10V" ><br>
<br>
Analog Out<input type="text" id="aoc" placeholder="4-20mA" ><br><input type="text" id="aov" placeholder="0-10V" ><br><br>-->
<button id="plc" onclick="checkName()">Check Name</button>
<p id="demo"></p>
答案 0 :(得分：0)
<强>简化
通过简化，我们可以看到一些问题。
parseInt的数字。 value属性将它们作为字符串提供给您，因此"16" >= 16将起作用，因为JavaScript会强制该值，但您应该检查用户是否输入了有效数字而不是字母。aic是指AC输入还是模拟输入。if语句都返回false，因此永远不会填充demo文本。 解决其中一些问题可能会让你回到正轨。祝你好运！
function checkName() {
var text = 'Waaay off..';
var di = parseInt(document.getElementById('dibox').value);
var doo = parseInt(document.getElementById('dobox').value);
var ainc = parseInt(document.getElementById('acibox').value);
var ainv = parseInt(document.getElementById('aibox').value);
var aonc = parseInt(document.getElementById('acobox').value);
var aonv = parseInt(document.getElementById('aobox').value);
if (di >= 16) {
text = 'Use Digital Input Module';
document.getElementById('EZLGX-IO-16DCI').style.display = 'block';
} else if (doo >= 16) {
text = 'Use Digital Output Module';
document.getElementById('EZLGX-IO-16DCOP').style.display = 'block';
} else if ((ainc && aonc <= 2) || (ainv && aonv <= 2)) {
text = 'Use Two Combo Module';
document.getElementById('EZLGX-IO-4ACI4ACO').style.display = 'block';
document.getElementById('EZLGX-IO-8ACI').style.display = 'block';
} else if (ainc && aonc >= 3) {
text = 'Use Analog Input Current Module';
document.getElementById('EZLGX-IO-8ANI4ANOC').style.display = 'block';
} else if (ainv && aonv >= 3) {
text = 'Use Analog Input Voltage Module';
document.getElementById('EZLGX-IO-8ANI4ANOV').style.display = 'block';
}
document.getElementById('demo').innerHTML = text;
}<label for="dibox">DC Inputs: </label><input type="text" id="dibox" size="10"><br>
<label for="dobox">DC Outputs: </label><input type="text" id="dobox" size="10"><br>
<label for="acibox">AC Inputs: </label><input type="text" id="acibox" size="10"><br>
<label for="acobox">AC Outputs: </label><input type="text" id="acobox" size="10"><br>
<label for="hscbox">High Speed Counter: </label><input type="text" id="hscbox" size="10"><br>
<label for="aibox">Anaog Input: </label><input type="text" id="aibox" size="10"><br>
<label for="aobox">Analog Output: </label><input type="text" id="aobox" size="10"><br>
<label for="tibox">Temperature Input: </label><input type="text" id="tibox" size="10"><br>
<label for="ribox">Relay Output: </label><input type="text" id="ribox" size="10"><br>
<img id="EZLGX-CPU-1UE" src="http://www.ezautomation.net/ioconfig/img/EZLGX-CPU-1UE.png" style="display: none;">
<img id="EZLGX-CPU-2UE" src="http://www.ezautomation.net/ioconfig/img/EZLGX-CPU-2UE.png" style="display: none;">
<img id="EZLGX-IO-16DCI" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-16DCI.png" style="display: none;">
<img id="EZLGX-IO-8ACI" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-8ACI.png" style="display: none;">
<img id="EZLGX-IO-4ACI4ACO" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-4ACI4ACO.png" style="display: none;">
<img id="EZLGX-IO-16DCOP" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-16DCOP.png" style="display: none;">
<img id="EZLGX-IO-16DCON" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-16DCON.png" style="display: none;">
<img id="EZLGX-IO-4DCOP4RLO" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-4DCOP4RLO.png" style="display: none;">
<img id="EZLGX-IO-8RLO" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-8RLO.png" style="display: none;">
<img id="EZLGX-IO-8ACO" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-8ACO.png" style="display: none;">
<img id="EZLGX-IO-8ANI4ANOV" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-8ANI4ANOV.png" style="display: none;">
<img id="EZLGX-IO-8ANI4ANOC" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-8ANI4ANOC.png" style="display: none;">
<img id="EZLGX-IO-4THIE" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-4THIE.png" style="display: none;">
<img id="EZLGX-IO-4RTD" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-4RTD.png" style="display: none;">
<img id="EZLGX-IO-HSCNT" src="http://www.ezautomation.net/ioconfig/img/EZLGX-IO-HSCNT.png" style="display: none;">
<br><button onclick="checkName()">Check Name</button>
<br>
<p id="demo"></p>