如何将数据输入到 Javascript 以进行客户端处理
How can I input data to Javascript for client-side processing?
我对JavaScript比较陌生,我正在开发一个新的应用程序。根据四个下拉选择的结果,我想计算并显示一个宣布结果的文本框。下面的代码允许我在 html 表单上进行选择并按"提交"按钮,但没有返回任何结果。
我很难调试,因为我不明白如何在屏幕上获得定期输出(document.write 似乎不起作用(来解释程序流。我什至不确定 js 是否正在运行...我是否需要以某种方式从 HTML 中调用我的 js?我是否需要将我的 js 存储在外部文件中并调用该外部文件?
谢谢!
<html>
<head>
<SCRIPT type="text'Javascript" EVENT="onclick">
var valueCS ;
var valueV ;
var valueVCS ;
var valueStorm ;
var finalValue = valueCS + valueV + valueVCS + valueStorm;
var startOutage ;
var outageEnd ;
document.write="total is "+finalValue;
if(finalValue==0000) {startOutage="28"; outageEnd="1";} else
(finalValue==0001) {startOutage="27"; outageEnd="1";} else
(finalValue==1110) {startOutage="22"; outageEnd="4";} else
(finalValue==1111) {startOutage="24"; outageEnd="4";} else
document.write("Invalid entries")
document.write("Start Outage: "+startOutage<br>"Outage End: "+outageEnd)
</SCRIPT>
</head>
<body>
<form id = "outageSelector" method="post contServer=1000&vistaServer=100&vistaCSServer=10&storm=1&submitServerStatus=View+Outage+Groups">
<fieldset>
<legend><h1>Please choose the status of each system</h1></legend>
<label>Is the contact server up?</label>
<select id="contServer" name="contServer">
<option valueCS=1000>Up</option>
<option valueCS=0>Down</option>
</select><br>
<label>Is the Vista server up?</label>
<select id="vistaServer" name="vistaServer">
<option valueV=100>Up</option>
<option valueV=0>Down</option>
</select><br>
<label>Is VistaCS up?</label>
<select id="vistaCSServer" name="vistaCSServer">
<option valueVCS=10>Up</option>
<option valueVCS=0>Down</option>
</select><br>
<label>Is the outage due to a storm?</label>
<select id="storm" name="storm">
<option valueStorm=1>Yes</option>
<option valueStorm=0>No</option>
</select><br>
<input type="submit" name="submitServerStatus" value="View Outage Groups" />
</fieldset>
</form>
</body>
</html>
您遇到的问题在于您的表单。 您的所有下拉列表都具有相同的名称。 此外,您的值格式不正确。
<form id="outageSelector" method="post" action="[SOME_DESTINATION]">
<fieldset>
<legend><h1>Please choose the status of each system</h1></legend>
<label>Is the contact server up?</label>
<select id="contServer" name="contServer">
<option value=1000>Up</option>
<option value=0>Down</option>
</select><br>
<label>Is the Vista server up?</label>
<select id="vistaServer" name="vistaServer">
<option value=100>Up</option>
<option value=0>Down</option>
</select><br>
<label>Is VistaCS up?</label>
<select id="vistaCSServer" name="vistaCSServer">
<option value=10>Up</option>
<option value=0>Down</option>
</select><br>
<label>Is the outage due to a storm?</label>
<select id="storm" name="storm">
<option value=1>Yes</option>
<option value=0>No</option>
</select><br>
<input type="submit" name="submitServerStatus" value="View Outage Groups" />
</fieldset>
</form>
这是在幕后与开机自检一起发送的:
contServer=1000&vistaServer=100&vistaCSServer=10&storm=1&submitServerStatus=View+Outage+Groups
编辑:这是一个修订后的js函数。
<script>
function checkValues(){
var e;
e = document.getElementById("contServer");
var valueCS = parseInt(e.options[e.selectedIndex].value);
e = document.getElementById("vistaServer");
var valueV = parseInt(e.options[e.selectedIndex].value);
e = document.getElementById("vistaCSServer");
var valueVCS = parseInt(e.options[e.selectedIndex].value);
e = document.getElementById("storm");
var valueStorm = parseInt(e.options[e.selectedIndex].value);
var finalValue = valueCS + valueV + valueVCS + valueStorm;
var startOutage = -1;
var outageEnd = -1;
if(finalValue == 0) {
startOutage = "28";
outageEnd = "1";
} else if (finalValue == 1) {
startOutage = "27";
outageEnd = "1";
} else if (finalValue == 1110) {
startOutage = "22";
outageEnd = "4";
} else if (finalValue == 1111) {
startOutage = "24";
outageEnd = "4";
}
var msg = "total: " + finalValue;
if(startOutage == -1){
msg += " | Start Outage: " + startOutage + " | Outage End: " + outageEnd;
}else{
msg += " | Invalid entries";
}
alert(msg);
}
</script>
您需要修改表单才能使用。
<form id="outageSelector" method="post" action="" onsubmit="checkValues()"> ...
根本不使用document.write
,而是使用 DOM 操作。阅读这些介绍。
此外,您还需要了解事件驱动编程。您将需要 domevents(介绍(,但与服务器的异步通信也是基于事件的。 <SCRIPT type="text'Javascript" EVENT="onclick">
不是它的工作方式:-(
要在屏幕上获得输出,您应该将console.log
与Firebug,Chrome开发工具或IE开发工具一起使用。请参阅是否有单个 HTML5、JavaScript 和 CSS 调试器?
代码中一个明显的问题是
if(finalValue=1110)
应该是(双等于进行比较(
if(finalValue==1110)
但是还有另一个问题,以零开头的数字是八进制。那是
010 == 8 // true
好像你在追求位掩码
var mask = 0;
var flagA = 1, flagB = 2, flagC = 4;
// Add flagA and flagB to the mask
mask = mask | flagA; // or mask |= flagA
mask |= flagB;
// Now you can test which flags are on using bit testing
// is flagA set?
console.log(mask & flagA) // truthy value
// is flagC set?
console.log(mask & flagC) // false (0)
https://developer.mozilla.org/en/JavaScript/Reference/Operators/Bitwise_Operators
Juan已经给了你控制台.log,这非常有用,而且可能是最好的。 Firebug,Chrome Dev和IE dev还允许您添加断点并监视局部和全局变量。
黑暗时代的旧调试风格包括使用 alert("some string here");
获取弹出窗口或向页面添加调试元素,然后填充它
document.getElementById("debugElement").innerHTML("some string here");
- Nodejs和express路由,如何处理客户端的承诺
- 实现客户端WebHook处理程序
- 无需刷新即可进行简单的客户端文件处理
- 如何在不使用处理程序的情况下使用ajax将文件从客户端发送到服务器端
- 在客户端的 IFRAME 中对内容进行沙盒处理
- 在服务器端禁用 aspxgridviews,如何在客户端处理
- 客户端处理相同输入字段的多个副本的最佳实践
- 如何将数据输入到 Javascript 以进行客户端处理
- 如何通过javascript REST客户端处理Neo4j服务器中的索引
- 从客户端处理程序返回 false 不会阻止回发
- Node.js:在客户端处理JSON对象
- 服务器端还是客户端处理原始数据更好?
- 在将文件大小传递到服务器端之前,在客户端处理文件大小
- 在客户端处理文本输入
- 通过客户端处理将HTML数据保存到数据库中
- Node.js,Express:如何使用客户端处理res.send 值
- ASP.NET MVC 返回文件结果,其中包含要在客户端处理的其他数据
- 不压缩javascript和CSS对客户端处理有什么影响
- Mongodb聚合vs客户端处理
- 实际上不向服务器提交任何内容的HTML表单(JavaScript中的客户端处理)