This question already has answers here:
Javascript function passing
(5 answers)
Closed 1 year ago.
I am attempting to create a calculator like thing. I have a custom function that is suppose to load input value from two variables and them put them together but it did not work, so I checked with console log if it loads the input value, and all it says is that the values are undefined. Any idea how to fix this please?
let num1 = document.getElementById("number1").value,
num2 = document.getElementById("number2").value,
operator = document.getElementById("select"),
resolutor = document.getElementById("resolute"),
res = document.getElementById("result");
function mathoperation(num1, num2) {
let value = operator.value,
result;
switch (value) {
case "plus":
console.log(num1); //console says unindefied
console.log(num2); //console says unindefied
break;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Úloha 18.1</title>
</head>
<body>
<input type="text" id="number1">
<select name="" id="select">
<option value="plus">+</option>
<option value="minus">-</option>
<option value="krat">*</option>
<option value="deleno">/</option>
</select>
<input type="text" id="number2">
<input type="button" id="resolute" value="=" onclick="mathoperation()">
<input type="text" id="result" readonly>
</body>
</html>
You have to get value of input element inside of your click event handler because you need those values at the moment you click it
function mathoperation() {
let num1 = document.getElementById("number1").value,
num2 = document.getElementById("number2").value,
operator = document.getElementById("select"),
resolutor = document.getElementById("resolute"),
res = document.getElementById("result");
let operatorValue = operator.value;
switch (operatorValue) {
case "plus":
let result = Number(num1) + Number(num2);
res.value = result;
console.log(num1); //console says unindefied
console.log(num2); //console says unindefied
break;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Úloha 18.1</title>
</head>
<body>
<input type="text" id="number1">
<select name="" id="select">
<option value="plus">+</option>
<option value="minus">-</option>
<option value="krat">*</option>
<option value="deleno">/</option>
</select>
<input type="text" id="number2">
<input type="button" id="resolute" value="=" onclick="mathoperation()">
<input type="text" id="result" readonly>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Úloha 18.1</title>
</head>
<body>
<input type="text" id="number1">
<select name="" id="select">
<option value="plus">+</option>
<option value="minus">-</option>
<option value="krat">*</option>
<option value="deleno">/</option>
</select>
<input type="text" id="number2">
<input type="button" id="resolute" value="=" onclick="mathoperation()">
<input type="text" id="result" readonly>
<script>
function mathoperation(num1, num2) {
var num1 = document.getElementById("number1").value;
var num2 = document.getElementById("number2").value;
var operator = document.getElementById("select");
var resolutor = document.getElementById("resolute");
var res = document.getElementById("result");
let
value = operator.value,
result;
switch (value) {
case "plus":
res.value = parseInt(num1)+parseInt(num2);
break;
}
}
</script>
</body>
</html>
Moving your assignment inside the function can solve this.
This should get you started-
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Úloha 18.1</title>
</head>
<body>
<input type="text" id="number1">
<select name="" id="select">
<option value="plus">+</option>
<option value="minus">-</option>
<option value="krat">*</option>
<option value="deleno">/</option>
</select>
<input type="text" id="number2">
<input type="button" id="resolute" value="=" onclick="mathoperation()">
<input type="text" id="result" readonly>
<script>
function mathoperation(num1, num2) {
var num1 = document.getElementById("number1").value;
var num2 = document.getElementById("number2").value;
var operator = document.getElementById("select");
var resolutor = document.getElementById("resolute");
var res = document.getElementById("result");
let
value = operator.value,
result;
switch (value) {
case "plus":
res.value = parseInt(num1)+parseInt(num2);
break;
}
}
</script>
</body>
</html>
Related
I want when somebody input a number lower than 4.2, my app shows message as result, but i can't make it happen.
I already tried with return.
JS code
let resultEl = document.getElementById("results")
let numberEl = document.getElementById("number__select")
let message = "mAs: 0.5 y kV: 1.0"
function calculate() {
if (numberEl <= 4.2) {
resultEl.textContent = message;
} else {
resultEl.textContent = "error"
}
}
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styleRx.css"/>
<script src="Rxappjs.js"></script>
<title>HVDN Rx app</title>
</head>
<body>
<div class="container">
<header>
<h1>Valoraciones de Rx</h1>
</header>
<div class="box">
<form action="">
<div class="values">
<label for="peso" id="peso__label">Peso</label>
<input class="text__input" type="number" step="0.1" id="number__select" placeholder="Peso"
min="0" required>
</div>
<button id="calcular" onclick="calculate()">Calcular</button>
</form>
<p id="results"></p>
</div>
</div>
</body>
</html>
You have the variable numberEl set to an html element and therefor it will never be less than or equal too 4.2. Try to get the value of that element instead:
let resultEl = document.getElementById("results")
let numberEl = document.getElementById("number__select")
let message = "mAs: 0.5 y kV: 1.0"
function calculate() {
if (numberEl.value <= 4.2) {
resultEl.textContent = message;
} else {
resultEl.textContent = "error"
}
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
Please help. I am working on a simple Javascript Calculator. It will only return undefined. Ive looked over the code multiple times. I dont believe it is a typo error, but i cant seem to figue it out any help would be greatly appreciated.
function calc(a,b,op) {
var a = parseInt(document.querySelector("#value1").value);
var b = parseInt(document.querySelector("#value2").value);
var op = document.querySelector("#operator").value;
var calculate;
if (op == "add"){
calculate == a + b;
}else if (op =="min"){
calculate == a - b;
}else if (op =="mult"){
calculate == a * b;
}else if (op =="div"){
calculate == a / b;
}
document.querySelector("#results").innerHTML = calculate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
Value 1: <input type="text" id="value1">
Operator: <select name="" id="operator">
<option value="add">Add</option>
<option value="min">Subtract</option>
<option value="mult">Multiply</option>
<option value="div">Divide</option>
</select>
Value 2: <input type="text" id="value2">
<button type="button" onclick="calc()">Calculate</button>
</form>
<div id="results"></div>
</body>
<script src="hello.js"></script>
</html>
calculate == a + b;
You only need a single =;
It should be
if (op == "add"){
calculate = a + b;
}else if (op =="min"){
calculate = a - b;
}else if (op =="mult"){
calculate = a * b;
}else if (op =="div"){
calculate = a / b;
}
It's a simple typo
= is assignment
== is equality check
change calculate == to calculate =
== is for comparison. You need assignment in your if branches, which is =.
Also, nothing is allowed between </body> and </html>. Your script element should be just prior to the closing body tag.
Finally, don't use .innerHTML if you can avoid it (which you almost always can) as it has security and performance implications. Since you aren't working with an HTML string anyway, use .textContent.
function calc(a,b,op) {
var a = parseInt(document.querySelector("#value1").value);
var b = parseInt(document.querySelector("#value2").value);
var op = document.querySelector("#operator").value;
var calculate;
if (op == "add"){ // <-- Compare here with ==
calculate = a + b; // Assign here with =
}else if (op =="min"){
calculate = a - b;
}else if (op =="mult"){
calculate = a * b;
}else if (op =="div"){
calculate = a / b;
}
document.querySelector("#results").textContent = calculate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
Value 1: <input type="text" id="value1">
Operator: <select name="" id="operator">
<option value="add">Add</option>
<option value="min">Subtract</option>
<option value="mult">Multiply</option>
<option value="div">Divide</option>
</select>
Value 2: <input type="text" id="value2">
<button type="button" onclick="calc()">Calculate</button>
</form>
<div id="results"></div>
<!-- Script should be here -->
<script src="hello.js"></script>
</body>
</html>
You were assigning two times, calculate == a + b; instead of calculate = a + b;
function calc(a,b,op) {
var a = parseInt(document.querySelector("#value1").value);
var b = parseInt(document.querySelector("#value2").value);
var op = document.querySelector("#operator").value;
var calculate;
if (op === "add") {
calculate = a + b;
} else if (op === "min") {
calculate = a - b;
} else if (op === "mult") {
calculate = a * b;
} else if (op === "div") {
calculate = a / b;
}
document.querySelector("#results").innerHTML = calculate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
Value 1: <input type="text" id="value1">
Operator: <select name="" id="operator">
<option value="add">Add</option>
<option value="min">Subtract</option>
<option value="mult">Multiply</option>
<option value="div">Divide</option>
</select>
Value 2: <input type="text" id="value2">
<button type="button" onclick="calc()">Calculate</button>
</form>
<div id="results"></div>
</body>
<script src="hello.js"></script>
</html>
function calc() {
var a = parseInt(document.querySelector("#value1").value);
var b = parseInt(document.querySelector("#value2").value);
var op = document.querySelector("#operator").value;
var calculate=0;
console.log(a+" "+b+" "+op)
if (op == "add"){
calculate = a + b;
console.log(calculate)
}else if (op =="min"){
calculate = a - b;
}else if (op =="mult"){
calculate = a * b;
}else if (op =="div"){
calculate = a / b;
}
document.querySelector("#results").innerHTML = calculate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
Value 1: <input type="text" id="value1">
Operator: <select name="" id="operator">
<option value="add">Add</option>
<option value="min">Subtract</option>
<option value="mult">Multiply</option>
<option value="div">Divide</option>
</select>
Value 2: <input type="text" id="value2">
<button type="button" onclick="calc()">Calculate</button>
</form>
<div id="results"></div>
</body>
<script src="hello.js"></script>
</html>
Im working on a basic Calculator and keep having two errors involving innerHTML. I use the developer tools to debug.
The Developer tool says: Uncaught TypeError: Cannot set property 'innerHTML' of null # document.querySelector("#result").innerHTML = calculate;
also "button type="button" onclick="calc()">Calculate</button" is Highlighted green.
I am a codenewbie, have no idea were my mistake is
function calc() {
var a = parseInt(document.querySelector("#value1").value);
var b = parseInt(document.querySelector("#value2").value);
var op = document.querySelector("#operator").value;
var calculate;
if (op == "add") {
calculate == a + b;
} else if (op == "min") {
calculate == a - b;
} else if (op == "mult") {
calculate == a * b;
} else if (op == "div") {
calculate == a / b;
}
document.querySelector("#result").innerHTML = calculate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello world</h1>
<form>
Value 1: <input type="text" id="value1"> Operator:
<select name="" id="operator">
<option value="add">Add</option>
<option value="min">Subtract</option>
<option value="mult">Multiply</option>
<option value="div">Divide</option>
</select>
Value 2: <input type="text" id="value2">
<button type="button" onclick="calc()">Calculate</button>
</form>
<div id="results"></div>
</body>
<script src="hello.js"></script>
</html>
The error is coming because in HTML u have given id results and in java script you are writing document.queryseletor('#result')
S is missing in java script
I wrote everything correctly, but it's not working. I can't understand; I don't see a problem, but it still doesn't work. My English isn't very good, so I have trouble explaining in detail.
I just don't know why this doesn't work.
function calc() {
var a = parseInt(document.querySelector("#value1").value);
var a = parseInt(document.querySelector("#value2").value);
var op = (document.querySelector("#operator").value);
var calculate;
if (op == "add") {
calculate = a + b;
} else if (op =="min") {
calculate = a - b;
} else if (op =="div") {
calculate = a / b;
} else if (op =="mul") {
calculate = a * b;
}
console.log(calculate);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form>
Value 1: <input type="text" id="value1">
<br>
Value 2: <input type="text" id="value2">
Operator:
<select id="operator">
<option value="add">Add</option>
<option value="min">Minus</option>
<option value="div">Divide</option>
<option value="mul">Multiply</option>
</select>
<button type="button" onclick="calc()">Calculate</button>
</form>
</body>
<script src="js/main.js"></script>
</html>
You're missing to declare the var 'b' in line number 3. The correct code should be :
var a = parseInt(document.querySelector("#value1").value);
var b = parseInt(document.querySelector("#value2").value);
In this code i try to get the difference between two date and time
ex(09/05/2014 09:10:00 - 09/05/2014 11:18:00 ) it should return 78 minutes with a single function for multiple textboxes but unfortunately this piece of code is not working can some one suggest me the correct code or is there is any alternative way to perform this function , thanks in advance.
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="JS/datejquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("id^='endTime'".change(function(){
var index = $(this).attr('id').replace('endTime','');
alert(index);
var startTime = $('#startTime'+index).val();
var endTime = $(this).val();
$('#result'+index).val(endTime-startTime);
});
} );
</script>
</head>
<body>
<form name="wrs">
<input type="text" name="time1" id= "startTime1" class="num-box type1" />
<input type="text" name="time2" id = "endTime1" class="num-box type2" />
<input type="text" name="result1" class="num-box type5" />
<input type="text" name="startTime2" id= "time3" class="num-box type3" />
<input type="text" name="endTime2" id = "time4" class="num-box type4" />
<input type="text" name="result2" class="num-box type6" />
</form>
</body>
</html>
You missed the brackets.
$("[id^='endTime']").change(function(){
var index = $(this).attr('id').slice(7);
alert(index);
var startTime = $('#startTime'+index).val();
var endTime = $(this).val();
$('#result'+index).val(endTime-startTime);
});