Html 当我点击提交按钮时，网站一直在刷新并且没有输出
Html site keeps refreshing and not giving output when i clicked button for submitting
我有一个网站，我想在表单字段中输入值，然后输出一些结果，但是我已经完成了网站 UI 并转到 javascript 进行实际计算，但是，当我按下按钮时，我的网站只是不断刷新并删除值，而我的函数没有 console.log 这些值，但我没有收到错误。
我对 javascript 完全陌生，所以任何帮助都会很棒。如果您需要任何进一步的代码，请问我。
（css 是用 bulma 完成的）
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Uni Weight Grade Calculator</title>
<link rel="icon" href="images/icon.ico">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"/>
<script
defer
src="https://use.fontawesome.com/releases/v5.3.1/js/all.js">
</script>
</head>
<body>
<section class="section">
<div class="container is-centered is-mobile">
<div class="content has-text-centered">
<h1>Weighted Average Calculator</h1>
<p>
This Simple Grade Calculator will determine your average grade for your assignments,
end of year grade or end of university grade.
<br>
The weighted average simply takes into account how much each course is worth when calculating the average.
<br>
This calculator can also be used to calculate any weighted average, not just courses.
<br><br><br>
</p>
</div>
<div class="columns is-centered">
<div class="column is-three-quarters">
<div class="card">
<div class="columns is-gapless is-multiline is-mobile">
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">The Entry</h1>
</div>
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">Grade (%)</h1>
</div>
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">Weight (Credits)</h1>
</div>
</div>
<div class="card-content">
<form id="grade-form">
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">1</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right ">
<input class="input" id="grade1" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit1" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">2</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade2" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit2" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">3</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade3" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit3" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">4</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade4" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit4" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">5</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade5" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit5" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">6</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade6" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit6" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">7</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade7" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit7" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">8</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade8" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit8" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="control">
<button id="submit" class="button is-large is-fullwidth is-primary is-outlined">
Calculate
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- RESULTS -->
<section class="section is-centered is-mobile">
<h1 class="title has-text-centered">Calculated Results</h1>
<div class="columns is-multiline is-centered">
<div class="column is-12-tablet is-6-desktop is-3-widescreen ">
<div class="notification is-success is-light has-text">
<p id="monthlyPayment" class="title is-1"><i class="fa fa-percentage"></i></p>
<p class="subtitle is-4">Average Grade</p>
</div>
</div>
<div class="column is-12-tablet is-6-desktop is-3-widescreen">
<div class="notification is-link is-light has-text">
<p id="totalInterest" class="title is-1"><i class="fas fa-graduation-cap"></i></p>
<p class="subtitle is-4">Formal Grade</p>
</div>
</div>
</div>
</section>
</body>
<script src="index.js"></script>
</html>
JAVASCRIPT
// Check if user has entered any values and pressed submit
document.getElementById("submit").onclick = function(){
calculateResults;
};
// Grade calculation function
function calculateResults(e){
e.preventDefault();
const UIgrade1 = document.getElementById("grade1").value(), UIcredit1 = document.getElementById("credit1").value();
const UIgrade2 = document.getElementById("grade2").value(), UIcredit2 = document.getElementById("credit2").value();
const UIgrade3 = document.getElementById("grade3").value(), UIcredit3 = document.getElementById("credit3").value();
const UIgrade4 = document.getElementById("grade4").value(), UIcredit4 = document.getElementById("credit4").value();
const UIgrade5 = document.getElementById("grade5").value(), UIcredit5 = document.getElementById("credit5").value();
const UIgrade6 = document.getElementById("grade6").value(), UIcredit6 = document.getElementById("credit6").value();
const UIgrade7 = document.getElementById("grade7").value(), UIcredit7 = document.getElementById("credit7").value();
const UIgrade8 = document.getElementById("grade8").value(), UIcredit8 = document.getElementById("credit8").value();
console.log(UIgrade1);
console.log(UIcredit1);
}
// Get the event parameter
document.getElementById("submit").onclick = function(e){
calculateResults(e); // Call the function
};
我有一个网站，我想在表单字段中输入值，然后输出一些结果，但是我已经完成了网站 UI 并转到 javascript 进行实际计算，但是，当我按下按钮时，我的网站只是不断刷新并删除值，而我的函数没有 console.log 这些值，但我没有收到错误。 我对 javascript 完全陌生，所以任何帮助都会很棒。如果您需要任何进一步的代码，请问我。
（css 是用 bulma 完成的）
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Uni Weight Grade Calculator</title>
<link rel="icon" href="images/icon.ico">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"/>
<script
defer
src="https://use.fontawesome.com/releases/v5.3.1/js/all.js">
</script>
</head>
<body>
<section class="section">
<div class="container is-centered is-mobile">
<div class="content has-text-centered">
<h1>Weighted Average Calculator</h1>
<p>
This Simple Grade Calculator will determine your average grade for your assignments,
end of year grade or end of university grade.
<br>
The weighted average simply takes into account how much each course is worth when calculating the average.
<br>
This calculator can also be used to calculate any weighted average, not just courses.
<br><br><br>
</p>
</div>
<div class="columns is-centered">
<div class="column is-three-quarters">
<div class="card">
<div class="columns is-gapless is-multiline is-mobile">
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">The Entry</h1>
</div>
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">Grade (%)</h1>
</div>
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">Weight (Credits)</h1>
</div>
</div>
<div class="card-content">
<form id="grade-form">
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">1</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right ">
<input class="input" id="grade1" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit1" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">2</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade2" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit2" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">3</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade3" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit3" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">4</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade4" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit4" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">5</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade5" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit5" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">6</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade6" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit6" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">7</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade7" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit7" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">8</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade8" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit8" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="control">
<button id="submit" class="button is-large is-fullwidth is-primary is-outlined">
Calculate
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- RESULTS -->
<section class="section is-centered is-mobile">
<h1 class="title has-text-centered">Calculated Results</h1>
<div class="columns is-multiline is-centered">
<div class="column is-12-tablet is-6-desktop is-3-widescreen ">
<div class="notification is-success is-light has-text">
<p id="monthlyPayment" class="title is-1"><i class="fa fa-percentage"></i></p>
<p class="subtitle is-4">Average Grade</p>
</div>
</div>
<div class="column is-12-tablet is-6-desktop is-3-widescreen">
<div class="notification is-link is-light has-text">
<p id="totalInterest" class="title is-1"><i class="fas fa-graduation-cap"></i></p>
<p class="subtitle is-4">Formal Grade</p>
</div>
</div>
</div>
</section>
</body>
<script src="index.js"></script>
</html>
JAVASCRIPT
// Check if user has entered any values and pressed submit
document.getElementById("submit").onclick = function(){
calculateResults;
};
// Grade calculation function
function calculateResults(e){
e.preventDefault();
const UIgrade1 = document.getElementById("grade1").value(), UIcredit1 = document.getElementById("credit1").value();
const UIgrade2 = document.getElementById("grade2").value(), UIcredit2 = document.getElementById("credit2").value();
const UIgrade3 = document.getElementById("grade3").value(), UIcredit3 = document.getElementById("credit3").value();
const UIgrade4 = document.getElementById("grade4").value(), UIcredit4 = document.getElementById("credit4").value();
const UIgrade5 = document.getElementById("grade5").value(), UIcredit5 = document.getElementById("credit5").value();
const UIgrade6 = document.getElementById("grade6").value(), UIcredit6 = document.getElementById("credit6").value();
const UIgrade7 = document.getElementById("grade7").value(), UIcredit7 = document.getElementById("credit7").value();
const UIgrade8 = document.getElementById("grade8").value(), UIcredit8 = document.getElementById("credit8").value();
console.log(UIgrade1);
console.log(UIcredit1);
}
// Get the event parameter
document.getElementById("submit").onclick = function(e){
calculateResults(e); // Call the function
};