I am trying to change the value of a radio button with a form input: https://jsfiddle.net/91oz4nfL/
Essentially by default I want it to be NO but if the argument is triggered then change the radio button to YES
function calculateBMI() {
var weight = document.getElementById('input1').value;
var height = document.getElementById('input2').value / 100;
var output = document.getElementById('output');
var bmi = ((weight) / (height * height));
var result = ""
if (bmi > 22) {
result = "Change question radio to yes!";
}
bmi = bmi.toFixed(2);
if (bmi && bmi != Number.POSITIVE_INFINITY) {
output.innerHTML = result;
output.style.display = 'block';
} else {
result.innerHTML = '';
output.style.display = 'none';
}
}
document.getElementById('input1').addEventListener('keyup', calculateBMI);
document.getElementById('input2').addEventListener('keyup', calculateBMI);
You simply need to add a few lines in your if statement, like so
if (bmi > 22) {
document.getElementById("Radio9").checked = true;
result = "Change question radio to yes!";
} else {
document.getElementById("Radio10").checked = true;
}
If a radio button is true this means that it is checked. The above code sets the 'Yes' radio button to checked if bmi is greater than 22, otherwise sets the 'No' radio button to true.
https://jsfiddle.net/91oz4nfL/
Try this:
var radioYes = document.getElementById('Radio9');
var radioNo = document.getElementById('Radio10');
var weight = document.getElementById('input1').value;
var height = document.getElementById('input2').value / 100;
var output = document.getElementById('output');
var bmi = ((weight) / (height * height));
var result = ""
debugger
if (bmi > 22) {
result = "Change question radio to yes!";
radioYes.checked = true;
}else{
radioNo.checked = false;
}
https://jsfiddle.net/n820pz3e/1/
Related
I am trying to create a simple guessing game and my return value or my functionality seems correct. I have console.logged typeof for my input value as well as my randNum value and they are both numbers. However my alert is always incorrect. What am I doing wrong?
var currentGuess = false;
var randNum = Math.floor(Math.random() * 100)
var input = document.getElementById("guess").value;
var input = parseInt(input);
var btn = document.getElementById("submit");
var results = document.getElementById("results");
console.log(randNum);
function check() {
checkNum(input, randNum);
if( input === randNum) {
alert("correct");
} else {
alert("incorrect");
}
}
function checkNum(guess, actualNum) {
currentGuess = false;
if(guess === actualNum) {
return true;
}
return currentGuess;
}
btn.addEventListener("click", check, false);
You didn't take input again when check is called.
just add this in your check function
input = parseInt(document.getElementById("guess").value);
Like this
function check() {
input = parseInt(document.getElementById("guess").value);
checkNum(input, randNum);
if( input === randNum) {
alert("correct");
} else {
alert("incorrect");
}
}
Fiddle with working solution: https://jsfiddle.net/pp9Lrpe6/
You are listening for the click even on the input, but getting the input value when everything is loaded, which is empty - returning input = NaN. This value isn't updated when a user clicks:
var randNum, btn, results;
// Generate random number.
randNum = Math.floor( Math.random() * 100 );
// Submit button to listen for click events on.
btn = document.getElementById( 'submit' );
// Display result one at a time in #results.
results = document.getElementById( 'results' );
// Number to guess.
console.log( 'Random number: ' + randNum );
// Check the input on click of #submit
function check() {
var input = parseInt( document.getElementById( 'guess' ).value, 10 );
if ( input === randNum ) {
results.innerHTML = '<p class="correct">' + input + ' is correct!</p>';
} else {
results.innerHTML = '<p class="incorrect">' + input + ' is not correct!</p>';
}
}
// Add event listener for #submit
btn.addEventListener( 'click', check, false );
As a good practice, you should give you input the type="number".
You should also declare the radix for parseInt (MDN)
try this:
<html>
<head>
</head>
<body>
<input type="text" id="guess"><br>
<input type="button" id="submit" value="check"><br>
<div id="results"></div>
<script>
var currentGuess = false;
var randNum = Math.floor(Math.random() * 100)
var btn = document.getElementById("submit");
var results = document.getElementById("results");
console.log(randNum);
function check() {
var input = document.getElementById("guess").value;
var input = parseInt(input);
if( input === randNum) {
alert("correct");
} else {
alert("incorrect");
}
}
btn.addEventListener("click", check, false);
</script>
</body>
I am Performing Calculation of Student fee Details,There are Two Text boxes,one which is automatically fixed(disabled)as Rs.5000,If i enter value below Rs.5000 value on another Text box then it will calculate subtraction and show balance in result text box.If i enter value above Rs.5000 it should not take that value in second text box.I want to validate text box depending on first text box value.
Here is my body part
my script part
$(".maxmin").each(function () {
var thisJ = $(this);
var max = thisJ.attr("max") * 1;
var min = thisJ.attr("min") * 1;
var intOnly = String(thisJ.attr("intOnly")).toLowerCase() == "true";
var test = function (str) {
return str == "" || /* (!intOnly && str == ".") || */
($.isNumeric(str) && str * 1 <= max && str * 1 >= min &&
(!intOnly || str.indexOf(".") == -1) && str.match(/^0\d/) == null);
// commented out code would allow entries like ".7"
};
thisJ.keydown(function () {
var str = thisJ.val();
if (test(str)) thisJ.data("dwnval", str);
});
thisJ.keyup(function () {
var str = thisJ.val();
if (!test(str)) thisJ.val(thisJ.data("dwnval"));
})
});
You can do on textchanged something like this
$(textbox1).on('change', function () {
if(textbox1.val()==5000){
//do your code
}
else if(textbox1.val()<5000){
//do your code
}
});
Look into the onchange (https://api.jquery.com/change/) or keyup events (https://api.jquery.com/keyup/). Get the values and perform your calculations.
I'm trying to create a tip calculator but I'm having trouble creating a variable that will give me the total amount of the bill. Below is the code, any suggestions?
function tipCalculate (slider, bill){
var tip = document.getElementById('tipamount');
var slideval = document.getElementById('slideval');
var bill = document.getElementById(bill).value;
var prcnt = slider * .01;
var total = Number(bill) + tip;
if (bill == null || bill == '') {
tip.innerHTML = 'Please enter an amount';
return false;
}
if(isNaN(bill)) {
tip.innerHTML = 'Please enter a number';
return false;
}
if(bill >= 0){
tip.innerHTML = '$' + (bill * prcnt) .toFixed(2);
slideval.innerHTML = slider + '%';
}
}
Line 6 is your problem. tip is a dom element and you are trying to add it to a value accessed in the dom i.e bill's value;
This line is not correct:
var total = Number(bill) + tip;
I need to write a good that will validate if a number is in between a range of two numbers I can only get the number is valid output no matter what i input in my text box.
function validInputRange(min, max, textbox) {
if (textbox >= min && textbox <= max) {
return true;
} else {
return false;
}
}
function btnValidate_onclick() {
// assign textbox elements to variables for easier access
var numberTextbox = document.getElementById("txtNumber");
var input = parseFloat(numberTextbox.value);
var output = validInputRange(1, 49, numberTextbox.value);
if (output = true) {
var answer = "valid";
numberTextbox.style.backgroundColor = "#00ff00";
} else {
answer = "false";
numberTextbox.style.backgroundColor = "#ff0000";
}
numberTextbox.value = answer;
}
Instead of
if (output = true)
Just do
if (output)
or
if (output == true)
= is used for assignment, while == or === for comparing.
I am trying to provide a message below the fields of a form. The message will depend on what is entered in both fields.
How would I go about making it so it calculates in real time using both the fields and passing it through a calculation?
Here is the fiddle http://jsfiddle.net/6qSeH/
I am using this to get the document values
var input1 = document.getElementById("input-mini");
var input2 = document.getElementById("input-mini2");
and this at the end to run the function
yearCalculator();
There are many missing pieces in your code.
Firstly you have written code entirely using javascript and trying to use jQuery syntax. So how would you expect it to work.
jQuery to set HTML --- msg.html(value);
javascriptto set HTML --- msg.html = value;
Second When you are checking for Not a Number
It is supposed to look like
val1 === NaN // It is not a string
Also this will never work as NaN is never equal to NaN
Use isNaN() method instead
Third
<div class="message"></div>
supposed to be
<div id="message"></div>
Next you need to assign events to your input. Otherwise it would only work when the page loads for the first time..
input1.addEventListener('change', yearCalculator);
input2.addEventListener('change', yearCalculator);
Otherwise it will only work the first time your script loads.
Cleaned up code
var input1 = document.getElementById("input-mini");
var input2 = document.getElementById("input-mini2");
var msg = document.getElementById('message');
input1.addEventListener('change', yearCalculator);
input2.addEventListener('change', yearCalculator);
function yearCalculator() {
var yearOne = input1.value;
var yearTwo = input2.value;
val1 = parseInt(yearOne);
val2 = parseInt(yearTwo);
if (isNaN(val1) || isNaN(val2)) {
msg.innerHTML = "Please enter a valid year !!";
return;
}
var value1 = yearOne - yearTwo + 18;
if (yearOne == yearTwo) {
msg.innerHTML = "Both years are the same";
}
if (yearOne < yearTwo) {
if (yearTwo < value1) {
msg.innerHTML = "This is a good result";
} else if (yearTwo > value1) {
msg.innerHTML = "This is a bad result";
} else {
msg.innerHTML = "This is neither good or bad";
}
}
else {
msg.innerHTML ="Year 1 is greater than Year 2";
}
};
yearCalculator();
Check Fiddle
You can use onchange="yearCalculator()" in both input fileds
First change the class='message' to id='message'. Then try this code:
var input1 = document.getElementById("input-mini");
var input2 = document.getElementById("input-mini2");
var yearOne = input1.value;
var yearTwo = input2.value;
var msg = document.getElementById('message');
function yearCalculator(value1, value2) {
msg.innerHTML='';
val1 = parseInt(value1);
val2 = parseInt(value2);
if (val1 === "NAN" || val2 === "NAN") return;
var value1 = val1 - val2 + 18;
if (val1 == val2) {
msg.innerHTML="Both years are the same";
}
if (val1 < val2) {
if (val2 < value1) {
msg.innerHTML = "This is a good result";
} else if (val2 > value1) {
msg.innerHTML = "This is a bad result";
} else {
msg.innerHTML = "This is neither good or bad";
}
}
};
yearCalculator(yearOne,yearTwo);
input1.onkeyup=function() {
yearCalculator(this.value,document.getElementById("input-mini2").value);
};
input2.onkeyup=function() {
yearCalculator(document.getElementById("input-mini").value,this.value);
};