I´m pretty new to coding and I´ve been trying to get a website running where there are multiple forms, I want to get different outputs depending on the interaction of the various answers.
As of now I get a change in the console congruent with the selected element, it seems to be working, the variables being:
let a = document.getElementById('CAL');
a.onchange = (ev) =>{
console.log( a.value);} //Gets the CAL value of low,high,medium or naCal
let b = document.getElementById('sev-lev-2');
b.onchange = (ev) =>{
console.log( b.value);} //Gets value of RBL as low, medium or high
let c = document.getElementById('sev-lev-3');
c.onchange = (ev) =>{
console.log( c.value);} //Gets value of tooth loss as low, medium or high
let d = document.getElementById('MPD');
d.onchange = (ev) =>{
console.log( d.value);} //Gets value of maximum pocket depth as low, medium or high
let e = document.getElementById('type-bl');
e.onchange = (ev) =>{
console.log( e.value);} //Gets value of type of bone loss as low or high
let f = document.getElementById('ST3a');
{console.log(f.checked);}
f.onchange = (ev) =>
{console.log(f.checked);} //checks if Furcation is ticked in (true) or not
let g = document.getElementById('ST3b');
{console.log(g.checked);}
g.onchange = (ev) =>
{console.log(g.checked);} //checks if Moderate ridge defects is ticked in (true) or not
let h = document.getElementById('ST4');
{console.log(h.checked);}
h.onchange = (ev) =>
{console.log(h.checked);} //checks if Need complex rehab is ticked in (true) or not
I tried grouping some variables (ab) (ce) (fg), I am missing something to make these work, they always come out as undefined (when connecting a button to as an example console.log (ab), I tried multiple ways but are still stuck with this:
let ab //Gets value for CAL or RBL
if (a === "low"|| b === "low") {ab= "low"}
else if (a === "medium"|| b === "medium") {ab=== "medium"}
else if (a === "hig"|| b === "high") {ab=== "high"}
else {ab=="null"}
let fg;
if (f === "false"&& g === "false"){fg==="false"}
else {fg === "true"} ;
let ce;
if (c === "false"&& e === "false"){ce==="false"}
else {ce === "true"}
The other part of the problem is that when I get results for ab/ce/fg I would like to get the end result from a function,so that I can couple the function to a button click. I structured the function with or without the grouped variables but still could not get to work, the version with grouped variables is:
function debug(){
if (ab == "low" && d == "low" && ce == "low" && fg=="false" && h == "false" ) {console.log;{"I"}}
else if (ab == "low" && d == "medium" && ce == "low" && fg=="false" && h == "false" ) {console.log ("II")}
else if (ab == "medium" && (d == "low"|| d =="medium") && ce == "low" && fg=="false" && h == "false") {console.log ("II")}
else if (ab == "medium" && ((c== "medium" || "high") ||(d=="high")||(e=="high")||(fg=="true"))) {console.log ("III")}
else if (ab == "high" && (c!= "high" || h!="true")) {console.log ("III")}
else if (ab=="high" && d== "high" && e=="high" && fg=="true" && h == "true") {console.log ("IV")}
else {console.log("")}
}
The HTML for the forms is the following:
<div id="staging">
<div id="severity">
<h2>Severity (Site of greater loss)</h2>
<div><label for="CAL">Clinical attachment level:</label>
<select name="CAL" id="CAL" onclick="Severity()">
<option value="">--Interdental CAL--</option>
<option value="low">1-2mm</option>
<option value="medium">3-4mm</option>
<option value="high">>5mm</option>
<option value="naCal" >Not available</option>
</select>
</div>
<div id="RBL" ><label for="rx-bone-loss">Radiographic bone loss (% of root):</label>
<select name="RBL" id="sev-lev-2" onclick="Severity2()">
<option value="">--Select RBL %--</option>
<option value="low"> <15%</option>
<option value="medium">15-33%</option>
<option value="high">>33%</option>
</select>
</div>
<div id="TL"><label for="tooth-loss">Perio caused tooth loss:</label>
<select name="tooth-loss" id="sev-lev-3">
<option value="">--Or planned for extraction--</option>
<option value="low"> None</option>
<option value="medium">≤4</option>
<option value="high">≥5</option>
</select>
</div>
</div>
<div id="Complexity">
<h2>Complexity</h2>
<p><label for="max-probing-depth">Max Probing Depth:</label>
<select name="MPD" id="MPD">
<option value="">--Max PD--</option>
<option value="low"> ≤4mm</option>
<option value="medium">≤5mm</option>
<option value="high">≥6mm</option>
</select>
</p>
<p><label for="type-bl">Type of bone loss:</label>
<select name="type-bl" id="type-bl">
<option value="">--Type--</option>
<option value="low"> Mostly horizontal</option>
<option value="high">Vertical ≥3mm </option>
</select>
</p>
<form> <p><b>Additional Information:</b></p>
<input type="checkbox" id="ST3a" value="ST3a"><label for="Furcation"> Furcation involvement cl II-III</label><br>
<input type="checkbox" id="ST3b" value="ST3b"><label for="Defect"> Moderate ridge defects</label><br>
<input type="checkbox" id="ST4" value="ST4"><label for="Rehab"> Need for complex rehabilitation</label><br>
</form>
</div>
Additional problem:
First of all thanks for the answers, some of it I did understand, a great deal is too complicated for my level...
Now I got the form working on single selections, but when trying to select another value without refreshing the value seems to go to "undefined" and with a second try give an error "Uncaught TypeError: Cannot read properties of undefined (reading 'value')
at a.onchange"
this code shows the error on one variable selection:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Perio Staging and Grading</title>
</head>
<body>
<h2>Severity (Site of greater loss)</h2>
<div><label for="CAL">Clinical attachment level:</label>
<select name="CAL" id="CAL" >
<option value="">--Interdental CAL--</option>
<option value="low">1-2mm</option>
<option value="medium">3-4mm</option>
<option value="high">>5mm</option>
<option value="naCal" >Not available</option>
</select>
</div>
</div>
</div>
<button id="debug">Submit</button>
<div id="result">
</div>
<script>
let a = document.getElementById('CAL');
a.onchange = (ev) =>{
a= (a.value);} //Gets the CAL value of low,high,medium or naCal
</script>
</body>
Related
I have a drop down menu that displays different divs based on the selected option.
<select id='building-type'>
<option disabled selected value> -- select an option -- </option>
<option id="residential" value="residential" [...]>Residential</option>
<option id="commercial" value="commercial " [...]>Commercial</option>
<option id="corporate" value="corporate" [...]>Corporate</option>
<option id="hybrid" value="hybrid" [...]>Hybrid</option>
</select>
In those divs I call my function elevatorCalc() like so.
<div class="col-md-4" id="number-of-apartments">
<label for="residential_apartments">Number of apartments *</label>
<input onchange="elevatorCalc()" required type="number" class="form-control" id="resinput_number-of-apartments">
</div>
The function elevatorCalc() worked with radio buttons but when I switched it to a dropdown it stopped working.
this is my function
function elevatorCalc() {
const floors = document.getElementById("resinput_number-of-floors");
if (document.getElementById("commercial").checked == true) {
commercial();
} else if (document.getElementById("residential").checked == true && parseInt(floors.value) <= 20) {
residential();
} else if (document.getElementById("residential").checked == true && parseInt(floors.value) > 20) {
residential20();
} else if (document.getElementById("corporate").checked == true) {
corpo();
} else if (document.getElementById("hybrid").checked == true) {
hybrid();
}
}
My guess was that the problem came from .checked but I really don't know.
You should get the selected value like this:
let value = document.getElementById('building-type').value;
for the logic:
switch(value) {
case 'residential':
residential();
break;
case 'corporate':
corpo();
...
I have two else-if statements in my code. When I added the other else-if statement the first one resulted in an error. When I took it away, it was working just fine. I have multiple conditions for each else-if statement although I'm pretty sure I didn't set-up the conditions like I'm supposed to. If the user selects the right conditions listed in the statement it will turn an image and its text to display flex. I feel that I'm not using the && and || operators correctly in my conditions and maybe that's why the error is occurring, but I'm not sure. I've tried messing around with the && and || operators in my condition but nothings helping. I keep getting a "can't read property selected of null " error.
document.getElementById("2");
document.getElementById("3");
document.getElementById("4");
function emotion() {
if( document.getElementById("1/1").selected === true && document.getElementById("2/1").selected === true && document.getElementById("3/1").selected === true && document.getElementById("4/2").selected === true ) {
document.querySelector('.happy').style.display = 'flex';
document.querySelector('.htext').style.display = 'flex';
} else if (document.getElementById("1/3").selected === true && document.getElementById("2/2").selected === true || document.getElementById("2/3").selected === true || document.getElementById("3/3").selected === true && document.getElementById("4/1").selected === true || document.getElementById("4/2").selected === true) {
document.querySelector('.okay').style.display = 'flex';
document.querySelector('.otext').style.display = 'flex';
} else if (document.getElementById("1/4").selected === true || document.getElementById("1/5").selected === true && document.getElementById("3/4").selected === true && document.getElementById("4/1").selected === true || document.getElementById("4/2").selected === true ) {
document.querySelector('.sad').style.display = 'flex';
document.querySelector('.text').style.display = 'flex';
}
}
.happy {
position:absolute;
left:520px;
display:none;
}
.htext {
position:relative;
left:285px;
top:250px;
display:none;
}
.okay {
position:absolute;
left:520px;
display:none;
}
.otext {
position:relative;
left:205px;
top:250px;
display:none;
}
.sad {
position:absolute;
left:520px;
display:none;
}
.stext {
position:relative;
left:305px;
top:250px;
display:none;
}
<!DOCTYPE html>
<html>
<head>
<title>Emotion Tester</title>
</head>
<body>
<h1 align = "center">Hey there! How are you feeling today? Answer the questions below to determine your mood! 😄 </h1>
<p>PLEASE REFRESH EVERYTIME YOU PUT NEW INPUT!!</p>
<p>How was your day today?</p>
<select id = "1">
<option id = "1/1">It was amazing!</option>
<option id = "1/2">It was good</option>
<option id = "1/3">Fine</option>
<option id = "1/4">Wasn't good...</option>
<option id = "1/5">Horrible :(</option>
</select>
<p>Are you worried?</p>
<select id = "2">
<option id = "2/1">Not at all!</option>
<option id = "2/2">Yes, very</option>
<option id = "2/3">A little...</option>
</select>
<p>Are you happy with life?</p>
<select id = "3">
<option id = "3/1">My life is great!</option>
<option id = "3/2">It's a good life</option>
<option id = 3/3">I guess</option>
<option id = "3/4">Not at all</option>
</select>
<p>Are you mad at someone?</p>
<select id = "4">
<option id = "4/1">YES!</option>
<option id = "4/2">Nope :)</option>
</select>
<button onclick = "emotion()">SUBMIT</button>
<img src="https://s3.gifyu.com/images/happy-emoji.gif" class = "happy" width = "300px" height = "300px">
<h2 class = "htext">Seems like you're mood is HAPPY! You're happy with life and have a positive attitude</h2>
<img src="https://s3.gifyu.com/images/giphy-12e8027bed3a7ae23.gif" class = "okay" width = "300px" height = "300px">
<h2 class = "otext">It seems that you're day was just OKAY. You might feel upset, tired, or a little stressed.
Maybe you're just confused, like this emoji!.</h2>
<img src="https://s3.gifyu.com/images/sad-emoji9181fba54a527d19.gif" class = "sad" width = "300px" height = "300px">
<h2 class = "stext">Seems like your day wasn't the best. You may be sad or stressed.</h2>
</body>
</html>
From this jsfiddle: https://jsfiddle.net/7jLnvhd1/
I can't tell what your issue actually is.
I changed <option id = 3/3">I guess</option>
to
<option id = "3/3">I guess</option>
and added $(document).ready() within your JS.
New to HTML and JavaScript and I am attempting to make a webpage which let the user choose which gate they would like to use e.g.
AND
OR
XOR
NAND
NOR
The user enters their choice through a dropdown box then they choose the values to enter either 1 or 0.
This is all I have for the function right now, I was using the console.log to test if it was receiving the choice properly which it does, but I don't know how to move forwards from here and how to run the logic gates.
function Logic() {
console.log("Invoked Logic")
if (document.getElementById('gate').value == "1")
console.log("1")
else if (document.getElementById('gate').value == "2") {
console.log("2")
}
else if(document.getElementById('gate').value == "3") {
console.log("3")
}
else if (document.getElementById('gate').value == "4") {
console.log("4")
}
else if (document.getElementById('gate').value == "5") {
console.log("5")
}
else {
alert("Not a valid option.");
}
}
<label>Which Logic Gate would you like?</label> <select id="gate">
<option value ="d"> Please Select</option>
<option value="1" >AND</option>
<option value ="2">OR</option>
<option value="3">XOR</option>
<option value ="4">NAND</option>
<option value="5">NOR</option>
</select> <br> <br>
<label>What value would you like the second input to be?</label> <select id="v2">
<option value ="d"> Please Select</option>
<option value="b1">0</option>
<option value ="b2">1</option>
</select>
and for the value of 1 or 0 I use another drop down (two of them).
How would I go about getting the value of the two dropdowns then inputting them into the corresponding logic gates?
edit seems as though all of my if statements are pushing this error onto me.
Unexpected type coercion
I was able to fix it by using triple equals.
That isn't the main problem, my problem is that I do not understand how I can convert my two dropdown values which are strings into booleans themself and then run that into a logic gate equation.
An example of this if the user chose the "AND" gate and a 1 and 0. The 1 and 0 are converted into booleans so 1 being true and 0 being false and then outputting the result of them being ran through a logic gate so 0.
Attached the logic function to the change event of the select boxes. Checked if they all had a valid value. If so calculate the result based on the used gate.
/*
document.getElementById('gate').addEventListener('change', logic);
document.getElementById('v1').addEventListener('change', logic);
document.getElementById('v2').addEventListener('change', logic);
*/
document.getElementById('buttonId').addEventListener('click', logic);
function logic() {
var elGate = document.getElementById('gate');
var elV1 = document.getElementById('v1');
var elV2 = document.getElementById('v2');
var gateValue = elGate.value !== 'd' ? parseInt(elGate.value) : undefined;
var v1Value = elV1.value === 'b1' ? false : elV1.value === 'b2' ? true : undefined;
var v2Value = elV2.value === 'b1' ? false : elV2.value === 'b2' ? true : undefined;
var result = 'Invalid result';
if (v1Value !== undefined && v2Value !== undefined && gateValue !== undefined && gateValue > 0 && gateValue < 6) {
switch (gateValue) {
case 1:
result = (v1Value && v2Value) ? 'true' : 'false';
break;
case 2:
result = (v1Value || v2Value) ? 'true' : 'false';
break;
case 3:
result = ((v1Value && !v2Value) || (!v1Value && v2Value)) ? 'true' : 'false';
break;
case 4:
result = (!(v1Value && v2Value)) ? 'true' : 'false';
break;
case 5:
result = (!(v1Value || v2Value)) ? 'true' : 'false';
break;
default:
break;
}
}
document.getElementById('result').value = result;
}
<select id="gate">
<option value="d"> Please Select</option>
<option value="1">AND</option>
<option value="2">OR</option>
<option value="3">XOR</option>
<option value="4">NAND</option>
<option value="5">NOR</option>
</select>
<select id="v1">
<option value="d"> Please Select</option>
<option value="b1">0</option>
<option value="b2">1</option>
</select>
<select id="v2">
<option value="d"> Please Select</option>
<option value="b1">0</option>
<option value="b2">1</option>
</select>
<input id="result">
<button id="buttonId">Run Logic</button>
is there a way that the user can input other values in bootstrap combobox?
from this site: https://github.com/danielfarrell/bootstrap-combobox/
i tried to remove the code below from the javascript and the user can enter any value but when i try to save it in the database the combobox value is not saving.
if (!this.selected && val !== '' ) {
this.$element.val('');
this.$source.val('').trigger('change');
this.$target.val('').trigger('change');
}
Thanks!
I'm using this workaround:
bootstrap-combobox.js line 392:
//if (!this.selected && val !== '' ) {
// this.$element.val('');
// this.$source.val('').trigger('change');
// this.$target.val('').trigger('change');
//}
$('#'+this.$source.attr('id')+'_hidden').val(val);
And in your HTML file add an hidden input text to grab the selected value:
<div class="form-group">
<select class="combobox form-control" name="theinput" id="theinput">
<option value="" selected="selected">Select or enter new</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
.....
</select>
<input type="hidden" id="theinput_hidden" name="theinput_hidden" value="">
</div>
Then in your backend read 'theinput_hidden' value.
I am late to the party. Figured someone else may be trying to use both restricted type ahead and allowing freeform.
Expanding on Alvins' tweaks, which works very well (Thanks!), I needed the combobox to allow freeform entry in some instances and restricted to the options in others.
I accomplished this by adding "allowfreeform" class to the select, then modify the js to check for it. See example below. May not be the most elegant solution but works for me.
Here's how I have it:
HTML - Restricted
<div class="form-group">
<select class="combobox form-control" name="theinput" id="theinput">
<option value="" selected="selected">Select or enter new</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
.....
</select>
</div>
HTML - Allow freeform text
<div class="form-group">
<select class="combobox form-control allowfreeform" name="theinput" id="theinput">
<option value="" selected="selected">Select or enter new</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
.....
</select>
</div>
bootstrap-combobox.js
, blur: function (e) {
var that = this;
this.focused = false;
var val = this.$element.val();
if (!this.selected && val !== '' ) {
//if (!this.selected && val !== '' ) {
// this.$element.val('');
// this.$source.val('').trigger('change');
// this.$target.val('').trigger('change');
//}
if (!this.$element.hasClass("allowfreeform")){
this.$element.val('');
this.$source.val('').trigger('change');
this.$target.val('').trigger('change');
} else {
this.$element.val(val);
this.$target.val(val);
this.$container.addClass('combobox-selected');
}
}
if (!this.mousedover && this.shown) {setTimeout(function () { that.hide(); }, 200);}
}
Edit: This fork has since been added to the main repository.
In case anyone is looking at this in 2018, I think this is a better solution than the workarounds in the other answers.
I added an option to bootstrap-combobox that lets you turn off the behavior that you're talking about. See my fork. Here's how you might use this option to get the desired behavior:
$('.combobox').combobox({clearIfNoMatch: false})
Here are the relevant bits of code that I changed.
Original blur function:
, blur: function (e) {
var that = this;
this.focused = false;
var val = this.$element.val();
if (!this.selected && val !== '' ) {
this.$element.val('');
this.$source.val('').trigger('change');
this.$target.val('').trigger('change');
}
if (!this.mousedover && this.shown) {setTimeout(function () { that.hide(); }, 200);}
}
My change:
, blur: function (e) {
var that = this;
this.focused = false;
var val = this.$element.val();
if (!this.selected && val !== '' ) {
if(that.clearIfNoMatch)
this.$element.val('');
this.$source.val('').trigger('change');
this.$target.val('').trigger('change');
}
if (!this.mousedover && this.shown) {setTimeout(function () { that.hide(); }, 200);}
}
Added this to the constructor at line 41:
...
this.clearIfNoMatch = this.options.clearIfNoMatch;
...
Added this to the defaults at line 463:
...
, clearIfNoMatch: true
...
A grand total of 3 lines. Much shorter than the workarounds ;-)
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>
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()"> ...
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 :-)
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
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");