Calculator displaying
Question
I am trying to make a calculator for money in a game. I am unable to display variables, though I think im using the proper methods.
<script type="text/javascript">
var score;
var kr;
var place;
var result;
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt){
document.getElementById('myButton').addEventListener('click', krCalc, false);
}
function krCalc() {
if (place === 1 && score > 0){
kr = (score/150) * 1.5;
console.log("A score of "+score+"pts gets you "+kr+" KR while in place "+place+".");
document.getElementById("result").innerHTML = "Result: A score of "+score+"pts gets you "+kr+" KR while in place "+place+".";
}
if (place === 2 && score > 0){
kr = (score/150) * 1.2;
console.log("A score of "+score+"pts gets you "+kr+" KR while in place "+place+".");
document.getElementById("result").innerHTML = "Result: A score of "+score+"pts gets you "+kr+" KR while in place "+place+".";
}
if (place >= 3 && score > 0) {
kr = (score/150);
console.log("A score of "+score+"pts gets you "+kr+" KR while in place "+place+".");
document.getElementById("result").innerHTML = "Result: A score of "+score+"pts gets you "+kr+" KR while in place "+place+".";
}
while (kr>10){
kr = 10;
}
}
</script>
<style type="text/css">
</style>
</head>
<body>
<form>
Place<br>
<input type="text" name="place" autocomplete="off"><br>
Score<br>
<input type="text" name="score" autocomplete="off">
<input id="myButton" type="submit" value="Submit">
</form>
<p id="result">Result:</p>
</body>
</html>
I would add more to this post though I have no idea what is going on, and have been around the internet trying to figure out how to properly do this. When the submit button is hit it refreshes the page for some reason, I have no idea why.
4 answers
solution1
1 2018-10-30 00:43:46
An input with type="submit" is used for submitting forms. Changing this to type="button" will stop the page from submitting/refreshing.
solution2
0 2018-10-30 00:44:36
When the submit button is hit it refreshes the page for some reason, I have no idea why.
It will normally refreshes the page because the submit button will trigger the form to submit. An ordinary form looks like this below:
<form class="" action="index.php" method="post">
</form>
But since you didn't put any attribute in your <form> tag, logically the value of your action would be the current page, which means that if you submit your form, you will land on your page again and again.
If you don't want your form to submit, do not use type="submit" . Use type="button" instead. Or to make that simple, you can also remove your <form> tag.
solution3
0 2018-10-30 00:44:38
type="submit" it's a special type of a button which tries to send an http-request. That's the reason why your site is loading.
try this:
<button onclick="myFunction()">Click me</button>
solution4
0 2018-10-30 00:48:38
Update
The score and place variables are never updated, so the if statements will never run. You need to update the variables when the form is submitted. Try adding this at the top of your krCalc function:
place = document.getElementsByName('place')[0].value;
score = document.getElementsByName('score')[0].value;
Original Answer
As others said, the form is being submitted. The form's action is the current page by default, which reloads the page.
It is better to listen for the form's submit event (rather than just the submit button click) as it will also catch pressing enter when focused on a field:
<script type="text/javascript">
var score;
var kr;
var place;
var result;
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt){
document.getElementById('myForm').addEventListener('submit', krCalc);
}
function krCalc(evt) {
evt.preventDefault(); // this prevents the form from causing page refresh
if (place === 1 && score > 0){
kr = (score/150) * 1.5;
console.log("A score of "+score+"pts gets you "+kr+" KR while in place "+place+".");
document.getElementById("result").innerHTML = "Result: A score of "+score+"pts gets you "+kr+" KR while in place "+place+".";
}
if (place === 2 && score > 0){
kr = (score/150) * 1.2;
console.log("A score of "+score+"pts gets you "+kr+" KR while in place "+place+".");
document.getElementById("result").innerHTML = "Result: A score of "+score+"pts gets you "+kr+" KR while in place "+place+".";
}
if (place >= 3 && score > 0) {
kr = (score/150);
console.log("A score of "+score+"pts gets you "+kr+" KR while in place "+place+".");
document.getElementById("result").innerHTML = "Result: A score of "+score+"pts gets you "+kr+" KR while in place "+place+".";
}
while (kr>10){
kr = 10;
}
}
</script>
And add the ID to the form:
<form id="myForm">
...
</form>
With this option, you would leave the button's type as a submit so the button will still submit the form. When the form submits (by either clicking this button or pressing enter while focused on a field), the JavaScript listener callback will fire. Calling preventDefault on the event object prevents the default action of the form submit event.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.