We Keep Coding

Why does my function not fetch the value of variable?

The purpose of the code is to compute for the car market value. If If Age of the Car is :
1 - then subtract 20% from the Price of the Car
2 - then subtract 35% from the Price of the Car
3 - 7 - then subtract 35% from the Price of the Car and then subtract 10%
more for each year starting from the 3rd year.
8 - 10 - then the market value is fixed at 100,000.00
More than 10 years then the market value is fixed at 75,000.00.
Then it will display the name inputted and the value of the car but it doesnt seem to work. pls help
var price = document.getElementById("price").value;
var age = document.getElementById("age").value;
var condition = document.getElementById("condition").value;
var name = document.getElementById("name").value;
age = parseInt(age);
condition = parseInt(condition);
function calculateValue() {
switch (age) {
case 0:
price = price - 0.20 * price;
break;
case 1:
price = price - 0.35 * price;
break;
case 2:
price = price - 0.35 * price - (age - 3) * .10 * price;
break;
case 3:
price = 100000;
break;
case 4:
price = 75000;
break;
}
switch (condition) {
case 0:
price = price;
break;
case 1:
price = price - price * .10;
break;
}
document.getElementById("message").innerHTML = "Your" + name + " is valued at " + price + "today";
}
<h1>Car Market Value Calculator</h1>
<form>
Car Brand:<input id="name" type="text" name="name" placeholder="Please input car brand" autofocus required><br> Age of Car
<select id="age">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3-7</option>
<option value="3">8-10</option>
<option value="4">more than 10</option>
</select><br> Price of Car<input id="price" type="number" name="price" placeholder="minimum:300,000" min="300000"><br>
<p>Good Condition?</p>
Yes <input id="condition" type="radio" name="condition" value="0"> No <input id="condition" type="radio" name="condition" value="1">
<button type="button" name="submit" onclick="calculateValue()">Submit</button>
</form>
<p id="message"></p>

You have a few errors in your code:
You're not getting the input from the dom at the right moment. You should get the input values before calculation, not when the script loads. This ensures that the DOM is loaded, and get the right values.
The age value is not calculated properly. Don't use select for numeric values. Also, read again your case price = 2 ;)
This code does what you expect:
const calculateValue = () => {
let age = +document.querySelector('input[name=age]').value,
price = +document.querySelector('input[name=price]').value,
condition = document.querySelector('input[name=condition]').checked;
// depreciate based on age
if (age==1) price*=.8
else if (age==2) price*=.65
else if (age>2 && age<8) price*=(.65-(age-3)*.1)
else if (age>7 && age<11) price = 100000
else price = 75000;
// depreciate based on condition
if (!condition) price*=.9;
console.log(price);
}
<div>
<input name="age" type="number" placeholder="age">
</div>
<div>
<input name="price" type="number" placeholder="price">
</div>
<div>
Good condition?
<input name="condition" type="radio" value="true" checked>yes
<input name="condition" type="radio" value="false">no
</div>
<button onclick="calculateValue()">Compute</button>

If you open your browser's development console you'll see an error indicating that you're trying to get the .value of something that is null or undefined. Because document.getElementById("price") doesn't find anything when you're executing it.
You're trying to get the values of your inputs before the user has typed anything. Before the inputs have even been rendered on the page even.
You don't want to get the values until the user has pressed the button. So move that code into the function:
function calculateValue() {
var price = document.getElementById("price").value;
var age = document.getElementById("age").value;
var condition = document.getElementById("condition").value;
var name = document.getElementById("name").value;
age = parseInt(age);
condition = parseInt(condition);
//... the rest of your function
}

You need to move the first 6 lines where you are trying to get the values from input inside your calculateValue() function
function calculateValue() {
var price = document.getElementById("price").value;
var age = document.getElementById("age").value;
var condition = document.getElementById("condition").value;
var name = document.getElementById("name").value;
age = parseInt(age);
condition = parseInt(condition);
switch (age) {
...
Simply do this and your code will work fine.
Explanation: You need to get the new values from the input boxes each time the submit button is pressed. What you have done is that you have taken the values from the input boxes only once. As you move these lines inside the function, the fresh values are taken each time the button is pressed.

The document.getElementById commands will execute before the HTML markup is loaded, and hence will trigger an error. You can fix it by moving the variable declarations and value-fetching into the function:
function calculateValue() {
var price = document.getElementById("price").value;
var age = document.getElementById("age").value;
var condition = document.getElementById("condition").value;
var name = document.getElementById("name").value;
age = parseInt(age);
condition = parseInt(condition);
switch (age) {
case 0:
...etc...
You will want to do this anyway, since your code needs to fetch the current input values every time you click "submit".

Get values of your variables inside the calculate value function
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Car Market Value Calculator">
<meta name="keywords" content="calculator, car, market, value">
<meta name="author" content=", 26/02/19">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<h1>Car Market Value Calculator</h1>
<form>
Car Brand:<input id="name" type="text" name="name" placeholder="Please input car brand" autofocus required><br>
Age of Car<select id="age">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3-7</option>
<option value="3">8-10</option>
<option value="4">more than 10</option>
</select><br>
Price of Car<input id="price" type="number" name="price" placeholder="minimum:300,000" min="300000" ><br>
<p>Good Condition?</p>
Yes <input id="condition" type="radio" name="condition" value="0">
No <input id="condition" type="radio" name="condition" value="1">
<button type="button" name="submit" onclick = "calculateValue()">Submit</button>
</form>
<p id="message"></p>
</body>
<script>
function calculateValue(){
var price = document.getElementById("price").value;
var age = document.getElementById("age").value;
var condition = document.getElementById("condition").value;
var name = document.getElementById("name").value;
age = parseInt(age);
condition = parseInt(condition);
alert(price);
switch (age) {
case 0:
price = price - 0.20*price;
break;
case 1:
price = price - 0.35*price;
break;
case 2:
price = price - 0.35*price - (age-3)*.10*price;
break;
case 3:
price = 100000;
break;
case 4:
price = 75000;
break;
}
switch(condition){
case 0:
price = price;
break;
case 1:
price = price- price*.10;
break;
}
document.getElementById("message").innerHTML = "Your"+ name +" is valued at "+price+"today";
}
</script>
</html>

Every time you click the submit you need to get the input values again, and not only when loading the page. Just move the 'var' declarations into the function:
function calculateValue() {
var age = document.getElementById("age").value;
var condition = document.getElementById("condition").value;
var price = document.getElementById("price").value;
var name = document.getElementById("name").value;
age = parseInt(age);
condition = parseInt(condition);
switch (age) {
case 0:
price = price - 0.20 * price;
break;
case 1:
price = price - 0.35 * price;
break;
case 2:
price = price - 0.35 * price - (age - 3) * .10 * price;
break;
case 3:
price = 100000;
break;
case 4:
price = 75000;
break;
}
switch (condition) {
case 0:
price = price;
break;
case 1:
price = price - price * .10;
break;
}
document.getElementById("message").innerHTML = "Your" + name + " is valued at " + price + "today";
}

Solution at Codepen
function calculateValue() {
var price = document.getElementById("price").value;
var age = document.getElementById("age").value;
var condition = document.getElementById("condition").value;
var name = document.getElementById("name").value;
age = parseInt(age);
condition = parseInt(condition);
switch (age) {
case 0:
price = price - 0.20 * price;
break;
case 1:
price = price - 0.35 * price;
break;
case 2:
price = price - 0.35 * price - (age - 3) * .10 * price;
break;
case 3:
price = 100000;
break;
case 4:
price = 75000;
break;
}
switch (condition) {
case 0:
price = price;
break;
case 1:
price = price - price * .10;
break;
}
document.getElementById("message").innerHTML="Your"+name+" is valued at "+price+ "
today";
}`
The comments given by others are correct. You need to get the updated values on click of the submit button and hence all the variable will come inside the calculateValue function.
Wrap all the code in the document.ready method.

Switch Statement - Multiple results for single case

I have this page:
var count = 0;
function switchStatement() {
var text;
var answers = document.getElementById("userInput").value;
switch (answers) {
case "":
text = (count > 0) ? "You didn't type anything." : "Please type something down...";
if (count < 1)
count++;
else
count = 0;
break;
default:
text = "Good job!";
}
document.getElementById("feedback").innerHTML = text;
document.getElementById("userInput").value = "";
}
<p>Please write something down and press "enter".</p>
<input id="userInput" type="text" onKeyDown="if(event.keyCode==13) switchStatement();">
<p id="feedback"></p>
When the user doesn't type anything before pressing "enter", (that's case = "";), a message will show up. If he does the same thing again, a different message will show up. If he does it a third time, it will loop back to the first message.
How can I add more messages to avoid having such a small loop? Say, if I wanted to have 5 different messages for when the user doesn't type anything, what should I change in my code?

You could use an array of messages :
var messages = ["message 1...", "message 2...", "message 3...", "message 4...", "message 5..."]
Then use the count variable as the index of this array to show the messages one after other.
NOTE: You must init the count to the default value 0 in case the user typed something so the next empty submit will show the first message in index 0.
var count = 0;
var messages = ["message 1...", "message 2...", "message 3...", "message 4...", "message 5..."];
function switchStatement() {
var text;
var answers = document.getElementById("userInput").value;
switch (answers) {
case "":
text = messages[count];
count = count < messages.length - 1 ? count + 1 : 0;
break;
default:
text = "Good job!";
count = 0;
}
document.getElementById("feedback").innerHTML = text;
document.getElementById("userInput").value = "";
}
<p>Please write something down and press "enter".</p>
<input id="userInput" type="text" onKeyDown="if(event.keyCode==13) switchStatement();">
<p id="feedback"></p>

Restrict input field

How to I restrict a number entering into input field (numeric) greater than another number using JavaScript?
I used:
function numberalert(e) {
var matrictotal = document.getElementById("matrictotal").value;
var matricobtained = document.getElementById("matricobtained").value;
var intertotal = document.getElementById("intertotal").value;
var interobtained = document.getElementById("interobtained").value;
var bachelortotal = document.getElementById("bachelortotal").value;
var bachelorobtained = document.getElementById("bachelorobtained").value;
var mphilltotal = document.getElementById("mphilltotal").value;
var mphillobtained = document.getElementById("mphillobtained").value;
if (matricobtained > matrictotal || interobtained > intertotal || bachelorobtained > bachelortotal || mphillobtained > mphilltotal) {
alert("pleses provide obtained marks less then total marks");
e.returnValue = false;
e.preventDefault();
} else {
return true;
}
}
But after alert it allows number place in input field.

First, just get the object that represents each object then pass in the two methods into a helped method to do the actual comparison. If the values are not what you are looking for, then set the objects value to "" and highlight the textbox to show which one is wrong.
function numberalert(e) {
var matrictotal = document.getElementById("matrictotal");
var matricobtained = document.getElementById("matricobtained");
var intertotal = document.getElementById("intertotal");
var interobtained = document.getElementById("interobtained");
var bachelortotal = document.getElementById("bachelortotal");
var bachelorobtained = document.getElementById("bachelorobtained");
var mphilltotal = document.getElementById("mphilltotal");
var mphillobtained = document.getElementById("mphillobtained");
checkValue(matrictotal, matricobtained);
checkValue(intertotal, interobtained);
checkValue(bachelortotal, bachelorobtained);
checkValue(mphilltotal, mphillobtained);
}
function checkValue(total, obtained){
if (obtained.value > total.value) {
alert("Please provide obtained marks less then total marks: " + obtained.id);
obtained.value = "";
obtained.classList.add("error");
} else {
obtained.classList.remove("error");
return true;
}
}
.error {
border: 2px solid #FF0000;
}
<label for="matrictotal">matrictotal</label>
<input type="text" id="matrictotal" value="10">
<label for="matricobtained">matricobtained</label>
<input type="text" id="matricobtained" value="10">
<br />
<label for="intertotal">intertotal</label>
<input type="text" id="intertotal" value="10">
<label for="interobtained">interobtained</label>
<input type="text" id="interobtained" value="10">
<br />
<label for="bachelortotal">bachelortotal</label>
<input type="text" id="bachelortotal" value="10">
<label for="bachelorobtained">bachelorobtained</label>
<input type="text" id="bachelorobtained" value="10">
<br />
<label for="mphilltotal">mphilltotal</label>
<input type="text" id="mphilltotal" value="10">
<label for="mphillobtained">mphillobtained</label>
<input type="text" id="mphillobtained" value="10">
<button onclick=numberalert(this)>Check values</button>

Note : In Javascript there is no strictly greater than or strictly less than comparator .
In case if you need strictly greater than use
(a !==b && a > b) (or) (!(a < b))
Similarly for strictly less than use
(a !== b && a < b) (or) (!(a>b))
var toCheckNumber = 100;
validate = function(el, event) {
var errorText = document.getElementById('errorText');
errorText.innerHTML = "";
var x = event.which;
var value = el.value;
var number = 0;
switch (x) {
case 48: number =0;break;
case 49: number = 1; break;
case 50: number = 2; break;
case 51: number = 3; break;
case 52: number = 4; break;
case 53: number = 5; break;
case 54: number = 6; break;
case 55: number = 7; break;
case 56: number = 8; break;
case 57: number = 9; break;
case 8: number = -1; break;
case 46: number = -1; break;
default : event.preventDefault(); return ;
}
var tempval = (number !== -1) ? value * 10 + number : value;
if (!(tempval < toCheckNumber)) {
event.preventDefault();
errorText.innerHTML = "Enter number less than " + toCheckNumber;
}
}
<input type="number" onkeydown="validate(this,event)" onchange="document.getElementById('errorText').innerHTML=''">
<div id="errorText" style="color:red"></div>

change() jQuery not working

I'm having some trouble getting my change() event working in jQuery. I am making a small program that converts temperatures to Kelvin, and I want the span that holds my value after conversion to update 1) every time the temperature to convert changes and 2) every time a different temperature scale is selected from the radio buttons.
Relevant Code:
$(document).ready(function() {
$('input[type=radio]').checkboxradio();
var temp = parseFloat()
$('input.listener').change(function() {
var name = $(this).attr("name");
var val = $(this).val();
switch (name) {
case 'unit':
var temperature = $('input#temp').val();
switch (val) {
case 'f':
$('span#output').html(((temperature - 32) / 1.8) + 273.15);
break;
case 'c':
$('span#output').html(temperature + 273.15);
break;
case 'r':
$('span#output').html(temperature / 1.8);
break;
}
case 'temp':
var u = $('input[name=unit]:checked').val();
switch (u) {
case 'f':
$('span#output').html(((val - 32) / 1.8) + 273.15);
break;
case 'c':
$('span#output').html(val + 273.15);
break;
case 'r':
$('span#output').html(val / 1.8);
break;
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
<fieldset>
<legend>Select a Unit to Convert to Kelvin: </legend>
<label for="fRadio">Fahrenheit</label>
<input id="fRadio" class="listener" type="radio" name="unit" value="f">
<label for="cRadio">Celsius</label>
<input id="cRadio" class="listener" type="radio" name="unit" value="c">
<label for="rRadio">Rankine</label>
<input id="rRadio" class="listener" type="radio" name="unit" value="r">
</fieldset>
</div>
<h2>Temperature Converter</h2>
<p>Type a value in the Fahrenheit field to convert the value to Kelvin:</p>
<p>
<label>Temperature</label>
<input id="temp" class="listener" type="number" value="32">
</p>
<p>Kelvin: <span id="output"></span></p>
My guess is I'm making a pretty dumb small mistake, but I can't seem to figure it out. Thanks for any and all help, suggestions, and solutions.

Two mistakes with your code:
Forgetting breaks; for the parent switch statement.
Forgetting name="temp" on the temperature field.
I changed the final temperature to a variable and made that the text of the output just so that there would be so many $('span#output').html(temperature);
Also, you should use the oninput event to detect a change for the number field.
$(document).ready(function() {
//$('input[type=radio]').checkboxradio();
var temp = parseFloat();
$('input.listener').on('change', updateTemp);
$('input.listener').on('input', updateTemp);
function updateTemp() {
var name = $(this).attr("name");
var val = $(this).val();
var final;
switch (name) {
case 'unit':
var temperature = $('input#temp').val();
switch (val) {
case 'f':
final = ((temperature - 32) / 1.8) + 273.15;
break;
case 'c':
final = temperature + 273.15;
break;
case 'r':
final = temperature / 1.8;
break;
}
break;
case 'temp':
var u = $('input[name=unit]:checked').val();
switch (u) {
case 'f':
final = ((val - 32) / 1.8) + 273.15;
break;
case 'c':
final = val + 273.15;
break;
case 'r':
final = val / 1.8;
break;
}
break;
}
$("#output").text(final);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
<fieldset>
<legend>Select a Unit to Convert to Kelvin: </legend>
<label for="fRadio">Fahrenheit</label>
<input id="fRadio" class="listener" type="radio" name="unit" value="f">
<label for="cRadio">Celsius</label>
<input id="cRadio" class="listener" type="radio" name="unit" value="c">
<label for="rRadio">Rankine</label>
<input id="rRadio" class="listener" type="radio" name="unit" value="r">
</fieldset>
</div>
<h2>Temperature Converter</h2>
<p>Type a value in the Fahrenheit field to convert the value to Kelvin:</p>
<p>
<label>Temperature</label>
<input id="temp" class="listener" type="number" name="temp" value="32">
</p>
<p>Kelvin: <span id="output"></span></p>

You should set one of the radio buttons as default with checked="checked". Then try following:
$(document).ready(function () {
$('input.listener').change(function () {
if ($(this).attr("type") == 'radio') {
//radio button changed
var u = $(this).val();
} else {
var u = $("input[type='radio']:checked").val();
}
var temperature = $('#temp').val();
switch (u) {
case 'f':
$('span#output').html(((temperature - 32) / 1.8) + 273.15);
break;
case 'c':
$('span#output').html(temperature + 273.15);
break;
case 'r':
$('span#output').html(temperature / 1.8);
break;
}
});
});

You do not have break; after
case 'unit':
and when var name = "temp"
var val = $(this).val();
the value of var val above would be a number in string format, so when you do val + something in case 'temp' the number is getting appended instead getting added or substracted. Use parseInt(val) to convert the value of input box to integer in case of 'temp'.

First function calls on html button onclick, but not any others

I've just begun learning javascript, and I'm running into an issue where only one of my 3 currently coded buttons will either recognize a click, or run the function associated when I click it. This first example of code works wonderfully;
The HTML
<div id="commonchecks">
<h3>Common Checks:</h3>
<p>Type of Check:</p>
<select id="CheckType">
<option value="Strength">Strength</option>
<option value="Stamina">Stamina</option>
<option value="Agility">Agility</option>
<option value="Intelligence">Intelligence</option>
<option value="Charisma">Charisma</option>
<option value="Perception">Perception</option>
</select>
<p>Complexity:</p>
<select id="Complexity">
<option value="Simple">Simple</option>
<option value="Complex">Complex</option>
</select>
<p>Circumstantial Factors (+/-):</p>
<input type="number" id="bxCircumstantialFactors" value="-2">
<h3 class="details">Check Details:</h3>
<p id="success" class="details">It was a XXXXXXX!</p>
<p id="rolltotal" class="details">You rolled a(n) XX.</p>
<p id="rollstandards" class="details">You needed a(n) XX or higher.</p>
<p id="experience" class="details">Experience Payout: 00 exp!</p>
<p id="duplicate">DUPLICATE!</p>
<button onclick="CheckRoll()" class="button" id="RollCheckButton">Roll</button>
</div>
And the javascript
function CheckRoll() {
//Loading Variables Up From User Input
numStrength = Number(document.getElementById("bxStrength").value);
numStamina = Number(document.getElementById("bxStamina").value);
numAgility = Number(document.getElementById("bxAgility").value);
numIntelligence = Number(document.getElementById("bxIntelligence").value);
numCharisma = Number(document.getElementById("bxCharisma").value);
numPerception = Number(document.getElementById("bxPerception").value);
numCircumstantialFactors = Number(document.getElementById("bxCircumstantialFactors").value);
//Making the Roll
numRoll = Math.floor(Math.random() * 20 + 1);
if (document.getElementById("duplicate").style.visibility === "visible"){
document.getElementById("duplicate").style.visibility = "hidden";
}
//Checking to see if the roll was a duplicate
if (numRoll === prevRoll) {
document.getElementById("duplicate").style.visibility = "visible";
}
//Checking the complexity of the check
switch (document.getElementById("Complexity").value){
case "Simple":
numBaseAddition = 10;
numStatModifier = 2;
break;
case "Complex":
numBaseAddition = 0;
numStatModifier = 1;
break;
}
//Checking the stat associated and marking it as the calculated stat
switch (document.getElementById("CheckType").value) {
case "Strength":
numRelevantStatValue = numStrength;
break;
case "Stamina":
numRelevantStatValue = numStamina;
break;
case "Agility":
numRelevantStatValue = numAgility;
break;
case "Intelligence":
numRelevantStatValue = numIntelligence;
break;
case "Charisma":
numRelevantStatValue = numCharisma;
break;
case "Perception":
numRelevantStatValue = numPerception;
break;
}
//Determining how much value of a stat effects your chances of success
numStatAddition = numRelevantStatValue / numStatModifier;
//Determining your factor of success
numSuccessFactor = numBaseAddition + numStatAddition + numCircumstantialFactors;
//If success factor is a 20 or higher, set it to 19 since one can always roll a 1
if (numSuccessFactor >= 20){
numSuccessFactor = 19;
}
//Calculating the number you need to beat
numFailureFactor = 20 - numSuccessFactor;
//If failure factor is a 20 or higher, set it to 19 since one can always roll a 20
if (numFailureFactor >= 20) {
numFailureFactor = 19;
}
//Calculating amount of experience possible to be earned
numExperience = numFailureFactor * 5;
//Reporting on the successfulness or not
if (numRoll >= numFailureFactor + 1){
document.getElementById("success").innerHTML = "It was a SUCCESS!";
}
if (numRoll === 20){
document.getElementById("success").innerHTML = "It was a CRITICAL SUCCESS!";
}
if (numRoll < numFailureFactor + 1){
document.getElementById("success").innerHTML = "It was a FAILURE!";
numExperience = 0;
}
if (numRoll === 1){
document.getElementById("success").innerHTML = "It was a CRITICAL FAILURE!";
numExperience = 0;
}
//Reporting the dice roll
document.getElementById("rolltotal").innerHTML = "You rolled a(n) " + numRoll + ".";
//Reporting the standards
document.getElementById("rollstandards").innerHTML = "You needed a(n) " + (numFailureFactor + 1) + " or higher.";
//Reporting experience gain
document.getElementById("experience").innerHTML = "Experience Payout: " + numExperience + " exp!";
//Saving last roll
prevRoll = numRoll;
However, on a much simpler function, it won't work for whatever reason. I've tried putting the javascript into firefox's debugger, and it didn't reveal any syntax mistakes. Here's the section that won't work.
The HTML
<p class="blocksection">Block Type:</p>
<select id="blocktype">
<option value="Unarmed">Unarmed</option>
<option value="Armed">Armed</option>
</select>
<p class="blocksection" id="blockreporter">Your Block total is a(n) XX!</p>
<p class="blocksection" id="blockduplicate">DUPLICATE!</p>
<button onclick="BlockRoll()" class="button" id="blockbutton">Block!</button>
And the javascript
function BlockRoll() {
numStamina = Number(document.getElementById("bxStamina").value);
if (document.getElementById("blocktype").value === "Unarmed") {
document.getElementById("blockreporter").InnerHTML = "Your Block total is a(n) " + Math.floor(Math.random() * 6 + 1) + "!";
}
else {
document.getElementById("blockreporter").InnerHTML = "Your Block total is a(n) " + (Math.floor(Math.random() * 6 + 1) + (numStamina/2)) + "!";
}
}
I'm not used to this language, but I know c# well enough and they appear relatively similar. Is there a really simple mistake that I'm making somewhere?
Thanks

You're calling element.InnerHTML in your second example which is incorrect, as the correct value is innerHTML (note the lowercase i.)
If you hit F12 (in most browsers) the developer console will come up and show you common errors like these.