We Keep Coding

Im a beginner and i tried to make a calculator in js. im having trouble with outputs [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 11 months ago.
function calc() {
var a = parseFloat(document.querySelector("#value1").value);
var b = parseFloat(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 == "mul") {
calculate = a * b;
} else if (op == "div") {
calculate = a / b;
}
document.querySelector("#result").innerHTML = calculate;
}
Value 1: <input type = "text" id = "value 1" >
Value 2: <input type = "text" id = "value 2">
Operator:
<select id = "operator" >
<option value="add">Add</option>
<option value="min">Minus</option>
<option value="mul">Multiply</option>
<option value="div">Divide</option>
</select>
<button type = "button" onclick="calc()" >Calculate </button>
</form>
<div id = "result"> </div>
there are no errors shown but it isnt working and the output doesnt appear

I think Levi's code is doing well. Just a little bit wrapping error. And id "value 1" is not equal to id "value1", you can change both into "value1".
var a, b ,op, calculate;
function calc(){
a = parseFloat(document.querySelector("#value1").value);
b = parseFloat(document.querySelector("#value2").value);
op = document.querySelector("#operator").value;
if (op == "add") { calculate = a + b; }
else if (op == "min") { calculate = a - b; }
else if (op == "mul") { calculate = a * b; }
else if (op == "div") { calculate = a / b; }
console.log(calculate);
document.querySelector("#result").innerHTML=calculate;
}
Calculator
Value 1: <input type = "text" id = "value1" >
Value 2: <input type = "text" id = "value2">
Operator:
<select id = "operator" >
<option value="add">Add</option>
<option value="min">Minus</option>
<option value="mul">Multiply</option>
<option value="div">Divide</option>
</select>
<button type = "button" onclick="calc()" >Calculate </button>
<div id = "result"> </div>

Concatenate two different select/option tag to able to calculate in JavaScript

I try to make some calculating method in Js for calculate the perimeter and the area of the square/rectangle.
I failed somewhere in the options when I pick the different methods.
I want to work when I choose square of the area or perimeter to calculate after I apply the input fields with two different number.
I also try to hide the second input field when I only choose the square option, but I could not do it.
So any helpful suggestion to how to fix my code to work properly?
function calc() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var typ = document.getElementById("type").value;
var squarePerimeter = num1 * num1;
document.getElementById("perimeter").value = squarePerimeter;
var squareArea = num1 * 4;
document.getElementById("area").value = squareArea;
var rectanglePerimeter = num1 * num2;
document.getElementById("perimeter").value = rectanglePerimeter;
var rectangleArea = 2 * num1 + num2;
document.getElementById("area").value = rectangleArea;
if (typ === "sqr") {
document.getElementById("result").value = squarePerimeter;
} else if (typ === "rect") {
document.getElementById("result").value = rectanglePerimeter;
} else if (typ === "sqr") {
document.getElementById("result").value = squareArea;
} else if (typ === "rect") {
document.getElementById("result").value = rectangleArea;
}
};
<select name="" id="type">
<option id="square" value="sqr">square</option>
<option id="rectamgle" value="rect">rectangle</option>
</select>
<select name="" id="calculating">
<option id="perimeter" value="perimeter">Perimeter</option>
<option id="area" value="area">Area</option>
</select>
<br>
<input type="number" id="num1">
<input type="number" id="num2">
<br>
<button type="button" onclick="calc()">Calculate</button>
<input type="number" id="result">

Following your code structure you should change some things, like yoiur elseif, your are setting the same conditions as previous ifs, they will never be true.
function calc() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var typ = document.getElementById("type").value;
var obj = document.getElementById("calculating").value;
if (typ === "sqr" && obj === "area") {
document.getElementById("result").value = num1 * num1;
} else if (typ === "rect" && obj === "area") {
document.getElementById("result").value = num1 * num2;
} else if (typ === "sqr") {
document.getElementById("result").value = num1 * 4;
} else if (typ === "rect") {
document.getElementById("result").value = 2 * (num1 + num2);
}
};
function toggleNum2() {
var typ = document.getElementById("type").value;
var num2 = document.getElementById("num2");
if (typ === "sqr") {
num2.style.display = "none";
} else {
num2.style.display = "inline-block";
}
};
<body onload="toggleNum2()">
<select name="" id="type" onchange="toggleNum2()">
<option id="square" value="sqr">square</option>
<option id="rectamgle" value="rect">rectangle</option>
</select>
<select name="" id="calculating">
<option id="perimeter" value="perimeter">Perimeter</option>
<option id="area" value="area">Area</option>
</select>
<br>
<input type="number" id="num1">
<input type="number" id="num2">
<br>
<button type="button" onclick="calc()">Calculate</button>
<input type="number" id="result">
</body>

Other question!
How I can easily implement this code as work as the same in jQuery?

The scripts that I made dont work and I can't find the problem

First of all, sorry, I know the next code is wrong, I'm new in programming and I have a problem with it. When the user select an option from the Select, a value it must change, then, the user must write a price in numbers which value must not be higher than the previous value, here is when the scripts should act but it doesn't works. The correct code must be something like that:
<script>
function cboc(){
var cb = $("#cbotipfon").val();
var maxvalGORE = null;
if(cb == 0){
maxvalGORE = 0;
if(cb == 15){
maxvalGORE = 100;
}
if(cb == 16){
maxvalGORE = 200;
}
}
function cbocc(){
var val = null;
var x = document.GetElementById('txtprepos').value;
val = parseInt(x);
if(val > maxvalGORE){
alert('The value is higher than $' + maxvalGORE +'.');
document.GetElementById('txtprepos').value = "";
}
}
</script>
<select style="width=5.5em;" name="cbotipfon" id="cbotipfon" onchange="cboc()">
<option value="0">Select</option>
<option value="15">Option A</option>
<option value="16">Option B</option>
</select>
<input type="number" onblur="cbocc()" name="txtprepos" id="txtprepos"/>
I've been with that problem for days. If you can help me I'll be eternally grateful. Thanks in advance and for take your time.

Here is a simple example. No need to declare any function. Just declare your variables correctly and use the addEventListener method for getting the values of the input and select elements.
var maxvalGORE ,val ,cb ,x = null;
document.getElementById("cbotipfon").addEventListener("change", function(){
var cb = document.getElementById('cbotipfon').value;
if(cb == 0){
maxvalGORE = 0;
}
if(cb == 15){
maxvalGORE = 100;
}
if(cb == 16){
maxvalGORE = 200;
}
});
document.getElementById("txtprepos").addEventListener("change", function(){
x = document.getElementById('txtprepos').value;
val = parseInt(x);
if(val > maxvalGORE){
alert('The value is higher than $' + maxvalGORE +'.');
} else if(val == maxvalGORE) {
alert('The value is equal to $' + maxvalGORE +'.');
} else {
alert('The value is lower than $' + maxvalGORE +'.');
}
document.getElementById('txtprepos').value = "";
});
<select style="width=5.5em;" name="cbotipfon" id="cbotipfon">
<option value="0">Select</option>
<option value="15">Option A</option>
<option value="16">Option B</option>
</select>
<input type="number" name="txtprepos" id="txtprepos"/>

Javascript, Chrome don't recognise the variable outside the function

I hope you are well!!
Recently I created this calculator following a tutorial on youtube.
How you can see below I put all the variable outside the function.
In Firefox is working fine, but if I use Google Chrome and I try to use it, is giving me the result of NaN..... I fixed this error moving the var inside the function, but I don't understand why with Chrome I have to move it inside and Firefox no....
If anyone would be able to give me an explanation I will really appreciate!
Thanks!!!!
var value1 = parseInt(document.querySelector("#textbox1").value);
var value2 = parseInt(document.querySelector("#textbox2").value);
var operator = document.querySelector("#operators").value;
var total = document.getElementById("total");
var calculate;
function result() {
if (operator === "add") {
calculate = value1 + value2;
} else if (operator === "sub") {
calculate = value1 - value2;
} else if (operator === "multiply") {
calculate = value1 * value2;
} else if (operator === "divide") {
calculate = value1 / value2;
}
total.innerHTML = calculate;
}
<form>
<input type="text" id="textbox1">
<input type="text" id="textbox2"><br>
<select id="operators">
<option value="add">Add</option>
<option value="sub">Sub</option>
<option value="multiply">Multiply</option>
<option value="divide">Divide</option>
</select>
<input type="button" id="confirm" value="Result" onclick="result()">
<div id="total"></div>
</form>

The problem is you're grabbing the values before the user fills them in, right away, when the page loads. (You've said it's "working" in Firefox. It doesn't for me, but if you have autofill enabled, it may be filling in values from a previous run.)
Instead, grab the values within the result function:
var total = document.getElementById("total");
function result() {
var value1 = parseInt(document.querySelector("#textbox1").value);
var value2 = parseInt(document.querySelector("#textbox2").value);
var operator = document.querySelector("#operators").value;
var calculate;
if (operator === "add") {
calculate = value1 + value2;
} else if (operator === "sub") {
calculate = value1 - value2;
} else if (operator === "multiply") {
calculate = value1 * value2;
} else if (operator === "divide") {
calculate = value1 / value2;
}
total.innerHTML = calculate;
}
<form>
<input type="text" id="textbox1">
<input type="text" id="textbox2"><br>
<select id="operators">
<option value="add">Add</option>
<option value="sub">Sub</option>
<option value="multiply">Multiply</option>
<option value="divide">Divide</option>
</select>
<input type="button" id="confirm" value="Result" onclick="result()">
<div id="total"></div>
</form>

Result is not showing

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var result = document.getElementById('answer').value;
if (document.getElementById('add')) {
function myFunction() {
add1 = document.getElementById('num1').value;
add2 = document.getElementById('num2').value;
ans = (parseInt(add1)+parseInt(add2));
result.innerHTML = ans;
}
}
</script>
</head>
<body>
<input type="text" id="num1" />
<select id="problem">
<option id="add">+</option>
<option id="sub">-</option>
<option id="mul">x</option>
<option id="div">÷</option>
</select>
<input type="text" id="num2" />
<br />
<input type="submit" onclick="myFunction();" />
<br />
<input type="text" id="answer" readonly />
</body>
</html>
I'm trying to make a sum solver by taking the values from the two text boxes and after clicking the button, it should post the result in the text box below. However it is not doing that.
I also want the program to change how a problem is solved using the dropdown menu with the mathematical symbols.
Thanks.

I think you're after something like this
function myFunction() {
var result = document.getElementById('answer'),
operator = document.getElementById('problem').value,
add1 = document.getElementById('num1').value,
add2 = document.getElementById('num2').value,
ans = 0;
switch (operator) {
case '+':
ans = (parseInt(add1) + parseInt(add2));
break;
case '-':
ans = (parseInt(add1) - parseInt(add2));
break;
case 'x':
ans = (parseInt(add1) * parseInt(add2));
break;
case '÷':
ans = (parseInt(add1) / parseInt(add2));
break;
}
result.value = ans;
}
instead of using if statements, and creating different functions, just have one function and determine the operand.
Edit: Also, watch out for your variable declarations. 'ans', 'add1' and 'add2' weren't being declared which resulted in global variables being created

The problem should be with the line
var result = document.getElementById('answer').value;
Try the below snippet
var result=document.getElementById('answer');
ans = (parseInt(add1)+parseInt(add2));
result.value=ans;
http://jsfiddle.net/2W5za/1/

You have a few issues. Not sure what you were going for with the if but remove it. Also, set the value of a textbox with value not innerHTML.
function myFunction() {
var result = document.getElementById('answer');
add1 = document.getElementById('num1').value;
add2 = document.getElementById('num2').value;
ans = (parseInt(add1)+parseInt(add2));
result.value = ans;
}
http://jsfiddle.net/LjqMJ/

Regarding the first part of the question (and that for which this question is titled), one problem I see is this line of code right here:
var result = document.getElementById('answer').value;
What is the type of result? Later on you treat it as if it is a DOMElement with result.innerHTML = ans; by assuming it has a property innerHTML. However because you used .value it's in fact a string which will not have innerHTML.
Regarding the second part, you can assert which function is selected in the <select> by looking at it's .value. The <option> tags will always exist, regardless of if they are selected or not.
Speaking more broadly, I highly recommend you check out using the debugger in either chrome or firefox. That will allow you to drop a breakpoint in your code, and figure out if the value is being computed correctly, and see what it is attempting to write to, all interactively.
Chrome:
https://developers.google.com/chrome-developer-tools/docs/javascript-debugging
Firefox:
https://developer.mozilla.org/en-US/docs/Tools/Debugger

<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="text" id="num1" />
<select id="problem">
<option value="add">+</option>
<option value="sub">-</option>
<option value="mul">x</option>
<option value="div">%</option>
</select>
<input type="text" id="num2" />
<br />
<input type="submit" onclick="myFunction();" />
<br />
<input type="text" id="answer" readonly />
<script type="text/javascript">
function myFunction()
{
var e = document.getElementById("problem");
var sOperation = e.options[e.selectedIndex].value;
add1 = document.getElementById('num1').value;
add2 = document.getElementById('num2').value;
var ans;
if (!isNaN(add1) && !isNaN(add2)){
if(sOperation=='add'){
//Add
ans = parseInt(add1)+parseInt(add2);
} else if (sOperation=='sub') {
//Subtract
ans = parseInt(add1)-parseInt(add2);
} else if (sOperation=='mul') {
//Multiple
ans = parseInt(add1) * parseInt(add2);
} else if (sOperation=='div') {
//Divide
ans = parseInt(add1) / parseInt(add2);
}
document.getElementById("answer").value = ans;
} else {
alert("Please enter numeric values only");
return false;
}
}

There are many things wrong with your code. However, to fix your problem, change = ans to = ans.toString();
You see, in javascript integers and strings cannot change to each other's values without a conversion (kind of like a brother and sister refusing to share), so toString() is used for a conversion to String.
The other thing to change is innerHTML to value, because you are dealing with text boxes.

HTML
<input type="text" id="num1" />
<select id="problem">
<option id="add">+</option>
<option id="sub">-</option>
<option id="mul">x</option>
<option id="div">÷</option>
</select>
<input type="text" id="num2" />
<br />
<input type="submit" onclick="myFunction();" />
<br />
<input type="text" id="answer" readonly />
JavaScript
function myFunction() {
var result = document.getElementById('answer');
var operator = document.getElementById('problem').value;
var add1 = document.getElementById('num1').value;
var add2 = document.getElementById('num2').value;
var ans;
if (!isNaN(add1) && !isNaN(add2)) {
//Addition
if (operator == '+')
{
ans = (parseInt(add1) + parseInt(add2));
}
//Subtraction
else if (operator == '-') {
ans = (parseInt(add1) - parseInt(add2));
}
//Multiplication
else if (operator == 'x') {
ans = (parseInt(add1) * parseInt(add2));
}
//Division
else if (operator == '÷') {
ans = (parseInt(add1) / parseInt(add2));
}
//Result
result.value = ans;
} else {
alert("Please enter numeric values only");
return false;
}
}
Fiddle Demo