Hi i have this code on my site`
<body>
<script>
function calcResult() {
document.getElementById('result').innerHTML = '';
var num1 = new Number(document.getElementById('txt1').value);
var num2 = new Number(document.getElementById('txt2').value);
if (isNaN(num1) || isNaN(num2)) {
alert('One or both inputs are not a number');
} else {
document.getElementById('result').innerHTML = num1 * num2;
}
}
window.onload = function() {
document.getElementById('btnCalc').onclick = calcResult;
}
</script>
<div>
Enter value 1
<input type="text" id="txt1" />
<br />Enter value 2
<input type="text" id="txt2" />
<br />
<button id="btnCalc">Calculate difference</button>
<div id="result"></div>
</div>
<script>
function test() {
document.getElementById('re').innerHTML = '';
var n1 = new Number(document.getElementById('od1').value);
var n2 = new Number(document.getElementById('od2').value);
if (isNaN(n1) || isNaN(n2)) {
alert('One or both inputs are not a number');
} else {
document.getElementById('re').innerHTML = n1 - n2;
}
}
window.onload = function() {
document.getElementById('od').onclick = test;
}
</script>
<div>
Enter value 1
<input type="text" id="od1" />
<br />Enter value 2
<input type="text" id="od2" />
<br />
<button id="od">Calculate difference</button>
<div id="re"></div>
</div>
</body>
The problem is that first form isnt working and the second is working. On my site i want many of these calculator, but i dont know why is not working. I will be gradefull if someone help me find result.
Write all javascript code in one script tag. Try the following code
<body>
<script>
function calcResult(){
document.getElementById('result').innerHTML = '';
var num1 = new Number(document.getElementById('txt1').value);
var num2 = new Number(document.getElementById('txt2').value);
if(isNaN(num1) || isNaN(num2)){
alert('One or both inputs are not a number');
} else {
document.getElementById('result').innerHTML = num1 * num2;
}
}
function test(){
document.getElementById('re').innerHTML = '';
var n1 = new Number(document.getElementById('od1').value);
var n2 = new Number(document.getElementById('od2').value);
if(isNaN(n1) || isNaN(n2)){
alert('One or both inputs are not a number');
} else {
document.getElementById('re').innerHTML = n1 - n2;
}
}
window.onload=function(){
document.getElementById('btnCalc').onclick = calcResult;
document.getElementById('od').onclick = test;
}
</script>
<div>
Enter value 1 <input type="text" id="txt1" /><br />
Enter value 2 <input type="text" id="txt2" /><br />
<button id="btnCalc">Calculate difference</button>
<div id="result"></div>
</div>
<div>
Enter value 1 <input type="text" id="od1" /><br />
Enter value 2 <input type="text" id="od2" /><br />
<button id="od">Calculate difference</button>
<div id="re"></div>
</div>
</body>
If both functions are equal (you just want to execute three diference elements),
use element's Ids as parameters in function argument and call it as often as you wish with any diference Id.
<body>
<script>
<div>
Enter value 1 <input type="text" id="txt1" /><br />
Enter value 2 <input type="text" id="txt2" /><br />
<button id="btnCalc">Calculate difference</button>
<div id="result"></div>
</div>
<script>
function test(id){
document.getElementById(id, id2, id3).innerHTML = '';
var n1 = new Number(document.getElementById(id2).value);
var n2 = new Number(document.getElementById(id3).value);
if(isNaN(n1) || isNaN(n2)){
alert('One or both inputs are not a number');
} else {
document.getElementById(id).innerHTML = n1 - n2;
}
}
window.onload=function(){
document.getElementById('btnCalc').onclick = function(){ test("result", "txt1", "txt2") };
document.getElementById('od').onclick = function(){ test("re", "od1", "od2") };
}
</script>
<div>
Enter value 1 <input type="text" id="od1" /><br />
Enter value 2 <input type="text" id="od2" /><br />
<button id="od">Calculate difference</button>
<div id="re"></div>
</div>
<script type="text/javascript">
function calcResult(resultId, valId, val2Id, operation) {
var $result = document.getElementById(resultId);
$result.innerHTML = '';
var num1 = new Number(document.getElementById(valId).value);
var num2 = new Number(document.getElementById(val2Id).value);
if (isNaN(num1) || isNaN(num2)) {
alert('One or both inputs are not a number');
} else {
$result.innerHTML = operation(num1, num2);
}
}
window.onload = function() {
document.getElementById('btnCalc').onclick = function() {
calcResult('result', 'txt1', 'txt2', function(num1, num2) {
return num1 * num2;
});
}
document.getElementById('od').onclick = function() {
calcResult('re', 'od1', 'od2', function(num1, num2) {
return num1 - num2;
});
};
}
</script>
Put all the scripts in one <script> tag.
Also, there's a room for improvement on your program. see below:
i can see that eventhough your button is named "calculate difference",
the first form is calculating the product and the second form is calculating the difference, thus, using this,
you can rewrite your code in such a way that you only have one function for both operations,
just pass the elementIds as parameters and a function which takes care which operation to apply. like the one I wrote above.
see it here: http://jsfiddle.net/1yo4ypc2/
Related
My program alerts me when I first start it up, and it won't convert when I click the 'Calculate!' button.
<div id="input">
<form method = "post" action = "hw07.php" name = "form">
Temperature: <input type="text" id="num" name="temperature"> <br />
<input type="radio" name="con" value="far" id="far"> Convert to Fahrenheit
<br />
<input type="radio" name="con" value="cel" id="cel"> Convert to Celcius
<br />
<input type="button" name="submit" value="Calculate!" id="submit">
</form>
</div>
<div id = "results"></div>
window.addEventListener("load", link_events, false);
function link_events() {
var temp = document.getElementById("num");
document.getElementById("submit").onclick = calculate(temp);
}
function calculate(temp) {
if(isNaN(temp)){
alert("Not numeric")
}
if (document.getElementById("far").checked) {
document.getElementById("results").innerHTML = "Temperature is" +
Math.round(num-32)*5/9;
}
else if (document.getElementById("cel").checked){
document.getElementById("results").innerHTML = "Temperature is" + Math.round(num*9/5)+32;
}
else
alert("choose a conversion");
return false;
}
I want it to alert me when I click the 'Calculate!' button and not when I start the program. It needs to print the converted value, but it's not even printing anything atm.
You have several problems in your code.
Element.onclick property should be a function, not a function result value
To get proper recalculation each time you press button, you need to get temperature value from input field inside function calculate (Also do not forget to parse it to Number type since it has String type)
The last one is the mysterious num variable which should be temp obviously
All this problem are solved in the code below. Hope this helps.
window.addEventListener("load", link_events, false);
function link_events() {
document.getElementById("submit").onclick = calculate;
}
function calculate() {
var temp = Number(document.getElementById("num").value);
if (isNaN(temp)) {
alert("Not numeric")
return
}
if (document.getElementById("far").checked) {
document.getElementById("results").innerHTML = "Temperature is " + Math.round(temp - 32) * 5 / 9;
} else if (document.getElementById("cel").checked) {
document.getElementById("results").innerHTML = "Temperature is " + Math.round(temp * 9 / 5) + 32;
} else {
alert("choose a conversion");
}
return;
}
<div id="input">
<form method = "post" action = "hw07.php" name = "form">
Temperature: <input type="text" id="num" name="temperature"> <br />
<input type="radio" name="con" value="far" id="far"> Convert to Fahrenheit
<br />
<input type="radio" name="con" value="cel" id="cel"> Convert to Celcius
<br />
<input type="button" name="submit" value="Calculate!" id="submit">
</form>
</div>
<div id = "results"></div>
just remove this line
window.addEventListener("load", link_events, false);
and change the link_events function
function link_events() {
var temp = document.getElementById("num");
calculate(temp.value);
}
and add onClick event to button
<input type="button" name="submit" value="Calculate!" id="submit" onclick="link_events()">
also i corected this function
function calculate(temp) {
if (isNaN(temp)) {
alert("Not numeric")
}
if (document.getElementById("far").checked) {
document.getElementById("results").innerHTML = "Temperature is" +
Math.round(temp - 32) * 5 / 9;
}
else if (document.getElementById("cel").checked) {
document.getElementById("results").innerHTML = "Temperature is" + Math.round(temp * 9 / 5) + 32;
}
else
alert("choose a conversion");
return false;
}
num is not a variable should be temp in Math.round()
I've created a basic 4 function calculator in JavaScript and now I need to use an alert to tell the user about any errors. the possible errors are:
One or both input fields are blank
One or both input fields < -9999 or greater than 9999
Divide by zero
Illegal character in either input field. Only 0, 1 ,2 ,3 ,4 ,5 ,6 ,7 ,8 ,9, and – are allowed.
Code:
function multiplyBy() {
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 * num2;
}
function divideBy() {
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 / num2;
}
function additionBy() {
num1 = parseInt(document.getElementById("firstNumber").value);
num2 = parseInt(document.getElementById("secondNumber").value);
document.getElementById("result").innerHTML = num1 + num2;
}
function subtractionBy() {
num1 = parseInt(document.getElementById("firstNumber").value);
num2 = parseInt(document.getElementById("secondNumber").value);
document.getElementById("result").innerHTML = num1 - num2;
}
body {
margin: 30px;
}
<!DOCTYPE html>
<html>
<head>
<body>
<form>
1st Number : <input type="text" id="firstNumber"> 2nd Number: <input type="text" id="secondNumber"> The Result is :
<span id="result"></span>
<br>
</br>
<br>
<input type="button" onClick="multiplyBy()" Value="Multiply" />
<input type="button" onClick="divideBy()" Value="Divide" />
<input type="button" onClick="additionBy()" Value="Add" />
<input type="button" onClick="subtractionBy()" Value="Sub" />
</br>
</form>
<script type="text/javascript" src="fourth.js">
</script>
</body>
</html>
first of all define the input tag type as number like below
1st Number : <input type="number" id="firstNumber" >
2nd Number: <input type="number" id="secondNumber" >
so, in that case user will not be able to enter invalid input.
secondly, check the divide by zero condition into the function only
There are libraries for validation that you can get but lets start simple. Rework what you have to remove duplicated code and then add functions to do your validation.
This is JUST A START not a complete solution, you have to do work. I will leave it to you to add the OTHER validation you need, but you can see how this is doing it with the couple I added.
function showResults(results) {
document.getElementById("result").innerHTML = results;
}
function multiplyBy(number1, number2) {
num1 = number1.value;
num2 = number2.value;
showResults(num1 * num2);
}
function divideBy(number1, number2) {
num1 = number1.value;
num2 = number2.value;
showResults(num1 / num2);
}
function additionBy(number1, number2) {
num1 = parseInt(number1.value, 10);
num2 = parseInt(number2.value, 10);
showResults(num1 + num2);
}
function subtractionBy(number1, number2) {
num1 = parseInt(number1.value, 10);
num2 = parseInt(number2.value, 10);
showResults(num1 - num2);
}
function actionClicker() {
let number1 = document.getElementById("firstNumber");
let number2 = document.getElementById("secondNumber");
validateNumber(number1);
validateNumber(number2);
var attribute = this.getAttribute("data-myattribute");
var expr = attribute;
switch (expr) {
case 'multiply':
multiplyBy(number1, number2);
break;
case 'division':
divideBy(number1, number2);
break;
case 'subtract':
subtractionBy(number1, number2);
break;
case 'addition':
additionBy(number1, number2);
break;
default:
console.log('Sorry, we do not find ' + expr + '.');
}
}
function showValidationMessage(message) {
alert(message);
}
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function isEmpty(n) {
return n === "";
}
function isInRange(n) {
if (isNumeric(n) && !isEmpty(n)) {
num = parseInt(n, 10);
return num >= -9999 && num <= 9999;
}
return false;
}
function validateNumber(el) {
let hasError = false;
el.classList.remove("has-error");
// add your validation
let message = "get stuff better";
if (!isNumeric(el.value)) {
message = "Not a number.";
hasError = true;
}
if (isEmpty(el.value)) {
message = "Not a number, cannot be empty.";
hasError = true;
}
if (hasError) {
el.classList.add("has-error");
showValidationMessage(message);
}
}
function modifyNumbers(event) {
let el = event.target;
validateNumber(el);
}
var num1 = document.getElementById("firstNumber");
var num2 = document.getElementById("secondNumber");
var buttons = document.getElementsByClassName('actions');
// add event listener to buttons
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', actionClicker, false);
}
num1.addEventListener("change", modifyNumbers, false);
num2.addEventListener("change", modifyNumbers, false);
body {
margin: 30px;
}
.buttons {
margin: 2em;
}
label {
padding-right: 1em;
padding-left: 1em
}
.has-error {
background-color: lightpink;
border: solid red 1px;
}
.numbers {
width: 11em;
}
<body>
<form>
<label for="firstNumber">1st Number:</label><input class="numbers" type="number" id="firstNumber" placeholder="Min: -9999, max: 9999" min="-9999" max="9999" /><span class="validity"></span><label for="secondNumber">2nd Number:</label><input class="numbers"
type="number" id="secondNumber" placeholder="Min: -9999, max: 9999" min="-9999" max="9999" /><span class="validity"></span>
<div><label>The Result is:</label>
<div id="result"></div>
</div>
<div class="buttons">
<button type="button" class="actions" id="multiply" data-myattribute="multiply">Multiply</button>
<button type="button" class="actions" id="divide" data-myattribute="division">Divide</button>
<button type="button" class="actions" id="add" data-myattribute="addition">Add</button>
<button type="button" class="actions" id="subtract" data-myattribute="subtract">Sub</button>
</div>
</form>
</body>
What you are looking for is a validation pattern.
To check if the inputs are valid you can perform checks at the beginning of your math functions. For example
var $num1 = document.getElementById("firstNumber");
var $num2 = document.getElementById("secondNumber");
var $result = document.getElementById("result");
function checkValid(division){
var num1 = $num1.value;
var num2 = $num2.value;
if(num1 == null || num1 > 9999 || num1 < -9999){
return false;
}
if(num2 == null || num2 > 9999 || num2 < -9999){
return false;
}
if(division && num2 === 0){
return false
}
}
function multiplyBy() {
if(check()){
num1 = $num1.value;
num2 = $num2.value;
$result.innerHTML = num1 * num2;
} else {
alert('some error message');
}
}
then in your division function call check(true)
This is just one way to handle it. You could call alert in the check function before returning or even return your error messages from the check function. This should get going in the right direction.
Also I do recommend the <input type="number"> changes by Hasan as well.
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 5 months ago.
Improve this question
I was just trying to write a simple javascript program that will demonstrate to take user input from text field, and clicking the button will display the summation result of those number in another text field. But unfortunately the below code is not working. Clicking the button does not show anything in the result text field.
<body>
<div>
<div>
<h1>Add two number using text box as input using javascript</h1>
</div>
Enter First Number : <br>
<input type="text" id="Text1" name="TextBox1">
<br>
Enter Second Number : <br>
<input type="text" id="Text2" name="TextBox2">
<br>
Result : <br>
<input type="text" id="txtresult" name="TextBox3">
<br>
<input type="button" name="clickbtn" value="Display Result" onclick="add_number()">
<script type="text/javascript">
function add_number(){
var first_number = parseInt(document.getElementsById("Text1").value);
var second_number = parseInt(document.getElementsById("Text2").value);
var result = first_number + second_number;
document.getElementById("txtresult").innerHTML = result;
}
</script>
Here a working fiddle: http://jsfiddle.net/sjh36otu/
function add_number() {
var first_number = parseInt(document.getElementById("Text1").value);
var second_number = parseInt(document.getElementById("Text2").value);
var result = first_number + second_number;
document.getElementById("txtresult").value = result;
}
When you assign your variables "first_number" and "second_number", you need to change "document.getElementsById" to the singular "document.getElementById".
var first_number = parseInt(document.getElementById("Text1").value);
var second_number = parseInt(document.getElementById("Text2").value);
// This is because your method .getElementById has the letter 's': .getElement**s**ById
<script>
function sum()
{
var value1= parseInt(document.getElementById("txtfirst").value);
var value2=parseInt(document.getElementById("txtsecond").value);
var sum=value1+value2;
document.getElementById("result").value=sum;
}
</script>
You made a simple mistake. Don't worry....
Simply use getElementById instead getElementsById
true
var first_number = parseInt(document.getElementById("Text1").value);
False
var first_number = parseInt(document.getElementsById("Text1").value);
Thanks ...
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.minus = function() {
var a = Number($scope.a || 0);
var b = Number($scope.b || 0);
$scope.sum1 = a-b;
// $scope.sum = $scope.sum1+1;
alert($scope.sum1);
}
$scope.add = function() {
var c = Number($scope.c || 0);
var d = Number($scope.d || 0);
$scope.sum2 = c+d;
alert($scope.sum2);
}
});
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h3>Using Double Negation</h3>
<p>First Number:
<input type="text" ng-model="a" />
</p>
<p>Second Number:
<input type="text" ng-model="b" />
</p>
<button id="minus" ng-click="minus()">Minus</button>
<!-- <p>Sum: {{ a - b }}</p> -->
<p>Sum: {{ sum1 }}</p>
<p>First Number:
<input type="number" ng-model="c" />
</p>
<p>Second Number:
<input type="number" ng-model="d" />
</p>
<button id="minus" ng-click="add()">Add</button>
<p>Sum: {{ sum2 }}</p>
</div>
<script>
function myFunction() {
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = y + z;
document.getElementById("result").innerHTML = x;
}
</script>
<p>
<label>Enter First Number : </label><br>
<input type="number" id="txt1" name="text1"><br/>
<label>Enter Second Number : </label><br>
<input type="number" id="txt2" name="text2">
</p>
<p>
<button onclick="myFunction()">Calculate</button>
</p>
<br/>
<p id="result"></p>
It should be document.getElementById("txtresult").value= result;
You are setting the value of the textbox to the result. The id="txtresult" is not an HTML element.
<script>
var text1 = document.getElementById("Text1").value;
var text2 = document.getElementById("Text2").value;
var answer = parseInt(text1) + parseInt(text2);
function add_number(){
document.getElementById("txtresult").value = answer;
}
</script>
its Not document.getElementsById function its document.getElementById try it
Instead of writing
.innerHTML = result;
use
.value = result;
<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>Calculator DEMO</title>
</head>
<body>
<div>
<p>
<label>Enter Number 1: </label><br>
<input type="number" id="txt1" name="text1"><br/>
<label>Enter Number 2: </label><br>
<input type="number" id="txt2" name="text2">
</p>
<p>
<button onclick="resultsum()">+</button>
<button onclick="resultsub()">-</button>
<button onclick="resultmul()">*</button>
</p>
<p>
<button onclick="resultdiv()">/</button>
<button onclick="resultmod()">%</button>
<button onclick="resultper()">percentage</button>
</p>
<script>
function resultsum()
{
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var sm = y + z;
document.getElementById("resultsum").innerHTML = sm;
if(document.getElementById("resultsum").innerHTML%2!=0)
{
alert('"calculated Result is odd"');
}
else
{
alert('"calculated Result is not "ODD"');
}
}
function resultsub()
{
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var sb = y - z;
document.getElementById("resultsub").innerHTML = sb;
{
if(document.getElementById("resultsub").innerHTML%2!=0)
{
alert('"calculated Result is odd"');
}
else
{
alert('"calculated Result is not "ODD"');
}
}
}
function resultmul()
{
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var ml = y * z;
document.getElementById("resultmul").innerHTML = ml;
if(document.getElementById("resultmul").innerHTML%2!=0)
{
alert('"calculated Result is odd"');
}
else
{
alert('"calculated Result is not "ODD"');
}
}
function resultdiv()
{
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var dv = y / z;
document.getElementById("resultdiv").innerHTML = dv;
if(document.getElementById("resultdiv").innerHTML%2!=0)
{
alert('"calculated Result is odd"');
}
else
{
alert('"calculated Result is not "ODD"');
}
}
function resultmod()
{
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var md = y + z;
document.getElementById("resultmod").innerHTML = md;
if(document.getElementById("resultmod").innerHTML%2!=0)
{
alert('"calculated Result is odd"');
}
else
{
alert('"calculated Result is not "ODD"');
}
}
function resultper()
{
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var per = (y + z )/2;
document.getElementById("resultper").innerHTML = per;
if(document.getElementById("resultper").innerHTML%2!=0)
{
alert('"calculated Result is odd"');
}
else
{
alert('"calculated Result is not "ODD"');
}
}
</script>
<input type="text" name="Answers" id="ans" >
<br/>
<p id="resultsum"></p>
<p id="resultsub"></p>
<p id="resultmul"></p>
<p id="resultdiv"></p>
<p id="resultmod"></p>
<p id="resultper"></p>
</div>
</body>
</html>
You can simply convert the given number using Number primitive type in JavaScript as shown below.
var c = Number(first) + Number(second);
How to check value in input using loop for with onchange using javascript ?
first, When user fill char. It's will be show Your Price must be a number.
And if user fill number less than 1.5 It's will show Your Price must be at least $1.50 USD.
and click Add more link to add input.
I try my code , but not work, how can i do that ?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form onsubmit="return checkform(this);">
Add more
<div id="p_scents_price">
<p>
<label>
<input type="text" class="price" id="price0" size="20" name="price[]" onchange="myFunction0()"/><p id="demo0"></p>
</label>
</p>
</div>
<input type="submit" name="submit" value="OK">
</form>
<script>
var list = document.querySelectorAll(".price");
for (z = 0; z < list.length; ++z) {
function myFunction'+z+'() {
var x = document.getElementById("price'+z+'").value;
var y = isNaN(x);
if(y === true)
{
document.getElementById("demo'+z+'").innerHTML = "Your Price must be a number.";
}
else
{
if(x < 1.5)
{
document.getElementById("demo'+z+'").innerHTML = "Your Price must be at least $1.50 USD.";
}
else
{
document.getElementById("demo'+z+'").innerHTML = "";
}
}
}
}
}
</script>
<script>
$(function() {
var scntDiv = $('#p_scents_price');
var i = 1;
$('#addScnt_price').live('click', function() {
$('<p><label><input type="text" class="price" id="price'+i+'" size="20" name="price[]" onchange="myFunction'+i+'()"/>Remove<p id="demo'+i+'"></p></label></p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt_price').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
}
return false;
});
});
</script>
<!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