admin管理员组文章数量:1335656
I have a school project that is asking me to build a basic Javascript calculator using if/else statements. I’m very new to this language (and programming in general) and am having trouble with applying the syntax I have learned and how to successfully problem solve.
So on to the code: As you will see in the ments in the HTML file, all javascript code must be in the js file. First, I need to bind the onclick events by adding code to get all the input elements into an Array called inputs (which I have done) and then use a for-loop to iterate through an array (which I have started) . Then, in the for-loop, I need to use if/else statement to skip the input elements that are not buttons, and set the other input elements’ onclick handler to a function that calls the calcu variable inside of it. This is where I get stuck on how to acplish this task.
I also need to make sure to pass the inputs[i].id to the calcu as well. Then of course, I have to finish the calcu() function using if/else statements.
In the js file, I have inserted ments to show my thought process and questions I have asked myself to work through the problem.
I would really appreciate any help or direction you can give me. Thanks!
var calcu = function(calcValue) {
/* "calc.output.value += "1";"" use to output numbers? */
if (calcValue) {
}
};
document.getElementById(inputs[i].id).onclick = calcu;
for (var i = 0; i <= inputs[id].length, i++) {
/* input button elements onlick handler needs to be set to (equal to?) a
function that calls the calcu variable inside of it */
if (input.type = button) {
console.log()
/* Need input that is not a button to be skipped*/
} else(input.type != button) {
}
}<body>
<div id="content">
<div id="calculator-container">
<!-- DO NOT CHANGE THE FORM! Only use external JavaScript files -->
<form name="calc">
<label for="output">A Basic Calculator</label>
<!-- the name of the textbox is "output" -->
<input id="output" name="output" type="text" readonly>
<br>
<input type="button" id="1" value=" 1 ">
<input type="button" id="2" value=" 2 ">
<input type="button" id="3" value=" 3 ">
<input type="button" id="+" value=" + ">
<br>
<input type="button" id="4" value=" 4 ">
<input type="button" id="5" value=" 5 ">
<input type="button" id="6" value=" 6 ">
<input type="button" id="-" value=" - ">
<br>
<input type="button" id="7" value=" 7 ">
<input type="button" id="8" value=" 8 ">
<input type="button" id="9" value=" 9 ">
<input type="button" id="*" value=" x ">
<br>
<input type="button" id="c" value=" C ">
<input type="button" id="0" value=" 0 ">
<input type="button" id="equate" value=" = ">
<input type="button" id="/" value="÷">
</form>
</div>
</div>
</body>I have a school project that is asking me to build a basic Javascript calculator using if/else statements. I’m very new to this language (and programming in general) and am having trouble with applying the syntax I have learned and how to successfully problem solve.
So on to the code: As you will see in the ments in the HTML file, all javascript code must be in the js file. First, I need to bind the onclick events by adding code to get all the input elements into an Array called inputs (which I have done) and then use a for-loop to iterate through an array (which I have started) . Then, in the for-loop, I need to use if/else statement to skip the input elements that are not buttons, and set the other input elements’ onclick handler to a function that calls the calcu variable inside of it. This is where I get stuck on how to acplish this task.
I also need to make sure to pass the inputs[i].id to the calcu as well. Then of course, I have to finish the calcu() function using if/else statements.
In the js file, I have inserted ments to show my thought process and questions I have asked myself to work through the problem.
I would really appreciate any help or direction you can give me. Thanks!
var calcu = function(calcValue) {
/* "calc.output.value += "1";"" use to output numbers? */
if (calcValue) {
}
};
document.getElementById(inputs[i].id).onclick = calcu;
for (var i = 0; i <= inputs[id].length, i++) {
/* input button elements onlick handler needs to be set to (equal to?) a
function that calls the calcu variable inside of it */
if (input.type = button) {
console.log()
/* Need input that is not a button to be skipped*/
} else(input.type != button) {
}
}<body>
<div id="content">
<div id="calculator-container">
<!-- DO NOT CHANGE THE FORM! Only use external JavaScript files -->
<form name="calc">
<label for="output">A Basic Calculator</label>
<!-- the name of the textbox is "output" -->
<input id="output" name="output" type="text" readonly>
<br>
<input type="button" id="1" value=" 1 ">
<input type="button" id="2" value=" 2 ">
<input type="button" id="3" value=" 3 ">
<input type="button" id="+" value=" + ">
<br>
<input type="button" id="4" value=" 4 ">
<input type="button" id="5" value=" 5 ">
<input type="button" id="6" value=" 6 ">
<input type="button" id="-" value=" - ">
<br>
<input type="button" id="7" value=" 7 ">
<input type="button" id="8" value=" 8 ">
<input type="button" id="9" value=" 9 ">
<input type="button" id="*" value=" x ">
<br>
<input type="button" id="c" value=" C ">
<input type="button" id="0" value=" 0 ">
<input type="button" id="equate" value=" = ">
<input type="button" id="/" value="÷">
</form>
</div>
</div>
</body>-
2
input.type = buttonassignsinput.typewith the value of whateverbuttonis (undefined in your code) ... andelse(input.type != button)... else does not take arguments ... did you meanelse if(input.type != button)– Jaromanda X Commented May 25, 2018 at 6:06 - How are you defining the array called inputs? – ZerosAndOnes Commented May 25, 2018 at 6:33
- 2 You can use an IDE or online tools like jsfiddle to find syntax errors in your code, which are plenty. You can instead take inputs = document.getElementsByTagName("input") and loop through inputs. Currently your input is not assigned any value – Kiran Commented May 25, 2018 at 6:35
- Kiran, thank you and I fill kind of silly for not thinking about using the getElementsTagName method. That helps. – Elisabeth Commented May 25, 2018 at 21:27
3 Answers
Reset to default 2I found some basic mistakes like ; or = missing also if you want to put condition in else part than you must have to use else if condition. you need to pass input value now in for loop properly.
var calcu = function(calcValue) {
if (calcValue) {
}
}
document.getElementById(inputs[i].id).onclick = calcu;
for (var i = 0; i <= inputs[id].length; i++)
{
if (input.type == button)
{
console.log();
}
else if(input.type != button) {
}
}
Here is your html code.
<body>
<div id="content">
<div id="calculator-container">
<!-- DO NOT CHANGE THE FORM! Only use external JavaScript files -->
<form name="calc">
<label for="output">A Basic Calculator</label>
<!-- the name of the textbox is "output" -->
<input id="output" name="output" type="text" readonly>
<br>
<input type="button" id="1" value=" 1 ">
<input type="button" id="2" value=" 2 ">
<input type="button" id="3" value=" 3 ">
<input type="button" id="+" value=" + ">
<br>
<input type="button" id="4" value=" 4 ">
<input type="button" id="5" value=" 5 ">
<input type="button" id="6" value=" 6 ">
<input type="button" id="-" value=" - ">
<br>
<input type="button" id="7" value=" 7 ">
<input type="button" id="8" value=" 8 ">
<input type="button" id="9" value=" 9 ">
<input type="button" id="*" value=" x ">
<br>
<input type="button" id="c" value=" C ">
<input type="button" id="0" value=" 0 ">
<input type="button" id="equate" value=" = ">
<input type="button" id="/" value="÷">
</form>
</div>
</div>
</body>
Hope this will help you.
Well, I guess it is 'homework' from your school.
I assume this calculator is supposed to execute multiplication and division before addition and subtraction.
If I were you, I would approach the task in the following order:
- Store user inputs to
inputs - When the user presses
=, it iteratesinputsand execute calculation. While executing calculation, declare a temporary variable that keeps an updated value after each calculation. If instructed, you should perform multiplication and division prior to addition and subtraction.
outputs the calculated value
There could be few points where you would get stuck:
- You need to convert user inputs to proper number. For example, inputs of
3, 5, 1needs to be transformed into351 - You need to find a proper way to perform multiplication and division before addition and subtraction while iterating
inputsarray.
Happy coding ~
Create calculator using if else conditions in javascript
const operator = ( '/' );
const num1 = 1;
const num2 = 2;
let result;
if (operator == '+') {
result = num1 + num2;
} else if (operator == '-') {
result = num1 - num2;
} else if (operator == '*') {
result = num1 * num2;
} else {
result = num1 / num2;
}
//console.log(`${num1} ${operator} ${num2} = ${result}`);
console.log(`${num1}${operator}${num2}= ${result}`);
本文标签： Javascript Calculator using ifelse statementsStack Overflow
版权声明：本文标题：Javascript Calculator using ifelse statements - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742390932a2465975.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论