How can I input data to Javascript for client-side processing?
Question
I'm relatively new to JavaScript and I am working on a new application. Based on the results of four drop-down selections, I would like to calculate and display a text box announcing the result. The code below allows me to make my selections on the html form and press the "submit" button, but no results are returned.
I'm having a hard time debugging because I don't understand how to get periodic output on screen (document.write doesn't seem to work) to interpret program flow. I'm not even sure if the js is running...do I somehow need to call my js from within the HTML? Do I need to store my js in an external file and call that external file?
Thanks!
<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>
4 answers
solution1
1 2012-05-17 15:42:53
To get output on the screen, you should use console.log along with Firebug, Chrome dev tools, or IE dev tools. See Is there a single HTML5, JavaScript, and CSS debugger?
One obvious problem in your code is
if(finalValue=1110)
Should be (double equals for comparison)
if(finalValue==1110)
But there's another problem, a number that starts with a zero is an octal. That is
010 == 8 // true
It seems like you're after a bitmask
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
solution2
1 2012-05-17 15:52:18
Don't use document.write at all, but DOM manipulation. Read these introductions .
Also, you will need to learn about event-driven programming . You'll need domevents ( intro ), but also asynchronous communication to the server is event-based. <SCRIPT type="text\\Javascript" EVENT="onclick"> is not the way it works :-)
solution3
1 ACCPTED 2012-05-17 16:21:21
The problem you're having is with your FORM. All of your dropdowns had the same name. Also your values were incorrect formatted.
<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>
This is sent along w/ the POST behind the scenes:
contServer=1000&vistaServer=100&vistaCSServer=10&storm=1&submitServerStatus=View+Outage+Groups
EDIT: here's a revised js function.
<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>
You'll need to modify your form to use.
<form id="outageSelector" method="post" action="" onsubmit="checkValues()"> ...
solution4
0 2012-05-17 15:47:52
Juan already gave you console.log, which is very useful, and probably the best. Firebug, Chrome Dev and IE dev will also allow you to add break points and watch local and global variables.
Older styles of debugging from the dark ages would include using alert("some string here"); to get a popup or add a debug element to your page and then populating it with
document.getElementById("debugElement").innerHTML("some string here");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.