How to get functions on a Javascript calculator to display the answer or error m
ID: 3699721 • Letter: H
Question
How to get functions on a Javascript calculator to display the answer or error message in the text box.
In my code I am supposed to get the squared (x^2), halve (1/2 whatever number is entered and then divided by 2), and area of circle (area) buttons functioning while also getting the answer of any calculation or error message (display if the formula entered cannot be converted) to display in the text box of the calculator and then once another button is clicked (for example, 4, it would clear everything out in that textbox and only display the number 4, thus allowing another formula to be entered).
So far I am able to get the buttons to do the proper functions, I just need help coding it so that once the equal button is clicked, it will display the answer or error message in the text box and then clear out the text once the user clicks another button and display the number the user entered to start a new formula.
below is my code:
calculator.html -
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<meta name="description" content="A Javascript Calculator" />
<meta name="keywords" content="calculator, JavaScript, eval, try/catch,
exception, errors" />
<meta name="author" content="Cory Coleman" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="../calculator/star.png">
<link href="calculator.css" rel="stylesheet" />
<script src="calculator.js"></script>
</head>
<body class="calculator">
<header class="calculator">
<h1>JS Calculator</h1>
</header>
<nav>
<ul>
<li><a href="../index.html" target="_blank">Home</a></li>
<li><a href="../movies.html" target="_blank">My Movies</a></li>
<li><a href="../hobby.html" target="_blank">My Hobby</a></li>
<li class="dropnav"><a href="#">Other Pages</a>
<ul class="dropdown">
<li class="submenu"><a href="../animation.html" target="_blank">
Animation</a></li>
<li class="submenu"><a href="../youthshelter/youthshelter.html"
target="_blank">Youth Shelter</a></li>
<li class="submenu"><a href="../petcomp/petcomp.html" target="_blank">
Pet Competition Form</a></li>
<li class="submenu"><a href="../story/story.html" target="_blank">
Ad-lib Story</a></li>
<li class="submenu"><a href="../slideshow/slideshow.html"
target="_blank">Slideshow</a></li>
<li class="submenu"><a class="active" href="calculator.html"
target="_blank">JS Calculator</a></li>
</ul>
</li>
</ul>
</nav>
<h1 class="leadheader">JavaScript Calculator</h1>
<section class="mainContent">
<!--'readonly' will keep the element secure and not accessible-->
<p><input type="text" id="compText" readonly></p>
<h3 id="message">JS-18X</h3> <<<<<<< id="message" displays answer or error but need it in the textbox (line directly above this one) but has id attribute already*******
<p>
<button id="1" value="1" class="digit">1</button>
<button id="2" value="2" class="digit">2</button>
<button id="3" value="3" class="digit">3</button>
<button id="add" value="+" class="operator">+</button>
<br>
<button id="4" value="4" class="digit">4</button>
<button id="5" value="5" class="digit">5</button>
<button id="6" value="6" class="digit">6</button>
<button id="subtract" value="-" class="operator">-</button>
<br>
<button id="7" value="7" class="digit">7</button>
<button id="8" value="8" class="digit">8</button>
<button id="9" value="9" class="digit">9</button>
<button id="multiply" value="*" class="operator">X</button>
<br>
<button value="C" id="clearBtn">C</button>
<button id="zero" value="0" class="digit">0</button>
<button type="button" id="convertBtn">=</button>
<button id="divide" value="/" class="operator">/</button>
<br>
<button id="square" value="" class="operator">X<sup>2</sup></button>
<button id="half" value="" class="operator"><sup>1/2</sup></button>
<button id="area" value="" class="operator">area</button>
</p>
</section>
<footer class="footerstyle">
<p class="footer">Created by Cory Coleman</p>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img class="footer"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!"/>
</a>
</p>
</footer>
</body>
</html>
calculator.js -
window.addEventListener("load", function() {
document.getElementById("convertBtn").addEventListener("click", convert);
//will get all button values
var numbers = document.getElementsByClassName("digit");
var size = numbers.length; //gets length of array of numbers/button values
//loops through and adds an event listener to each of the buttons
for (var i = 0; i < size; i++) {
numbers[i].addEventListener("click", buildFormula);
}
//this will clear whatever value is in the text box &
//this will wire up the clear button to work when clicked on
document.getElementById("clearBtn").addEventListener("click", function() {
document.getElementById("compText").value = "";
});
//this will wire up the square button to work when clicked on
document.getElementById("square").addEventListener("click", function () {
document.getElementById("compText").value =
document.getElementById("compText").value + " * " +
document.getElementById("compText").value;
});
//this will wire up the half button to work when clicked on
document.getElementById("half").addEventListener("click", function () {
document.getElementById("compText").value =
document.getElementById("compText").value + " * " + 0.5;
});
//this will wire up the area or radius button to work when clicked on
document.getElementById("area").addEventListener("click", function () {
document.getElementById("compText").value =
document.getElementById("compText").value + " * " +
document.getElementById("compText").value + " * " + Math.PI
});
var operators = document.getElementsByClassName("operator");
size = operators.length;
for(var i = 0; i < size; i++) {
operators[i].addEventListener("click", function() {
document.getElementById("compText").value += " " + this.value + " ";
})
}
//will pull for all buttons
var buttons = document.getElementsByTagName("button");
size = buttons.length;
for(var i = 0; i < size; i++) {
buttons[i].addEventListener("focus", function() {
this.style.border = "4px #333C7C solid";
//adds border to button when it is clicked
})
buttons[i].addEventListener("blur", function() {
this.style.border = "4px #C2C6DF inset";
//brings border back to normal when another button is clicked
})
buttons[i].addEventListener("mouseover", function() {
this.style.backgroundColor = "#A89BBD";
//changes color when hovered over by mouse to show the button you are on
})
buttons[i].addEventListener("mouseout", function() {
this.style.backgroundColor = "white";
//changes back to original color when mouse cursor is no longer
//hovering over the button
})
}
});
//this function will convert the values entered into the text box
function convert() {
try { //eval will allow formulas to be put in and calculated
var calculate = eval(document.getElementById("compText").value);
var answer = calculate;
document.getElementById("message").innerHTML = answer.toFixed(2);
//the .toFixed(2) will only display the answer with decimal places
}
catch(error) {
document.getElementById("message").innerHTML =
"Could not do conversion. Please enter number or complete formula only.";
}
}
//this function will allow the numbered buttons to enter in the value
//as they are clicked
function buildFormula() {
document.getElementById("compText").value += this.value;
//.value will work on a text box, not .innerHTML
}
**if you could put what changes I need to make in bold, I would appreciate it**
Explanation / Answer
If you have any doubts, please give me comment...
calculator.html -
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<meta name="description" content="A Javascript Calculator" />
<meta name="keywords" content="calculator, JavaScript, eval, try/catch,
exception, errors" />
<meta name="author" content="Cory Coleman" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="../calculator/star.png">
<link href="calculator.css" rel="stylesheet" />
<script src="calculator.js"></script>
</head>
<body class="calculator">
<header class="calculator">
<h1>JS Calculator</h1>
</header>
<nav>
<ul>
<li><a href="../index.html" target="_blank">Home</a></li>
<li><a href="../movies.html" target="_blank">My Movies</a></li>
<li><a href="../hobby.html" target="_blank">My Hobby</a></li>
<li class="dropnav"><a href="#">Other Pages</a>
<ul class="dropdown">
<li class="submenu"><a href="../animation.html" target="_blank">
Animation</a></li>
<li class="submenu"><a href="../youthshelter/youthshelter.html"
target="_blank">Youth Shelter</a></li>
<li class="submenu"><a href="../petcomp/petcomp.html" target="_blank">
Pet Competition Form</a></li>
<li class="submenu"><a href="../story/story.html" target="_blank">
Ad-lib Story</a></li>
<li class="submenu"><a href="../slideshow/slideshow.html"
target="_blank">Slideshow</a></li>
<li class="submenu"><a class="active" href="calculator.html"
target="_blank">JS Calculator</a></li>
</ul>
</li>
</ul>
</nav>
<h1 class="leadheader">JavaScript Calculator</h1>
<section class="mainContent">
<!--'readonly' will keep the element secure and not accessible-->
<p><input type="text" id="compText" readonly></p>
<h3 id="message">JS-18X</h3>
<p>
<button id="1" value="1" class="digit">1</button>
<button id="2" value="2" class="digit">2</button>
<button id="3" value="3" class="digit">3</button>
<button id="add" value="+" class="operator">+</button>
<br>
<button id="4" value="4" class="digit">4</button>
<button id="5" value="5" class="digit">5</button>
<button id="6" value="6" class="digit">6</button>
<button id="subtract" value="-" class="operator">-</button>
<br>
<button id="7" value="7" class="digit">7</button>
<button id="8" value="8" class="digit">8</button>
<button id="9" value="9" class="digit">9</button>
<button id="multiply" value="*" class="operator">X</button>
<br>
<button value="C" id="clearBtn">C</button>
<button id="zero" value="0" class="digit">0</button>
<button type="button" id="convertBtn">=</button>
<button id="divide" value="/" class="operator">/</button>
<br>
<button id="square" value="" class="operator">X<sup>2</sup></button>
<button id="half" value="" class="operator"><sup>1/2</sup></button>
<button id="area" value="" class="operator">area</button>
</p>
</section>
<footer class="footerstyle">
<p class="footer">Created by Cory Coleman</p>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img class="footer"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!"/>
</a>
</p>
</footer>
</body>
</html>
calculator.js -
window.addEventListener("load", function() {
document.getElementById("convertBtn").addEventListener("click", convert);
//will get all button values
var numbers = document.getElementsByClassName("digit");
var size = numbers.length; //gets length of array of numbers/button values
//loops through and adds an event listener to each of the buttons
for (var i = 0; i < size; i++) {
numbers[i].addEventListener("click", buildFormula);
}
//this will clear whatever value is in the text box &
//this will wire up the clear button to work when clicked on
document.getElementById("clearBtn").addEventListener("click", function() {
document.getElementById("compText").value = "";
});
//this will wire up the square button to work when clicked on
document.getElementById("square").addEventListener("click", function () {
document.getElementById("compText").value =
document.getElementById("compText").value + " * " +
document.getElementById("compText").value;
});
//this will wire up the half button to work when clicked on
document.getElementById("half").addEventListener("click", function () {
document.getElementById("compText").value =
document.getElementById("compText").value + " * " + 0.5;
});
//this will wire up the area or radius button to work when clicked on
document.getElementById("area").addEventListener("click", function () {
document.getElementById("compText").value =
document.getElementById("compText").value + " * " +
document.getElementById("compText").value + " * " + Math.PI
});
var operators = document.getElementsByClassName("operator");
size = operators.length;
for(var i = 0; i < size; i++) {
operators[i].addEventListener("click", function() {
document.getElementById("compText").value += " " + this.value + " ";
})
}
//will pull for all buttons
var buttons = document.getElementsByTagName("button");
size = buttons.length;
for(var i = 0; i < size; i++) {
buttons[i].addEventListener("focus", function() {
this.style.border = "4px #333C7C solid";
//adds border to button when it is clicked
})
buttons[i].addEventListener("blur", function() {
this.style.border = "4px #C2C6DF inset";
//brings border back to normal when another button is clicked
})
buttons[i].addEventListener("mouseover", function() {
this.style.backgroundColor = "#A89BBD";
//changes color when hovered over by mouse to show the button you are on
})
buttons[i].addEventListener("mouseout", function() {
this.style.backgroundColor = "white";
//changes back to original color when mouse cursor is no longer
//hovering over the button
})
}
});
//this function will convert the values entered into the text box
function convert() {
try { //eval will allow formulas to be put in and calculated
var calculate = eval(document.getElementById("compText").value);
var answer = calculate;
document.getElementById("compText").value = answer.toFixed(2);
//the .toFixed(2) will only display the answer with decimal places
}
catch(error) {
document.getElementById("message").innerHTML =
"Could not do conversion. Please enter number or complete formula only.";
}
}
//this function will allow the numbered buttons to enter in the value
//as they are clicked
function buildFormula() {
document.getElementById("compText").value += this.value;
//.value will work on a text box, not .innerHTML
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.