Trying to access HTML calculator w/ Higher Order Function and Callbacks
I have been working through the w3 challenges and I thought I could write the solution out better than they provided.
I wanted to obey DRY principles, so I created a callback for dividing and one for multiplying and made the principle function a HOF for each callback. However, for some reason It's not working, nor is it throwing an error. I've reviewed my code and so far haven't had any luck resolving it.
In a perfect world the HTML inputs would be either multiplying or dividing the code. Yet, nothing is happening.
Any ideas?
var userMultiply = function() {
document.getElementById("result").innerHTML = num1 * num2;
}
var userDivide = function() {
document.getElementById("result").innerHTML = num1 / num2;
}
function userMaths(callBack) {
let num1 = document.getElementById('firstNumber').value;
let num2 = document.getElementById('secondNumber').value;
}<form>
1st Number : <input type="text" id="firstNumber" /><br> 2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="userMaths(userMultiply)" Value="Multiply" />
<input type="button" onClick="userMaths(userDivide)" Value="Divide" />
<p>The result is: </p>
<span id="result"></span>
</form>
</body>javascript html dom
edited Jan 18 at 21:37
Taki
5,94021127
asked Jan 18 at 21:35
kevinkevin
1206
add a comment |
I have been working through the w3 challenges and I thought I could write the solution out better than they provided.
I wanted to obey DRY principles, so I created a callback for dividing and one for multiplying and made the principle function a HOF for each callback. However, for some reason It's not working, nor is it throwing an error. I've reviewed my code and so far haven't had any luck resolving it.
In a perfect world the HTML inputs would be either multiplying or dividing the code. Yet, nothing is happening.
Any ideas?
var userMultiply = function() {
document.getElementById("result").innerHTML = num1 * num2;
}
var userDivide = function() {
document.getElementById("result").innerHTML = num1 / num2;
}
function userMaths(callBack) {
let num1 = document.getElementById('firstNumber').value;
let num2 = document.getElementById('secondNumber').value;
}<form>
1st Number : <input type="text" id="firstNumber" /><br> 2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="userMaths(userMultiply)" Value="Multiply" />
<input type="button" onClick="userMaths(userDivide)" Value="Divide" />
<p>The result is: </p>
<span id="result"></span>
</form>
</body>javascript html dom
edited Jan 18 at 21:37
Taki
5,94021127
asked Jan 18 at 21:35
kevinkevin
1206
add a comment |
I have been working through the w3 challenges and I thought I could write the solution out better than they provided.
I wanted to obey DRY principles, so I created a callback for dividing and one for multiplying and made the principle function a HOF for each callback. However, for some reason It's not working, nor is it throwing an error. I've reviewed my code and so far haven't had any luck resolving it.
In a perfect world the HTML inputs would be either multiplying or dividing the code. Yet, nothing is happening.
Any ideas?
var userMultiply = function() {
document.getElementById("result").innerHTML = num1 * num2;
}
var userDivide = function() {
document.getElementById("result").innerHTML = num1 / num2;
}
function userMaths(callBack) {
let num1 = document.getElementById('firstNumber').value;
let num2 = document.getElementById('secondNumber').value;
}<form>
1st Number : <input type="text" id="firstNumber" /><br> 2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="userMaths(userMultiply)" Value="Multiply" />
<input type="button" onClick="userMaths(userDivide)" Value="Divide" />
<p>The result is: </p>
<span id="result"></span>
</form>
</body>javascript html dom
edited Jan 18 at 21:37
Taki
5,94021127
asked Jan 18 at 21:35
kevinkevin
1206
I have been working through the w3 challenges and I thought I could write the solution out better than they provided.
I wanted to obey DRY principles, so I created a callback for dividing and one for multiplying and made the principle function a HOF for each callback. However, for some reason It's not working, nor is it throwing an error. I've reviewed my code and so far haven't had any luck resolving it.
In a perfect world the HTML inputs would be either multiplying or dividing the code. Yet, nothing is happening.
Any ideas?
var userMultiply = function() {
document.getElementById("result").innerHTML = num1 * num2;
}
var userDivide = function() {
document.getElementById("result").innerHTML = num1 / num2;
}
function userMaths(callBack) {
let num1 = document.getElementById('firstNumber').value;
let num2 = document.getElementById('secondNumber').value;
}<form>
1st Number : <input type="text" id="firstNumber" /><br> 2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="userMaths(userMultiply)" Value="Multiply" />
<input type="button" onClick="userMaths(userDivide)" Value="Divide" />
<p>The result is: </p>
<span id="result"></span>
</form>
</body>var userMultiply = function() {
document.getElementById("result").innerHTML = num1 * num2;
}
var userDivide = function() {
document.getElementById("result").innerHTML = num1 / num2;
}
function userMaths(callBack) {
let num1 = document.getElementById('firstNumber').value;
let num2 = document.getElementById('secondNumber').value;
}<form>
1st Number : <input type="text" id="firstNumber" /><br> 2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="userMaths(userMultiply)" Value="Multiply" />
<input type="button" onClick="userMaths(userDivide)" Value="Divide" />
<p>The result is: </p>
<span id="result"></span>
</form>
</body>var userMultiply = function() {
document.getElementById("result").innerHTML = num1 * num2;
}
var userDivide = function() {
document.getElementById("result").innerHTML = num1 / num2;
}
function userMaths(callBack) {
let num1 = document.getElementById('firstNumber').value;
let num2 = document.getElementById('secondNumber').value;
}<form>
1st Number : <input type="text" id="firstNumber" /><br> 2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="userMaths(userMultiply)" Value="Multiply" />
<input type="button" onClick="userMaths(userDivide)" Value="Divide" />
<p>The result is: </p>
<span id="result"></span>
</form>
</body>javascript html dom
javascript html dom
edited Jan 18 at 21:37
Taki
5,94021127
asked Jan 18 at 21:35
kevinkevin
1206
edited Jan 18 at 21:37
Taki
5,94021127
asked Jan 18 at 21:35
kevinkevin
1206
edited Jan 18 at 21:37
Taki
5,94021127
edited Jan 18 at 21:37
Taki
5,94021127
edited Jan 18 at 21:37
Taki
5,94021127
5,94021127
asked Jan 18 at 21:35
kevinkevin
1206
asked Jan 18 at 21:35
kevinkevin
1206
asked Jan 18 at 21:35
kevinkevin
1206
1206
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Several problems:
- You never call the callback.
- The variables
num1andnum2are local variables inuserMaths, they can't be accessed fromuserMultiplyanduserDivide. You should pass them as parameters.
You should also convert the inputs to numbers with parseFloat(). Operators like * and / do this automatically, but you'll run into a problem when you add userAdd, because + will do string concatenation instead of addition.
You might also want to move the code that displays the result into userMaths, since it's the same for all operations.
var userMultiply = function(num1, num2) {
return num1 * num2;
}
var userDivide = function(num1, num2) {
return num1 / num2;
}
function userMaths(callBack) {
let num1 = parseFloat(document.getElementById('firstNumber').value);
let num2 = parseFloat(document.getElementById('secondNumber').value);
document.getElementById("result").innerHTML = callBack(num1, num2);
}<form>
1st Number : <input type="text" id="firstNumber" /><br> 2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="userMaths(userMultiply)" Value="Multiply" />
<input type="button" onClick="userMaths(userDivide)" Value="Divide" />
<p>The result is: </p>
<span id="result"></span>
</form>answered Jan 18 at 21:41
BarmarBarmar
424k35248349
Ah, thank you! I appreciate the help and the tips!
– kevin
Jan 18 at 21:54
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54261719%2ftrying-to-access-html-calculator-w-higher-order-function-and-callbacks%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Several problems:
- You never call the callback.
- The variables
num1andnum2are local variables inuserMaths, they can't be accessed fromuserMultiplyanduserDivide. You should pass them as parameters.
You should also convert the inputs to numbers with parseFloat(). Operators like * and / do this automatically, but you'll run into a problem when you add userAdd, because + will do string concatenation instead of addition.
You might also want to move the code that displays the result into userMaths, since it's the same for all operations.
var userMultiply = function(num1, num2) {
return num1 * num2;
}
var userDivide = function(num1, num2) {
return num1 / num2;
}
function userMaths(callBack) {
let num1 = parseFloat(document.getElementById('firstNumber').value);
let num2 = parseFloat(document.getElementById('secondNumber').value);
document.getElementById("result").innerHTML = callBack(num1, num2);
}<form>
1st Number : <input type="text" id="firstNumber" /><br> 2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="userMaths(userMultiply)" Value="Multiply" />
<input type="button" onClick="userMaths(userDivide)" Value="Divide" />
<p>The result is: </p>
<span id="result"></span>
</form>answered Jan 18 at 21:41
BarmarBarmar
424k35248349
Ah, thank you! I appreciate the help and the tips!
– kevin
Jan 18 at 21:54
add a comment |
Several problems:
- You never call the callback.
- The variables
num1andnum2are local variables inuserMaths, they can't be accessed fromuserMultiplyanduserDivide. You should pass them as parameters.
You should also convert the inputs to numbers with parseFloat(). Operators like * and / do this automatically, but you'll run into a problem when you add userAdd, because + will do string concatenation instead of addition.
You might also want to move the code that displays the result into userMaths, since it's the same for all operations.
var userMultiply = function(num1, num2) {
return num1 * num2;
}
var userDivide = function(num1, num2) {
return num1 / num2;
}
function userMaths(callBack) {
let num1 = parseFloat(document.getElementById('firstNumber').value);
let num2 = parseFloat(document.getElementById('secondNumber').value);
document.getElementById("result").innerHTML = callBack(num1, num2);
}<form>
1st Number : <input type="text" id="firstNumber" /><br> 2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="userMaths(userMultiply)" Value="Multiply" />
<input type="button" onClick="userMaths(userDivide)" Value="Divide" />
<p>The result is: </p>
<span id="result"></span>
</form>answered Jan 18 at 21:41
BarmarBarmar
424k35248349
Ah, thank you! I appreciate the help and the tips!
– kevin
Jan 18 at 21:54
add a comment |
Several problems:
- You never call the callback.
- The variables
num1andnum2are local variables inuserMaths, they can't be accessed fromuserMultiplyanduserDivide. You should pass them as parameters.
You should also convert the inputs to numbers with parseFloat(). Operators like * and / do this automatically, but you'll run into a problem when you add userAdd, because + will do string concatenation instead of addition.
You might also want to move the code that displays the result into userMaths, since it's the same for all operations.
var userMultiply = function(num1, num2) {
return num1 * num2;
}
var userDivide = function(num1, num2) {
return num1 / num2;
}
function userMaths(callBack) {
let num1 = parseFloat(document.getElementById('firstNumber').value);
let num2 = parseFloat(document.getElementById('secondNumber').value);
document.getElementById("result").innerHTML = callBack(num1, num2);
}<form>
1st Number : <input type="text" id="firstNumber" /><br> 2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="userMaths(userMultiply)" Value="Multiply" />
<input type="button" onClick="userMaths(userDivide)" Value="Divide" />
<p>The result is: </p>
<span id="result"></span>
</form>answered Jan 18 at 21:41
BarmarBarmar
424k35248349
Several problems:
- You never call the callback.
- The variables
num1andnum2are local variables inuserMaths, they can't be accessed fromuserMultiplyanduserDivide. You should pass them as parameters.
You should also convert the inputs to numbers with parseFloat(). Operators like * and / do this automatically, but you'll run into a problem when you add userAdd, because + will do string concatenation instead of addition.
You might also want to move the code that displays the result into userMaths, since it's the same for all operations.
var userMultiply = function(num1, num2) {
return num1 * num2;
}
var userDivide = function(num1, num2) {
return num1 / num2;
}
function userMaths(callBack) {
let num1 = parseFloat(document.getElementById('firstNumber').value);
let num2 = parseFloat(document.getElementById('secondNumber').value);
document.getElementById("result").innerHTML = callBack(num1, num2);
}<form>
1st Number : <input type="text" id="firstNumber" /><br> 2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="userMaths(userMultiply)" Value="Multiply" />
<input type="button" onClick="userMaths(userDivide)" Value="Divide" />
<p>The result is: </p>
<span id="result"></span>
</form>var userMultiply = function(num1, num2) {
return num1 * num2;
}
var userDivide = function(num1, num2) {
return num1 / num2;
}
function userMaths(callBack) {
let num1 = parseFloat(document.getElementById('firstNumber').value);
let num2 = parseFloat(document.getElementById('secondNumber').value);
document.getElementById("result").innerHTML = callBack(num1, num2);
}<form>
1st Number : <input type="text" id="firstNumber" /><br> 2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="userMaths(userMultiply)" Value="Multiply" />
<input type="button" onClick="userMaths(userDivide)" Value="Divide" />
<p>The result is: </p>
<span id="result"></span>
</form>var userMultiply = function(num1, num2) {
return num1 * num2;
}
var userDivide = function(num1, num2) {
return num1 / num2;
}
function userMaths(callBack) {
let num1 = parseFloat(document.getElementById('firstNumber').value);
let num2 = parseFloat(document.getElementById('secondNumber').value);
document.getElementById("result").innerHTML = callBack(num1, num2);
}<form>
1st Number : <input type="text" id="firstNumber" /><br> 2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="userMaths(userMultiply)" Value="Multiply" />
<input type="button" onClick="userMaths(userDivide)" Value="Divide" />
<p>The result is: </p>
<span id="result"></span>
</form>answered Jan 18 at 21:41
BarmarBarmar
424k35248349
edited Jan 18 at 21:47
answered Jan 18 at 21:41
BarmarBarmar
424k35248349
answered Jan 18 at 21:41
BarmarBarmar
424k35248349
answered Jan 18 at 21:41
BarmarBarmar
424k35248349
424k35248349
Ah, thank you! I appreciate the help and the tips!
– kevin
Jan 18 at 21:54
add a comment |
Ah, thank you! I appreciate the help and the tips!
– kevin
Jan 18 at 21:54
Ah, thank you! I appreciate the help and the tips!
– kevin
Jan 18 at 21:54
Ah, thank you! I appreciate the help and the tips!
– kevin
Jan 18 at 21:54
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54261719%2ftrying-to-access-html-calculator-w-higher-order-function-and-callbacks%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
