Mixing
How Do I get the user input to be run in the function on click event?
7
I have gotten the code to semi work but when it does it creates an infinite loop.
I tried comparing the datatype of the user input. I could not wrap my head around it conceptually so I am comparing numbers instead.
HTML:
let button = document.getElementById("button")
var input = document.getElementById("number_of_souls").getElementById("takeinput").value
let user_number = function() {
for (let i = 1; i < 1; i++) {
if (9000 <= input) {
alert("Not many souls")
} else 9000.1 >= input
alert["That's over 9,000!"]
}
}
button.addEventListener("click", user_number)<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>This is for a fan-page project in Darksouls. The question asked is "How many souls have you acquired? Once the user submits a number it should take the number and return an alert with "Not Many souls" or "That's over 9,000".
javascript html
edited Jan 11 at 21:25
msanford
6,72964465
asked Jan 11 at 21:20
LimitlessmatrixLimitlessmatrix
417
add a comment |
7
I have gotten the code to semi work but when it does it creates an infinite loop.
I tried comparing the datatype of the user input. I could not wrap my head around it conceptually so I am comparing numbers instead.
HTML:
let button = document.getElementById("button")
var input = document.getElementById("number_of_souls").getElementById("takeinput").value
let user_number = function() {
for (let i = 1; i < 1; i++) {
if (9000 <= input) {
alert("Not many souls")
} else 9000.1 >= input
alert["That's over 9,000!"]
}
}
button.addEventListener("click", user_number)<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>This is for a fan-page project in Darksouls. The question asked is "How many souls have you acquired? Once the user submits a number it should take the number and return an alert with "Not Many souls" or "That's over 9,000".
javascript html
edited Jan 11 at 21:25
msanford
6,72964465
asked Jan 11 at 21:20
LimitlessmatrixLimitlessmatrix
417
2
Hi! I converted your code into a snippet to make it runnable and slightly easier to answer. You can add them with the<>button in the question editor. Also, purely a style point, I think most people find yoda conditions odd to read.
– msanford
Jan 11 at 21:27
add a comment |
7
7
7
I have gotten the code to semi work but when it does it creates an infinite loop.
I tried comparing the datatype of the user input. I could not wrap my head around it conceptually so I am comparing numbers instead.
HTML:
let button = document.getElementById("button")
var input = document.getElementById("number_of_souls").getElementById("takeinput").value
let user_number = function() {
for (let i = 1; i < 1; i++) {
if (9000 <= input) {
alert("Not many souls")
} else 9000.1 >= input
alert["That's over 9,000!"]
}
}
button.addEventListener("click", user_number)<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>This is for a fan-page project in Darksouls. The question asked is "How many souls have you acquired? Once the user submits a number it should take the number and return an alert with "Not Many souls" or "That's over 9,000".
javascript html
edited Jan 11 at 21:25
msanford
6,72964465
asked Jan 11 at 21:20
LimitlessmatrixLimitlessmatrix
417
I have gotten the code to semi work but when it does it creates an infinite loop.
I tried comparing the datatype of the user input. I could not wrap my head around it conceptually so I am comparing numbers instead.
HTML:
let button = document.getElementById("button")
var input = document.getElementById("number_of_souls").getElementById("takeinput").value
let user_number = function() {
for (let i = 1; i < 1; i++) {
if (9000 <= input) {
alert("Not many souls")
} else 9000.1 >= input
alert["That's over 9,000!"]
}
}
button.addEventListener("click", user_number)<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>This is for a fan-page project in Darksouls. The question asked is "How many souls have you acquired? Once the user submits a number it should take the number and return an alert with "Not Many souls" or "That's over 9,000".
let button = document.getElementById("button")
var input = document.getElementById("number_of_souls").getElementById("takeinput").value
let user_number = function() {
for (let i = 1; i < 1; i++) {
if (9000 <= input) {
alert("Not many souls")
} else 9000.1 >= input
alert["That's over 9,000!"]
}
}
button.addEventListener("click", user_number)<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>let button = document.getElementById("button")
var input = document.getElementById("number_of_souls").getElementById("takeinput").value
let user_number = function() {
for (let i = 1; i < 1; i++) {
if (9000 <= input) {
alert("Not many souls")
} else 9000.1 >= input
alert["That's over 9,000!"]
}
}
button.addEventListener("click", user_number)<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>javascript html
javascript html
edited Jan 11 at 21:25
msanford
6,72964465
asked Jan 11 at 21:20
LimitlessmatrixLimitlessmatrix
417
edited Jan 11 at 21:25
msanford
6,72964465
asked Jan 11 at 21:20
LimitlessmatrixLimitlessmatrix
417
edited Jan 11 at 21:25
msanford
6,72964465
edited Jan 11 at 21:25
msanford
6,72964465
edited Jan 11 at 21:25
msanford
6,72964465
6,72964465
asked Jan 11 at 21:20
LimitlessmatrixLimitlessmatrix
417
asked Jan 11 at 21:20
LimitlessmatrixLimitlessmatrix
417
asked Jan 11 at 21:20
LimitlessmatrixLimitlessmatrix
417
417
2
Hi! I converted your code into a snippet to make it runnable and slightly easier to answer. You can add them with the<>button in the question editor. Also, purely a style point, I think most people find yoda conditions odd to read.
– msanford
Jan 11 at 21:27
add a comment |
2
Hi! I converted your code into a snippet to make it runnable and slightly easier to answer. You can add them with the<>button in the question editor. Also, purely a style point, I think most people find yoda conditions odd to read.
– msanford
Jan 11 at 21:27
2
2
Hi! I converted your code into a snippet to make it runnable and slightly easier to answer. You can add them with the
<> button in the question editor. Also, purely a style point, I think most people find yoda conditions odd to read.– msanford
Jan 11 at 21:27
Hi! I converted your code into a snippet to make it runnable and slightly easier to answer. You can add them with the
<> button in the question editor. Also, purely a style point, I think most people find yoda conditions odd to read.– msanford
Jan 11 at 21:27
add a comment |
4 Answers
4
active
oldest
votes
10
No need for the for loop, also you need to get the input value after clicking the button
Also, add type="button" to your button to allow it to be clicked without submitting the form, if that's what you want
let button = document.getElementById("button")
let user_number= function(){
var input = document.getElementById("takeinput").value
if (input<=9000) alert("Not many souls")
else alert("That's over 9,000!")
}
button.addEventListener("click", user_number)<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button" type="button">submit</button>
</form>
</div>Edit: As msanford said in the comments, the if/else there shows a little bit of an anomaly in javascript syntax. Those statements are equivalent to:
if (input<=9000) {
alert("Not many souls")
}
else {
alert("That's over 9,000!")
}
answered Jan 11 at 21:25
AsthmaticAsthmatic
803417
Thank you that's very useful information.
– Limitlessmatrix
Jan 11 at 22:24
Nice touch to also fix the incorrect if.
– Voo
Jan 11 at 23:53
add a comment |
3
As pointed out by other answers, the loop is not required, you can simply compare numbers. Also don't forget to convert a string value from the input to a number (e.g. by using parseInt before performing a comparison). Besides, unless you want a browser to submit the form, don't forget to call preventDefault on the fired event.
const user_number = (e) => {
e.preventDefault();
const value = parseInt(document.getElementById('takeinput').value, 10);
const message = (9000 >= value) ? 'Not many souls' : 'Thats over 9,000!';
alert(message);
}
const button = document.getElementById('button');
button.addEventListener('click', user_number);<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>As a fan of dark soul series couldn't keep from participating :)
answered Jan 11 at 21:34
antonkuantonku
1,132137
Would you tell me what the 10 is for?
– Limitlessmatrix
Jan 11 at 22:45
This is on line const value = parseInt(document.getElementById('takeinput').value, 10);
– Limitlessmatrix
Jan 11 at 22:45
2
@Limitlessmatrix that parameter controls what radix to use in parsing the string input the 10 indicates it should treat the input as decimal.
– Mr.Mindor
Jan 11 at 23:02
@Limitlessmatrix Everything is as @Mr.Mindor said, just wanted to add, that nowadays, specifying the radix explicitly (as I did) may seem redundant, but it did make sense before. Previously many ECMAScript 3 implementations treated string numbers that start with0as octal if radix was not specified. But since ECMAScript 5 it's no longer an issue.
– antonku
Jan 12 at 0:27
add a comment |
1
Because you're learning JavaScript, I'm going to take this opportunity to do a short code review, specifically of this block:
for (let i = 1; i < 1; i++) {
if (9000 <= input) {
alert("Not many souls")
} else 9000.1 >= input
alert["That's over 9,000!"]
}
- As others have said, no need for a
forloop. - The other syntax some have elegantly proposed is called a ternary operator (
?:), which is also nice. In Python that's written more verbosely asprint "Lots of souls!" if input >= 9000 else print "Not many souls"(whose only advantage over a regular if/else is that it can be written on a single line). - Offsetting the numeric value you check for in if/else conditions is the wrong way to approach what ranges of values to include. The logic you want to apply is "Is what the user entered equal to over over 9000 or not". So don't use
>=and<=with a different number, use>=and<with the same number. - That said, don't use any number; an
elseis enough and captures the "or not" of your logical condition. - Your
else 9000.1 >= inputis not a condition, it meanselse {9000.1 >= input}, you probably meantelse if(but see above - you don't need any condition). - Unlike Python, a block in JavaScript is surrounded by
{}. While it is legal to write single-line if/else without braces if the code it runs is only a single statement, it's not idiomatic and almost always a bad idea.
Compare
const a = 1;
if (a > 0)
console.log("Higher than 0");
else
console.log("Not higher than 0");with
const a = 1;
if (a > 0)
console.log("Higher than 0");
console.log("Another line");
else
console.log("Not higher than 0");That second one doesn't work. Get used to putting braces around blocks from the start, so that you don't forget to add them when you add more code.
alert["That's over 9,000!"]? You meanalert().alert["That's over 9,000!"]looks for a key on a global variablealertcalledThat's over 9,000!and doesn't call a function.- On that note, don't use
alert(). Get used to using the DevTools console,console.log(),console.dir()(for objects) and the debugger. It will serve you much better when your code gets more complex, uses pretty standard debugging methods common in other environments, and it's really not that hard to learn. Start here https://developers.google.com/web/tools/chrome-devtools/javascript/
add a comment |
0
Just compare the input value with the value 9000 when the button is click. All you need is 5 lines (or less if you skip creating a variable for input) like this:
/* JavaScript */
var input = document.getElementById("takeinput");
function checkSoul() {
alert( (input.value < 9000) ? "not enough souls" : "Too much souls" );
}
document.getElementById("button").addEventListener("click", checkSoul);<!-- HTML -->
<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>You can shorten this further to just two lines (or less if you skip creating a variable for input) using ES6 like this:
/* JavaScript */
var input = document.getElementById("takeinput");
document.getElementById("button").addEventListener("click", () => { alert( (input.value < 9000) ? "not enough souls" : "Too much souls" ) });<!-- HTML -->
<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>N.B. If you are planning to use ES6, you'll need Babel to compile your ES6 to ES5 before pushing your JavaScript to production though since browsers don't support ES6 yet).
answered Jan 11 at 21:31
AndrewL64AndrewL64
9,83041844
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
});
}
});
draft saved
draft discarded
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%2f54154191%2fhow-do-i-get-the-user-input-to-be-run-in-the-function-on-click-event%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
10
No need for the for loop, also you need to get the input value after clicking the button
Also, add type="button" to your button to allow it to be clicked without submitting the form, if that's what you want
let button = document.getElementById("button")
let user_number= function(){
var input = document.getElementById("takeinput").value
if (input<=9000) alert("Not many souls")
else alert("That's over 9,000!")
}
button.addEventListener("click", user_number)<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button" type="button">submit</button>
</form>
</div>Edit: As msanford said in the comments, the if/else there shows a little bit of an anomaly in javascript syntax. Those statements are equivalent to:
if (input<=9000) {
alert("Not many souls")
}
else {
alert("That's over 9,000!")
}
answered Jan 11 at 21:25
AsthmaticAsthmatic
803417
Thank you that's very useful information.
– Limitlessmatrix
Jan 11 at 22:24
Nice touch to also fix the incorrect if.
– Voo
Jan 11 at 23:53
add a comment |
10
No need for the for loop, also you need to get the input value after clicking the button
Also, add type="button" to your button to allow it to be clicked without submitting the form, if that's what you want
let button = document.getElementById("button")
let user_number= function(){
var input = document.getElementById("takeinput").value
if (input<=9000) alert("Not many souls")
else alert("That's over 9,000!")
}
button.addEventListener("click", user_number)<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button" type="button">submit</button>
</form>
</div>Edit: As msanford said in the comments, the if/else there shows a little bit of an anomaly in javascript syntax. Those statements are equivalent to:
if (input<=9000) {
alert("Not many souls")
}
else {
alert("That's over 9,000!")
}
answered Jan 11 at 21:25
AsthmaticAsthmatic
803417
Thank you that's very useful information.
– Limitlessmatrix
Jan 11 at 22:24
Nice touch to also fix the incorrect if.
– Voo
Jan 11 at 23:53
add a comment |
10
10
10
No need for the for loop, also you need to get the input value after clicking the button
Also, add type="button" to your button to allow it to be clicked without submitting the form, if that's what you want
let button = document.getElementById("button")
let user_number= function(){
var input = document.getElementById("takeinput").value
if (input<=9000) alert("Not many souls")
else alert("That's over 9,000!")
}
button.addEventListener("click", user_number)<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button" type="button">submit</button>
</form>
</div>Edit: As msanford said in the comments, the if/else there shows a little bit of an anomaly in javascript syntax. Those statements are equivalent to:
if (input<=9000) {
alert("Not many souls")
}
else {
alert("That's over 9,000!")
}
answered Jan 11 at 21:25
AsthmaticAsthmatic
803417
No need for the for loop, also you need to get the input value after clicking the button
Also, add type="button" to your button to allow it to be clicked without submitting the form, if that's what you want
let button = document.getElementById("button")
let user_number= function(){
var input = document.getElementById("takeinput").value
if (input<=9000) alert("Not many souls")
else alert("That's over 9,000!")
}
button.addEventListener("click", user_number)<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button" type="button">submit</button>
</form>
</div>Edit: As msanford said in the comments, the if/else there shows a little bit of an anomaly in javascript syntax. Those statements are equivalent to:
if (input<=9000) {
alert("Not many souls")
}
else {
alert("That's over 9,000!")
}
let button = document.getElementById("button")
let user_number= function(){
var input = document.getElementById("takeinput").value
if (input<=9000) alert("Not many souls")
else alert("That's over 9,000!")
}
button.addEventListener("click", user_number)<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button" type="button">submit</button>
</form>
</div>let button = document.getElementById("button")
let user_number= function(){
var input = document.getElementById("takeinput").value
if (input<=9000) alert("Not many souls")
else alert("That's over 9,000!")
}
button.addEventListener("click", user_number)<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button" type="button">submit</button>
</form>
</div>answered Jan 11 at 21:25
AsthmaticAsthmatic
803417
edited Jan 11 at 21:45
answered Jan 11 at 21:25
AsthmaticAsthmatic
803417
answered Jan 11 at 21:25
AsthmaticAsthmatic
803417
answered Jan 11 at 21:25
AsthmaticAsthmatic
803417
803417
Thank you that's very useful information.
– Limitlessmatrix
Jan 11 at 22:24
Nice touch to also fix the incorrect if.
– Voo
Jan 11 at 23:53
add a comment |
Thank you that's very useful information.
– Limitlessmatrix
Jan 11 at 22:24
Nice touch to also fix the incorrect if.
– Voo
Jan 11 at 23:53
Thank you that's very useful information.
– Limitlessmatrix
Jan 11 at 22:24
Thank you that's very useful information.
– Limitlessmatrix
Jan 11 at 22:24
Nice touch to also fix the incorrect if.
– Voo
Jan 11 at 23:53
Nice touch to also fix the incorrect if.
– Voo
Jan 11 at 23:53
add a comment |
3
As pointed out by other answers, the loop is not required, you can simply compare numbers. Also don't forget to convert a string value from the input to a number (e.g. by using parseInt before performing a comparison). Besides, unless you want a browser to submit the form, don't forget to call preventDefault on the fired event.
const user_number = (e) => {
e.preventDefault();
const value = parseInt(document.getElementById('takeinput').value, 10);
const message = (9000 >= value) ? 'Not many souls' : 'Thats over 9,000!';
alert(message);
}
const button = document.getElementById('button');
button.addEventListener('click', user_number);<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>As a fan of dark soul series couldn't keep from participating :)
answered Jan 11 at 21:34
antonkuantonku
1,132137
Would you tell me what the 10 is for?
– Limitlessmatrix
Jan 11 at 22:45
This is on line const value = parseInt(document.getElementById('takeinput').value, 10);
– Limitlessmatrix
Jan 11 at 22:45
2
@Limitlessmatrix that parameter controls what radix to use in parsing the string input the 10 indicates it should treat the input as decimal.
– Mr.Mindor
Jan 11 at 23:02
@Limitlessmatrix Everything is as @Mr.Mindor said, just wanted to add, that nowadays, specifying the radix explicitly (as I did) may seem redundant, but it did make sense before. Previously many ECMAScript 3 implementations treated string numbers that start with0as octal if radix was not specified. But since ECMAScript 5 it's no longer an issue.
– antonku
Jan 12 at 0:27
add a comment |
3
As pointed out by other answers, the loop is not required, you can simply compare numbers. Also don't forget to convert a string value from the input to a number (e.g. by using parseInt before performing a comparison). Besides, unless you want a browser to submit the form, don't forget to call preventDefault on the fired event.
const user_number = (e) => {
e.preventDefault();
const value = parseInt(document.getElementById('takeinput').value, 10);
const message = (9000 >= value) ? 'Not many souls' : 'Thats over 9,000!';
alert(message);
}
const button = document.getElementById('button');
button.addEventListener('click', user_number);<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>As a fan of dark soul series couldn't keep from participating :)
answered Jan 11 at 21:34
antonkuantonku
1,132137
Would you tell me what the 10 is for?
– Limitlessmatrix
Jan 11 at 22:45
This is on line const value = parseInt(document.getElementById('takeinput').value, 10);
– Limitlessmatrix
Jan 11 at 22:45
2
@Limitlessmatrix that parameter controls what radix to use in parsing the string input the 10 indicates it should treat the input as decimal.
– Mr.Mindor
Jan 11 at 23:02
@Limitlessmatrix Everything is as @Mr.Mindor said, just wanted to add, that nowadays, specifying the radix explicitly (as I did) may seem redundant, but it did make sense before. Previously many ECMAScript 3 implementations treated string numbers that start with0as octal if radix was not specified. But since ECMAScript 5 it's no longer an issue.
– antonku
Jan 12 at 0:27
add a comment |
3
3
3
As pointed out by other answers, the loop is not required, you can simply compare numbers. Also don't forget to convert a string value from the input to a number (e.g. by using parseInt before performing a comparison). Besides, unless you want a browser to submit the form, don't forget to call preventDefault on the fired event.
const user_number = (e) => {
e.preventDefault();
const value = parseInt(document.getElementById('takeinput').value, 10);
const message = (9000 >= value) ? 'Not many souls' : 'Thats over 9,000!';
alert(message);
}
const button = document.getElementById('button');
button.addEventListener('click', user_number);<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>As a fan of dark soul series couldn't keep from participating :)
answered Jan 11 at 21:34
antonkuantonku
1,132137
As pointed out by other answers, the loop is not required, you can simply compare numbers. Also don't forget to convert a string value from the input to a number (e.g. by using parseInt before performing a comparison). Besides, unless you want a browser to submit the form, don't forget to call preventDefault on the fired event.
const user_number = (e) => {
e.preventDefault();
const value = parseInt(document.getElementById('takeinput').value, 10);
const message = (9000 >= value) ? 'Not many souls' : 'Thats over 9,000!';
alert(message);
}
const button = document.getElementById('button');
button.addEventListener('click', user_number);<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>As a fan of dark soul series couldn't keep from participating :)
const user_number = (e) => {
e.preventDefault();
const value = parseInt(document.getElementById('takeinput').value, 10);
const message = (9000 >= value) ? 'Not many souls' : 'Thats over 9,000!';
alert(message);
}
const button = document.getElementById('button');
button.addEventListener('click', user_number);<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>const user_number = (e) => {
e.preventDefault();
const value = parseInt(document.getElementById('takeinput').value, 10);
const message = (9000 >= value) ? 'Not many souls' : 'Thats over 9,000!';
alert(message);
}
const button = document.getElementById('button');
button.addEventListener('click', user_number);<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>answered Jan 11 at 21:34
antonkuantonku
1,132137
edited Jan 12 at 0:48
answered Jan 11 at 21:34
antonkuantonku
1,132137
answered Jan 11 at 21:34
antonkuantonku
1,132137
answered Jan 11 at 21:34
antonkuantonku
1,132137
1,132137
Would you tell me what the 10 is for?
– Limitlessmatrix
Jan 11 at 22:45
This is on line const value = parseInt(document.getElementById('takeinput').value, 10);
– Limitlessmatrix
Jan 11 at 22:45
2
@Limitlessmatrix that parameter controls what radix to use in parsing the string input the 10 indicates it should treat the input as decimal.
– Mr.Mindor
Jan 11 at 23:02
@Limitlessmatrix Everything is as @Mr.Mindor said, just wanted to add, that nowadays, specifying the radix explicitly (as I did) may seem redundant, but it did make sense before. Previously many ECMAScript 3 implementations treated string numbers that start with0as octal if radix was not specified. But since ECMAScript 5 it's no longer an issue.
– antonku
Jan 12 at 0:27
add a comment |
Would you tell me what the 10 is for?
– Limitlessmatrix
Jan 11 at 22:45
This is on line const value = parseInt(document.getElementById('takeinput').value, 10);
– Limitlessmatrix
Jan 11 at 22:45
2
@Limitlessmatrix that parameter controls what radix to use in parsing the string input the 10 indicates it should treat the input as decimal.
– Mr.Mindor
Jan 11 at 23:02
@Limitlessmatrix Everything is as @Mr.Mindor said, just wanted to add, that nowadays, specifying the radix explicitly (as I did) may seem redundant, but it did make sense before. Previously many ECMAScript 3 implementations treated string numbers that start with0as octal if radix was not specified. But since ECMAScript 5 it's no longer an issue.
– antonku
Jan 12 at 0:27
Would you tell me what the 10 is for?
– Limitlessmatrix
Jan 11 at 22:45
Would you tell me what the 10 is for?
– Limitlessmatrix
Jan 11 at 22:45
This is on line const value = parseInt(document.getElementById('takeinput').value, 10);
– Limitlessmatrix
Jan 11 at 22:45
This is on line const value = parseInt(document.getElementById('takeinput').value, 10);
– Limitlessmatrix
Jan 11 at 22:45
2
2
@Limitlessmatrix that parameter controls what radix to use in parsing the string input the 10 indicates it should treat the input as decimal.
– Mr.Mindor
Jan 11 at 23:02
@Limitlessmatrix that parameter controls what radix to use in parsing the string input the 10 indicates it should treat the input as decimal.
– Mr.Mindor
Jan 11 at 23:02
@Limitlessmatrix Everything is as @Mr.Mindor said, just wanted to add, that nowadays, specifying the radix explicitly (as I did) may seem redundant, but it did make sense before. Previously many ECMAScript 3 implementations treated string numbers that start with
0 as octal if radix was not specified. But since ECMAScript 5 it's no longer an issue.– antonku
Jan 12 at 0:27
@Limitlessmatrix Everything is as @Mr.Mindor said, just wanted to add, that nowadays, specifying the radix explicitly (as I did) may seem redundant, but it did make sense before. Previously many ECMAScript 3 implementations treated string numbers that start with
0 as octal if radix was not specified. But since ECMAScript 5 it's no longer an issue.– antonku
Jan 12 at 0:27
add a comment |
1
Because you're learning JavaScript, I'm going to take this opportunity to do a short code review, specifically of this block:
for (let i = 1; i < 1; i++) {
if (9000 <= input) {
alert("Not many souls")
} else 9000.1 >= input
alert["That's over 9,000!"]
}
- As others have said, no need for a
forloop. - The other syntax some have elegantly proposed is called a ternary operator (
?:), which is also nice. In Python that's written more verbosely asprint "Lots of souls!" if input >= 9000 else print "Not many souls"(whose only advantage over a regular if/else is that it can be written on a single line). - Offsetting the numeric value you check for in if/else conditions is the wrong way to approach what ranges of values to include. The logic you want to apply is "Is what the user entered equal to over over 9000 or not". So don't use
>=and<=with a different number, use>=and<with the same number. - That said, don't use any number; an
elseis enough and captures the "or not" of your logical condition. - Your
else 9000.1 >= inputis not a condition, it meanselse {9000.1 >= input}, you probably meantelse if(but see above - you don't need any condition). - Unlike Python, a block in JavaScript is surrounded by
{}. While it is legal to write single-line if/else without braces if the code it runs is only a single statement, it's not idiomatic and almost always a bad idea.
Compare
const a = 1;
if (a > 0)
console.log("Higher than 0");
else
console.log("Not higher than 0");with
const a = 1;
if (a > 0)
console.log("Higher than 0");
console.log("Another line");
else
console.log("Not higher than 0");That second one doesn't work. Get used to putting braces around blocks from the start, so that you don't forget to add them when you add more code.
alert["That's over 9,000!"]? You meanalert().alert["That's over 9,000!"]looks for a key on a global variablealertcalledThat's over 9,000!and doesn't call a function.- On that note, don't use
alert(). Get used to using the DevTools console,console.log(),console.dir()(for objects) and the debugger. It will serve you much better when your code gets more complex, uses pretty standard debugging methods common in other environments, and it's really not that hard to learn. Start here https://developers.google.com/web/tools/chrome-devtools/javascript/
add a comment |
1
Because you're learning JavaScript, I'm going to take this opportunity to do a short code review, specifically of this block:
for (let i = 1; i < 1; i++) {
if (9000 <= input) {
alert("Not many souls")
} else 9000.1 >= input
alert["That's over 9,000!"]
}
- As others have said, no need for a
forloop. - The other syntax some have elegantly proposed is called a ternary operator (
?:), which is also nice. In Python that's written more verbosely asprint "Lots of souls!" if input >= 9000 else print "Not many souls"(whose only advantage over a regular if/else is that it can be written on a single line). - Offsetting the numeric value you check for in if/else conditions is the wrong way to approach what ranges of values to include. The logic you want to apply is "Is what the user entered equal to over over 9000 or not". So don't use
>=and<=with a different number, use>=and<with the same number. - That said, don't use any number; an
elseis enough and captures the "or not" of your logical condition. - Your
else 9000.1 >= inputis not a condition, it meanselse {9000.1 >= input}, you probably meantelse if(but see above - you don't need any condition). - Unlike Python, a block in JavaScript is surrounded by
{}. While it is legal to write single-line if/else without braces if the code it runs is only a single statement, it's not idiomatic and almost always a bad idea.
Compare
const a = 1;
if (a > 0)
console.log("Higher than 0");
else
console.log("Not higher than 0");with
const a = 1;
if (a > 0)
console.log("Higher than 0");
console.log("Another line");
else
console.log("Not higher than 0");That second one doesn't work. Get used to putting braces around blocks from the start, so that you don't forget to add them when you add more code.
alert["That's over 9,000!"]? You meanalert().alert["That's over 9,000!"]looks for a key on a global variablealertcalledThat's over 9,000!and doesn't call a function.- On that note, don't use
alert(). Get used to using the DevTools console,console.log(),console.dir()(for objects) and the debugger. It will serve you much better when your code gets more complex, uses pretty standard debugging methods common in other environments, and it's really not that hard to learn. Start here https://developers.google.com/web/tools/chrome-devtools/javascript/
add a comment |
1
1
1
Because you're learning JavaScript, I'm going to take this opportunity to do a short code review, specifically of this block:
for (let i = 1; i < 1; i++) {
if (9000 <= input) {
alert("Not many souls")
} else 9000.1 >= input
alert["That's over 9,000!"]
}
- As others have said, no need for a
forloop. - The other syntax some have elegantly proposed is called a ternary operator (
?:), which is also nice. In Python that's written more verbosely asprint "Lots of souls!" if input >= 9000 else print "Not many souls"(whose only advantage over a regular if/else is that it can be written on a single line). - Offsetting the numeric value you check for in if/else conditions is the wrong way to approach what ranges of values to include. The logic you want to apply is "Is what the user entered equal to over over 9000 or not". So don't use
>=and<=with a different number, use>=and<with the same number. - That said, don't use any number; an
elseis enough and captures the "or not" of your logical condition. - Your
else 9000.1 >= inputis not a condition, it meanselse {9000.1 >= input}, you probably meantelse if(but see above - you don't need any condition). - Unlike Python, a block in JavaScript is surrounded by
{}. While it is legal to write single-line if/else without braces if the code it runs is only a single statement, it's not idiomatic and almost always a bad idea.
Compare
const a = 1;
if (a > 0)
console.log("Higher than 0");
else
console.log("Not higher than 0");with
const a = 1;
if (a > 0)
console.log("Higher than 0");
console.log("Another line");
else
console.log("Not higher than 0");That second one doesn't work. Get used to putting braces around blocks from the start, so that you don't forget to add them when you add more code.
alert["That's over 9,000!"]? You meanalert().alert["That's over 9,000!"]looks for a key on a global variablealertcalledThat's over 9,000!and doesn't call a function.- On that note, don't use
alert(). Get used to using the DevTools console,console.log(),console.dir()(for objects) and the debugger. It will serve you much better when your code gets more complex, uses pretty standard debugging methods common in other environments, and it's really not that hard to learn. Start here https://developers.google.com/web/tools/chrome-devtools/javascript/
Because you're learning JavaScript, I'm going to take this opportunity to do a short code review, specifically of this block:
for (let i = 1; i < 1; i++) {
if (9000 <= input) {
alert("Not many souls")
} else 9000.1 >= input
alert["That's over 9,000!"]
}
- As others have said, no need for a
forloop. - The other syntax some have elegantly proposed is called a ternary operator (
?:), which is also nice. In Python that's written more verbosely asprint "Lots of souls!" if input >= 9000 else print "Not many souls"(whose only advantage over a regular if/else is that it can be written on a single line). - Offsetting the numeric value you check for in if/else conditions is the wrong way to approach what ranges of values to include. The logic you want to apply is "Is what the user entered equal to over over 9000 or not". So don't use
>=and<=with a different number, use>=and<with the same number. - That said, don't use any number; an
elseis enough and captures the "or not" of your logical condition. - Your
else 9000.1 >= inputis not a condition, it meanselse {9000.1 >= input}, you probably meantelse if(but see above - you don't need any condition). - Unlike Python, a block in JavaScript is surrounded by
{}. While it is legal to write single-line if/else without braces if the code it runs is only a single statement, it's not idiomatic and almost always a bad idea.
Compare
const a = 1;
if (a > 0)
console.log("Higher than 0");
else
console.log("Not higher than 0");with
const a = 1;
if (a > 0)
console.log("Higher than 0");
console.log("Another line");
else
console.log("Not higher than 0");That second one doesn't work. Get used to putting braces around blocks from the start, so that you don't forget to add them when you add more code.
alert["That's over 9,000!"]? You meanalert().alert["That's over 9,000!"]looks for a key on a global variablealertcalledThat's over 9,000!and doesn't call a function.- On that note, don't use
alert(). Get used to using the DevTools console,console.log(),console.dir()(for objects) and the debugger. It will serve you much better when your code gets more complex, uses pretty standard debugging methods common in other environments, and it's really not that hard to learn. Start here https://developers.google.com/web/tools/chrome-devtools/javascript/
const a = 1;
if (a > 0)
console.log("Higher than 0");
else
console.log("Not higher than 0");const a = 1;
if (a > 0)
console.log("Higher than 0");
else
console.log("Not higher than 0");const a = 1;
if (a > 0)
console.log("Higher than 0");
console.log("Another line");
else
console.log("Not higher than 0");const a = 1;
if (a > 0)
console.log("Higher than 0");
console.log("Another line");
else
console.log("Not higher than 0");answered Jan 11 at 22:19
community wiki
msanford
add a comment |
add a comment |
0
Just compare the input value with the value 9000 when the button is click. All you need is 5 lines (or less if you skip creating a variable for input) like this:
/* JavaScript */
var input = document.getElementById("takeinput");
function checkSoul() {
alert( (input.value < 9000) ? "not enough souls" : "Too much souls" );
}
document.getElementById("button").addEventListener("click", checkSoul);<!-- HTML -->
<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>You can shorten this further to just two lines (or less if you skip creating a variable for input) using ES6 like this:
/* JavaScript */
var input = document.getElementById("takeinput");
document.getElementById("button").addEventListener("click", () => { alert( (input.value < 9000) ? "not enough souls" : "Too much souls" ) });<!-- HTML -->
<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>N.B. If you are planning to use ES6, you'll need Babel to compile your ES6 to ES5 before pushing your JavaScript to production though since browsers don't support ES6 yet).
answered Jan 11 at 21:31
AndrewL64AndrewL64
9,83041844
add a comment |
0
Just compare the input value with the value 9000 when the button is click. All you need is 5 lines (or less if you skip creating a variable for input) like this:
/* JavaScript */
var input = document.getElementById("takeinput");
function checkSoul() {
alert( (input.value < 9000) ? "not enough souls" : "Too much souls" );
}
document.getElementById("button").addEventListener("click", checkSoul);<!-- HTML -->
<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>You can shorten this further to just two lines (or less if you skip creating a variable for input) using ES6 like this:
/* JavaScript */
var input = document.getElementById("takeinput");
document.getElementById("button").addEventListener("click", () => { alert( (input.value < 9000) ? "not enough souls" : "Too much souls" ) });<!-- HTML -->
<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>N.B. If you are planning to use ES6, you'll need Babel to compile your ES6 to ES5 before pushing your JavaScript to production though since browsers don't support ES6 yet).
answered Jan 11 at 21:31
AndrewL64AndrewL64
9,83041844
add a comment |
0
0
0
Just compare the input value with the value 9000 when the button is click. All you need is 5 lines (or less if you skip creating a variable for input) like this:
/* JavaScript */
var input = document.getElementById("takeinput");
function checkSoul() {
alert( (input.value < 9000) ? "not enough souls" : "Too much souls" );
}
document.getElementById("button").addEventListener("click", checkSoul);<!-- HTML -->
<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>You can shorten this further to just two lines (or less if you skip creating a variable for input) using ES6 like this:
/* JavaScript */
var input = document.getElementById("takeinput");
document.getElementById("button").addEventListener("click", () => { alert( (input.value < 9000) ? "not enough souls" : "Too much souls" ) });<!-- HTML -->
<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>N.B. If you are planning to use ES6, you'll need Babel to compile your ES6 to ES5 before pushing your JavaScript to production though since browsers don't support ES6 yet).
answered Jan 11 at 21:31
AndrewL64AndrewL64
9,83041844
Just compare the input value with the value 9000 when the button is click. All you need is 5 lines (or less if you skip creating a variable for input) like this:
/* JavaScript */
var input = document.getElementById("takeinput");
function checkSoul() {
alert( (input.value < 9000) ? "not enough souls" : "Too much souls" );
}
document.getElementById("button").addEventListener("click", checkSoul);<!-- HTML -->
<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>You can shorten this further to just two lines (or less if you skip creating a variable for input) using ES6 like this:
/* JavaScript */
var input = document.getElementById("takeinput");
document.getElementById("button").addEventListener("click", () => { alert( (input.value < 9000) ? "not enough souls" : "Too much souls" ) });<!-- HTML -->
<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>N.B. If you are planning to use ES6, you'll need Babel to compile your ES6 to ES5 before pushing your JavaScript to production though since browsers don't support ES6 yet).
/* JavaScript */
var input = document.getElementById("takeinput");
function checkSoul() {
alert( (input.value < 9000) ? "not enough souls" : "Too much souls" );
}
document.getElementById("button").addEventListener("click", checkSoul);<!-- HTML -->
<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>/* JavaScript */
var input = document.getElementById("takeinput");
function checkSoul() {
alert( (input.value < 9000) ? "not enough souls" : "Too much souls" );
}
document.getElementById("button").addEventListener("click", checkSoul);<!-- HTML -->
<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>/* JavaScript */
var input = document.getElementById("takeinput");
document.getElementById("button").addEventListener("click", () => { alert( (input.value < 9000) ? "not enough souls" : "Too much souls" ) });<!-- HTML -->
<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>/* JavaScript */
var input = document.getElementById("takeinput");
document.getElementById("button").addEventListener("click", () => { alert( (input.value < 9000) ? "not enough souls" : "Too much souls" ) });<!-- HTML -->
<div>
<h1> How many Souls have you aquired? </h1>
<form id="number_of_souls">
<input id="takeinput"> Souls
<button id="button">submit</button>
</form>
</div>answered Jan 11 at 21:31
AndrewL64AndrewL64
9,83041844
edited Jan 11 at 21:39
answered Jan 11 at 21:31
AndrewL64AndrewL64
9,83041844
answered Jan 11 at 21:31
AndrewL64AndrewL64
9,83041844
answered Jan 11 at 21:31
AndrewL64AndrewL64
9,83041844
9,83041844
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f54154191%2fhow-do-i-get-the-user-input-to-be-run-in-the-function-on-click-event%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
2
Hi! I converted your code into a snippet to make it runnable and slightly easier to answer. You can add them with the
<>button in the question editor. Also, purely a style point, I think most people find yoda conditions odd to read.– msanford
Jan 11 at 21:27