Javascript: selecting values from a dropdown - javascript

I had a standard calculation javascript and now I need to add-in multiple calculations based on a user-selected value - can't seem to get it to work....! Any chance someone could have a look and tell me where I'm going wrong???
<script type="text/javascript">
function calculate() {
var noPeople = document.ContactForm.noPeople.value;
var ddl = document.getElementById("menuType");
var selectedValue = ddl.options[ddl.selectedIndex].value;
var noPeople_excess = (noPeople-6);
if (selectedValue == 3) {
var basic = 337;
var marchCost = (50*noPeople);
if (marchCost <= basic) {
document.ContactForm.marchCost.value = 337;
document.ContactForm.marchCostVin.value = basic +(noPeople*25)
} else {
document.ContactForm.marchCost.value = basic +(noPeople_excess*34);
document.ContactForm.marchCostVin.value = basic +(noPeople_excess*34)+(noPeople*25)
}
} else (selectedValue == 4) {
var basic = 368;
var marchCost = (55*noPeople);
if (marchCost <= basic) {
document.ContactForm.marchCost.value = 368;
document.ContactForm.marchCostVin.value = basic +(noPeople*25)
} else {
document.ContactForm.marchCost.value = basic +(noPeople_excess*44);
document.ContactForm.marchCostVin.value = basic +(noPeople_excess*44)+(noPeople*25)
}
} else (selectedValue == 5) {
var basic = 419;
var marchCost = (60*noPeople);
if (marchCost <= basic) {
document.ContactForm.marchCost.value = 419;
document.ContactForm.marchCostVin.value = basic +(noPeople*25)
} else {
document.ContactForm.marchCost.value = basic +(noPeople_excess*54);
document.ContactForm.marchCostVin.value = basic +(noPeople_excess*54)+(noPeople*25)
}
}
}
</script>

This question was indeed many times answered, however here is a simple solution for you:
//get select value and assing to an input element
function setValue(selectId, elemId) {
var thisID = selectId,
valueSelected = document.getElementById(thisID).value
console.log(thisID + ' has value of ' + valueSelected);
document.getElementById(elemId).value = valueSelected;
}
http://plnkr.co/edit/rnenKVaNcJ9RhqLzUaWi
regards.

I might be confused about the two DDLs, but either the selected value should be the selectedIndex to compare with integers:
var selectedValue = ddl.selectedIndex;
or the conditions should be checking strings:
if (selectedValue == "3"){

your elses are missing an if.. eg: else if (selectedvalue==4)
I suggest using switch(selectedvalue) { case 3: ... break; case 4: ...etc
would be easier to read in this case, especially if you add more options.

Related

else statement not getting executed?

I want to reload my page if the page is not fully loaded. I am using the below if-else loop. If part is working properly but the else part is not getting executed. I have no idea why is this happening???
Can someone help me to overcome this problem??
function loadCensusData(obj) {
console.log(objXHR1.responseXML);
var vals = objXHR1.responseXML.getElementsByTagName("val");
var noOfCols = 4;
var noOfRows = vals.length / noOfCols;
var row = 0;
while (row < noOfRows) {
var Did = vals[row * noOfCols + 0].childNodes[0].nodeValue;
var DRevenue = vals[row * noOfCols + 2].childNodes[0].nodeValue;
var censusVariable = DRevenue;
var div = Did;
console.log(div);
//console.log(censusVariable);
if (censusVariable < censusMin) {
censusMin = censusVariable;
}
if (censusVariable > censusMax) {
censusMax = censusVariable;
}
map.data.getFeatureById(div).setProperty('census_variable', censusVariable);
document.getElementById('census-min').textContent = censusMin.toLocaleString();
document.getElementById('census-max').textContent = censusMax.toLocaleString();
row++;
}
if (document.readyState == 'interactive' || document.readyState == 'complete') {
alert('Done');
} else {
alert('zzzzzzzzzzzzzzzzzz');
self.location.reload();
}
}
loadCensusData loads the data from my report.
census_variable is used to apply color style
I have used the ready state conditions.
Can someone help me to overcome this problem??

Combining Javascript Validation Functions

Alright I need help combining the two JavaScript Functions... I have tried multiple times and am not coming up with any luck. There almost identical functions except the fact that I change one number so that it thinks there different textboxes. I tried putting a variable in its place but then it always only validates to the ending number of the loop. Please show me how I may be able to combine these two functions. (Its my only work around and I can not find any examples similar to mine)
First:
<script type="text/javascript">
var QnoText = ['abc_1']; // add IDs here for questions with optional text input
function doSubmit_1() {
var ids_1 = '';
flag_1 = true;
for (i=0; i<QnoText.length; i++) {
CkStatus = document.getElementById(QnoText[i]).checked;
ids_1 = QnoText[i]+'Certificate_1';
if (CkStatus && document.getElementById(ids_1).value == '') {
alert('Please enter certificate number 1.');
document.getElementById(ids_1).focus();
flag_1 = false;
alert('return flag_1');
}
}
return flag_1;
}
</script>
Second:
<script type="text/javascript">
var QnoText = ['abc_2']; // add IDs here for questions with optional text input
function doSubmit_2() {
var ids_2 = '';
flag_2 = true;
for (i=0; i<QnoText.length; i++) {
CkStatus = document.getElementById(QnoText[i]).checked;
ids_2 = QnoText[i]+'Certificate_2';
if (CkStatus && document.getElementById(ids_2).value == '') {
alert('Please enter certificate number 2.');
document.getElementById(ids_2).focus();
flag_2 = false;
alert('return flag_2');
}
}
return flag_2;
}
</script>
You can pass a parameter in your function with the number of the textbox, like this:
var QnoText = ['abc_2']; // add IDs here for questions with optional text input
function doSubmit(n) {
var ids = '';
flag = true;
for (i=0; i<QnoText.length; i++) {
CkStatus = document.getElementById(QnoText[i]).checked;
ids = QnoText[i]+'Certificate_' + n;
if (CkStatus && document.getElementById(ids).value == '') {
alert('Please enter certificate number ' + n + '.');
document.getElementById(ids).focus();
flag = false;
alert('return flag_' + n);
}
}
return flag;
}
doSubmit(1); // for your submit 1
doSubmit(2); // for your submit 2
Is this what you wanted? because is not very clear. If is not feel free to explain.

.each function () for cloned inputs

Trying to create the Preview form and do not understand why each function () not working in this script. Or works but only for the last cloned row and ignore the zero values ​​in the previously cloned inputs.
$('input[id^=Mult_factor_]').each(function () {
var MultFactor = $(this).val();
var TotPoints = $('#Tot_points').val();
var exp1 = "Overload";
var exp2 = "Load is: ";
if (MultFactor < 1 || TotPoints > 100) {
$('#ExemptionLimitsText').text(exp1).show();
$('#PrwTotPointsText').hide();
} else {
$('#ExemptionLimitsText').text(exp2).show();
$('#PrwTotPointsText').text($('#Tot_points').val()).show();
}
});
JSfiddle
I need: If at least one of cloned MultiFactor value is zero show "Overload"
Based on your comment, you want to display the word "Overload" if either the "Additional" field is over 100 or if any of the multifactor fields is 0.
However, your loop continues to process if either of these conditions are met.
Do not use a loop, instead search specifically for a multifaktor value of 0.
var totalPoints = parseInt($('#Tot_points').val());
if(totalPoints > 100 || $('input[name="MultFaktor"]').filter(function(){return this.value=='0'}).length > 0) {
$('#ExemptionLimitsText').text("Overload").show();
$('#PrwTotPointsText').hide();
} else {
$('#ExemptionLimitsText').text("Load is: ").show();
$('#PrwTotPointsText').text(totalPoints).show();
}
Return false on overload
var valid = true;
var exp1 = "Overload";
var exp2 = "Load is: ";
var TotPoints = $('#Tot_points').val();
$('input[name=MultFaktor]').each(function () {
var $this = $(this);
if ($.trim($(this).val()) == '0' || TotPoints > 100) {
valid = false;
} else {
$('#ExemptionLimitsText').text(exp2).show();
$('#PrwTotPointsText').text($('#Tot_points').val()).show();
}
});
if (valid == false) {
e.preventDefault();
$('#ExemptionLimitsText').text(exp1).show();
$('#PrwTotPointsText').hide();
}

Taking var with JS prompt - how can I make it through HTML form?

I've been learning HTML/CSS/JavaScript for a couple of weeks now, and I am currently practicing on a mini project, which consists of letting people answer math questions, and validating their answers.
My current progress can be seen at http://dany.faceflow.com
I know I am probably not using the best strategy to develop this mini game, so any advice would be useful on that. However right now, the problem is that I am taking the user answer with a variable through JS prompt, and I want to do it via an HTML form (less annoying).
In my source code you can see this line within the function:
var userInput = prompt(numb1 + symbol + numb2);
Then, still in the same function, I have an if/else structure to compare the user's answer with the right answer. The code works, I just don't know how to make the prompt HTML-based instead. I've tried an html form with an ID and in the JS using getElementById, document.write and some other stuff but I never got it to work for that part.
(Here's all the JS)
var number1 = function() {
var numb1 = Math.floor(Math.random() * 41) + 10;
return numb1;
}
var number2 = function() {
var numb2 = Math.floor(Math.random() * 41) + 10;
return numb2;
}
var userAnswer = function() {
var numb1 = number1();
var numb2 = number2();
var randomSymbol = Math.random();
if (randomSymbol > 0.5) {
var symbol = "+";
} else {
var symbol = "-";
}
// add the math question in the html bubble
document.getElementById('bubble').innerHTML = numb1 + symbol + numb2;
// Prompts the user to give an answer. Change this to HTML.
var userInput = prompt(numb1 + symbol + numb2);
//var userInput = document.getElementById('tw').value;
if (symbol == "+" && userInput == (numb1 + numb2)) {
document.getElementById('feedback').innerHTML = "Congratulations!";
} else if (symbol == "+" && userInput !== (numb1 + numb2)) {
document.getElementById('feedback').innerHTML = "Wrong!";
} else if (symbol == "-" && userInput == (numb1 - numb2)) {
document.getElementById('feedback').innerHTML = "Congratulations!";
} else if (symbol == "-" && userInput !== (numb1 - numb2)) {
document.getElementById('feedback').innerHTML = "Wrong!";
} else {
alert("Something wrong happened. Try again.");
}
return userInput;
}
(The HTML)
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/stylesheet.css" />
<script src="js/script.js"></script>
<title>Improve Your Math Skills!</title>
</head>
<body>
<center>
<button onclick="userAnswer()">PLAY NOW!</button>
<div id="bubble"></div>
<div id="feedback"></div>
<!-- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> -->
</center>
</body>
</html>
Thank you
You can use an input tag instead of the prompt. Change the HTML just as in Dinesh's answer;
<div id="bubble"></div>
<div id="inp" style="display: none;">
<input type="text" id="ans"></input> <button id="subBtn">Submit</button>
</div>
<div id="feedback"></div>
Now, for the JavaScript, there a few things to consider. Firstly, you have
var number1 = function() {
var numb1 = Math.floor(Math.random() * 41) + 10;
return numb1;
}
var number2 = function() {
var numb2 = Math.floor(Math.random() * 41) + 10;
return numb2;
}
Both functions do exactly the same thing; you don't need two separate functions to get two separate random numbers. So, only one function will suffice.
var number = function() {
return Math.floor(Math.random() * 41) + 10;
};
Secondly, now we have two functions. userAnswer to post a new question when 'Play Now!' is clicked and, say, evalAnswer to evaluate the answer written in the input field when 'Submit' is clicked.
In userAnswer, you generate two new random numbers and figure out which operation will be conducted on them. At this point, you can simply evaluate the answer yourself and store it in a global variable. This makes things easier when you evaluate the answer, you only need to do a simple comparison.
Other than that, you update innerHTML for bubble and display the div inp.
In evalAnswer, you get the value from ans and compare it with the previously computed value of the current answer, and then accordingly update feedback.innerHTML.
Here's the code;
//variable to maintain the current answer
var curAns = 0;
//Here, I get all the DOMElements I will use
var playBtn = document.getElementById('playBtn');
var bubble = document.getElementById('bubble');
var inp = document.getElementById('inp');
var ans = document.getElementById('ans');
var subBtn = document.getElementById('subBtn');
var feedback = document.getElementById('feedback');
//I add the event listeners
//This is equivalent to using 'onclick'
//in the HTML, and doing it this way is only
//my personal preference
playBtn.addEventListener('click', function() {userAnswer();}, false);
subBtn.addEventListener('click', function() {evalAnswer();}, false);
//Function to get random number
var number = function() {
return Math.floor(Math.random() * 41) + 10;
};
//This function will be executed when 'Play Now!' is clicked.
var userAnswer = function() {
//Get two separate random numbers in
//numb1 and numb2
var numb1 = number();
var numb2 = number();
var symbol = '';
var randomSymbol = Math.random();
//Determine the operation to be used
//and compute the corresponding correct answer for the current
//question
if (randomSymbol > 0.5) {
symbol = "+";
curAns = numb1+numb2;
} else {
symbol = "-";
curAns = numb1-numb2;
}
//Add math question to bubble
bubble.innerHTML = 'What is ' + numb1 + ' ' + symbol + ' ' + numb2 + '?';
feedback.innerHTML = '';
//Make inp div visible
inp.style.display = 'block';
//Reset input value to ''
ans.value = '';
};
//This function will be executed when 'Submit' is clicked
var evalAnswer = function() {
//Simply compare input value with computed
//answer and update feedback
if(parseInt(ans.value) !== curAns) {
feedback.innerHTML = 'Wrong answer, try again!';
}
else {
feedback.innerHTML = 'You got it right, congratulations!';
}
};
Here's a working example.
Hope that helped!
What I understand from your question is that you need the same functionality in HTML itself rather than driven by JS in a prompt box, if so,the below additions to your code should help:
HTML adition:
<div id="bubble"></div>
<div id="check_ans_div" style="display:none;">
<input type="text" id="txt_answer" />
<input type="submit" value="Check Answer" onclick="checkanswer()" />
</div>
<div id="feedback"></div>
JS changes:
var number1 = function() {
var numbx = Math.floor(Math.random() * 41) + 10;
return numbx;
}
var number2 = function() {
var numby = Math.floor(Math.random() * 41) + 10;
return numby;
}
var numb1=0; var numb2=0;
var userAnswer = function() {
numb1 = number1();
numb2 = number2();
var randomSymbol = Math.random();
if (randomSymbol > 0.5) {
var symbol = "+";
} else {
var symbol = "-";
}
// add the math question in the html bubble
document.getElementById('bubble').innerHTML = numb1 + symbol + numb2;
if(document.getElementById('check_ans_div').style.display=='none')
document.getElementById('check_ans_div').style.display='block';
document.getElementById('txt_answer').value='';
}
function checkanswer(){
var userInput= document.getElementById('txt_answer').value;
if (symbol == "+" && userInput == (numb1 + numb2)) {
document.getElementById('feedback').innerHTML = "Congratulations!";
} else if (symbol == "+" && userInput !== (numb1 + numb2)) {
document.getElementById('feedback').innerHTML = "Wrong!";
} else if (symbol == "-" && userInput == (numb1 - numb2)) {
document.getElementById('feedback').innerHTML = "Congratulations!";
} else if (symbol == "-" && userInput !== (numb1 - numb2)) {
document.getElementById('feedback').innerHTML = "Wrong!";
} else {
alert("Something wrong happened. Try again.");
}
}

JavaScript IF statement with conditions from input field

I'm trying to make a simple calc usign values from input fileds, but I have a problem with passing values to if statement. It looks like this:
$('#confirmSila').click(function(){
var dlugosc = $('#sila').val();
var silaOd = $('.silaOd').val();
var silaDo = $('.silaDo').val();
if ((dlugosc > silaOd) && (dlugosc < silaDo))
{
//$('#orderWymiar').attr('value', dlugosc);
$('#sila').css('border', '1px solid green');
$('.silaInfo').text('Statement true');
}else{
$('#wymiar').css('border', '1px solid red');
$('.silaInfo').text('silaOd must be more than' + silaOd + ', and less than ' + silaDo);
}
});
And, the wird thing is that, when force is 20, JavaScript says that it passed the statemenst, when in input .silaOd is typed 100. (silaOd meand minForce, and sildaDo means maxForce in Poland)
I dont have any idea, why that is happening. Please help! :)
There's a working example: http://jsfiddle.net/rJA6U/
You need to run parseInt() on the input values, like so:
var dlugosc = parseInt($('#sila').val());
var silaOd = parseInt($('.silaOd').val());
var silaDo = parseInt($('.silaDo').val());
You are comparing strings so < or > does not work. You need to cast them as int.
example:
parseInt(dlugosc) > parseInt(sila0d)
try this:
$.fn.tryParseInt = function(defaultValue) {
var
retValue = defaultValue,
actualValue = $(this).val();
if (actualValue != null) {
if (actualValue.length > 0) {
if (!isNaN(actualValue)) {
retValue = parseInt(actualValue);
}
}
}
return retValue;
}
var
dlugosc = $('#sila').tryParseInt(0),
silaOd = $('.silaOd').tryParseInt(0),
silaDo = $('.silaDo').tryParseInt(0);
based on this link

Categories