CODEWITHSUNDEEP
javascripthtmloutputcalculator
cannondale
cannondale

Reputation: 11

JavaScript, output in calculator

I have a problem with my very simple calculator in JS. I want it to show the result in a box but I don't know what it is that I'm doing wrong. There is probably some more things in my code that might not be right... Please help me!

Javascript:

document.getElementById('submit').onclick=function() {
	num1 = parseFloat(document.getElementById('valueA').value);
	num2 = parseFloat(document.getElementById('valueB').value);
	arithmeticOperator = document.getElementById('arithmeticOperator').value;
	
	switch(arithmeticOperator) {
		case '+':
			result = num1 + num2;
			break;
		case '-':
			result = num1 - num2;
			break;
		case '*':
			result = num1 * num2;
			break;
		case '/':
			if(num2 != 0)
			{
				result = num1 / num2;
			}else {
				result = 'Dela inte med 0!';
			}
			break;
		default:
			result = 'Error';
	}
	document.getElementById('calcForm').onclick=output;
window.alert('result');
};
<!DOCTYPE html>
<html>
<head>
	<title>blabla</title>
	<meta charset="utf-8"/>
<script src="js.js" defer></script>
</head>
<body>
	<form name="calcForm" id="calcForm">
		<p><input type="number" name="valueA" placeholder="Värde A" /></p>
		<p><input type="number" name="valueB" placeholder="Värde B" /></p>

		<select name="arithmeticOperator">
			<option value="+">Addition</option>
			<option value="-">Subtraktion</option>
			<option value="/">Division</option>
			<option value="*">Multiplication</option>
		</select>
		<button type="submit">Räkna ut</button>
		
		<p><output name="result" form="calcForm"></output></p>
	</form>

</body>
</html>

:)

Upvotes: 0

Views: 1764

Answers (4)

kano
kano

Reputation: 5920

As you seem eager to just know the solution - I've created this fiddle for you.

Please go over it carefully and check the edits I've done in your code.

Numerous errors, typos changed (as mentioned by others) include:

  • Every name= instance can be swapped out by id= in your code.. It's crucial in javascript to understand the difference.
  • You didn't declare any of the variables at the start. Any javascript variable starts with var (including arrays, objects and often even functions)
  • The code was giving a POST error. You have to handle the submit event of a form (because HTML automatically wants to send it) - see the first line in the function event.preventDefault()

The javascript code reworked:

document.getElementById('submitButton').onclick = function(event) {
    event.preventDefault();

    var num1 = parseFloat(document.getElementById('valueA').value),
        num2 = parseFloat(document.getElementById('valueB').value),
        arithmeticOperator = document.getElementById('arithmeticOperator').value,
        output = document.getElementById('result');

    switch(arithmeticOperator) {
        case '+':
            result = num1 + num2;
            break;
        case '-':
            result = num1 - num2;
            break;
        case '*':
            result = num1 * num2;
            break;
        case '/':
            if(num2 != 0)
            {
                result = num1 / num2;
            }else {
                result = 'Dela inte med 0!';
            }
            break;
        default:
            result = 'Error';
    }
    output.innerHTML = result;
    window.alert(result);
    return false;
};

And the HTML with some modifications:

<form name="calcForm" id="calcForm">
    <p><input type="number" id="valueA" placeholder="Värde A" /></p>
    <p><input type="number" id="valueB" placeholder="Värde B" /></p>

    <select name="arithmeticOperator" id="arithmeticOperator">
        <option value="+">Addition</option>
        <option value="-">Subtraktion</option>
        <option value="/">Division</option>
        <option value="*">Multiplication</option>
    </select>
    <button type="submit" id="submitButton">Räkna ut</button>

    <p>Result: <output id="result" form="calcForm"></output></p>
</form>

Upvotes: 0

Domino
Domino

Reputation: 6768

document.getElementById gets elements by their id. You have multiple cases where you're trying to find elements with their name or type. That won't work.

document.getElementById('calcForm').onclick=output;
This tries to bind a function called output to the click event of an element called calcForm. I have no idea what you're trying to do here.

To show the result in an input or output, you can just do
document.getElementById("idOfTheElement").value = result;

Upvotes: 0

epascarello
epascarello

Reputation: 207501

  • First you have no element with the id of submit.
  • You are trying to add onclick handler to the element before it exists.
  • You are selecting other elements with id, but they only have a name.
  • You are adding a click event to a form, not sure what you expect that to do when there is no method output.

Upvotes: 2

Josh
Josh

Reputation: 3288

You are selecting by id, but the value arithmeticOperator is the name of your select box.

Try this: <select name="arithmeticOperator" id="arithmeticOperator">

Upvotes: 0

Related Questions