单击清除记分卡按钮时，无法清除我的输入字段。
放置onclick函数。即使刷新页面时也清除了输入字段。我知道在JS文件中呈现代码可能会有更好的方法，但是我只是想在更改之前弄清基本原理。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="app.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My Golf Tracker</title>
</head>
<body>
<!--Main Navigation Menu-->
<div id="main-nav">
<ul>
<li class="nav-li"><a href="#">Home</a></li>
<li class="nav-li"><a href="#">History</a></li>
<li class="nav-li"><a href="#">Stats</a></li>
</ul>
<h1 id="main-header">
My Golf Tracker
</h1>
<!--STATS-->
<div class="stats">
<h1>Round Stats</h1>
<p>Gross Score:</p><input id="gross-score"></input>
<p>Nett Score:</p><input id="nett-score"></input>
<p>Stableford Score:</p><input id="stableford-score"></input>
<p>Total Putts:</p><input id="total-putts"></input>
<br>
<button type="save" id="save">Save Round</button>
</div>
</div>
<!--Selection of Golf Course-->
<div class="selections">
Select Golf Course
<select id="course-select" >
<option>Penn Golf Club</option>
<option>Perton Park</option>
</select>
</div>
<!--Selection which Tees-->
<div class="selections">Select Tee's
<select id="tee-select">
<option id="white">White</option>
<option id="yellow">Yellow</option>
</select>
</div>
<!--handicap Input-->
<div class="selections">Handicap
<input id="handicap" placeholder="Enter">
</input>
</div>
<!--Date of Round Select-->
<div class="selections"> Select Date
<input type="date" id="date-select"></select>
</div>
<!--HOLES-->
<div class="container">
<article class="front9">
<div class="hole">
<span>Front</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>Out</span>
</div>
<!--Hole PAR -->
<div class="par">
<span>Par</span>
<span>4</span>
<span>4</span>
<span>4</span>
<span>5</span>
<span>4</span>
<span>4</span>
<span>3</span>
<span>4</span>
<span>3</span>
<span>35</span>
</div>
<!-- Stroke Index -->
<div class="stroke-index">
<span>Index</span>
<span>9</span>
<span>13</span>
<span>3</span>
<span>15</span>
<span>7</span>
<span>5</span>
<span>17</span>
<span>1</span>
<span>11</span>
<span>35</span>
</div>
<!--Hole SCORE -->
<div class="score">
<span>Score</span>
<input id="f1" value=""></input>
<input id="f2" value=""></input>
<input id="f3" value=""></input>
<input id="f4" value=""></input>
<input id="f5" value=""></input>
<input id="f6" value=""></input>
<input id="f7" value=""></input>
<input id="f8" value=""></input>
<input id="f9" value=""></input>
<input id="front-nine"></input>
</div>
<!---Putts Made-->
<div class="putts">
<span>Putts</span>
<input id="p1" value=""></input>
<input id="p2" value=""></input>
<input id="p3" value=""></input>
<input id="p4" value=""></input>
<input id="p5" value=""></input>
<input id="p6" value=""></input>
<input id="p7" value=""></input>
<input id="p8" value=""></input>
<input id="p9" value=""></input>
</div>
</div>
</article>
<!--Back 9-->
<div class="container">
<article class="back9">
<div class="hole">
<span>Back</span>
<span>10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span>16</span>
<span>17</span>
<span>18</span>
<span>In</span>
</div>
<!--Hole PAR -->
<div class="par">
<span>Par</span>
<span>5</span>
<span>3</span>
<span>4</span>
<span>3</span>
<span>5</span>
<span>4</span>
<span>4</span>
<span>3</span>
<span>5</span>
<span>35</span>
</div>
<!--Stroke Index-->
<div class="stroke-index">
<span>Index</span>
<span>12</span>
<span>18</span>
<span>2</span>
<span>16</span>
<span>4</span>
<span>8</span>
<span>14</span>
<span>6</span>
<span>10</span>
<span>35</span>
</div>
<!--Score Back 9-->
<div class="score">
<span>Score</span>
<input id="b1" value=""></input>
<input id="b2" value=""></input>
<input id="b3" value=""></input>
<input id="b4" value=""></input>
<input id="b5" value=""></input>
<input id="b6" value=""></input>
<input id="b7" value=""></input>
<input id="b8" value=""></input>
<input id="b9" value=""></input>
<input id="back-nine"></input>
</div>
<!--Putts Back 9-->
<div class="putts">
<span>Putts</span>
<input id="p10" value=""></input>
<input id="p11" value=""></input>
<input id="p12" value=""></input>
<input id="p13" value=""></input>
<input id="p14" value=""></input>
<input id="p15" value=""></input>
<input id="p16" value=""></input>
<input id="p17" value=""></input>
<input id="p18" value=""></input>
</div>
<button type="submit" id="submit-score" onclick="grossScore()">Submit Score</button>
<button value="0" onclick="clearInp();">Clear Scorecard</button>
</body>
<script src="main.js"></script>
</html>
function grossScore() {
const holeOne = parseInt(document.querySelector("#f1").value);
const holeTwo = parseInt(document.querySelector("#f2").value);
const holeThree = parseInt(document.querySelector("#f3").value);
const holeFour = parseInt(document.querySelector("#f4").value);
const holeFive = parseInt(document.querySelector("#f5").value);
const holeSix = parseInt(document.querySelector("#f6").value);
const holeSeven = parseInt(document.querySelector("#f7").value);
const holeEight = parseInt(document.querySelector("#f8").value);
const holeNine = parseInt(document.querySelector("#f9").value);
const holeTen = parseInt(document.querySelector("#b1").value);
const holeEleven = parseInt(document.querySelector("#b2").value);
const holeTwelve = parseInt(document.querySelector("#b3").value);
const holeThirteen = parseInt(document.querySelector("#b4").value);
const holeFourteen = parseInt(document.querySelector("#b5").value);
const holeFifteen = parseInt(document.querySelector("#b6").value);
const holeSixteen = parseInt(document.querySelector("#b7").value);
const holeSeventeen = parseInt(document.querySelector("#b8").value);
const holeEighteen = parseInt(document.querySelector("#b9").value);
const handicap = parseInt(document.querySelector("#handicap").value);
const one = parseInt(document.querySelector("#p1").value);
const two = parseInt(document.querySelector("#p2").value);
const three = parseInt(document.querySelector("#p3").value);
const four = parseInt(document.querySelector("#p4").value);
const five = parseInt(document.querySelector("#p5").value);
const six = parseInt(document.querySelector("#p6").value);
const seven = parseInt(document.querySelector("#p7").value);
const eight = parseInt(document.querySelector("#p8").value);
const nine = parseInt(document.querySelector("#p9").value);
const ten = parseInt(document.querySelector("#p10").value);
const eleven = parseInt(document.querySelector("#p11").value);
const twelve = parseInt(document.querySelector("#p12").value);
const thirteen = parseInt(document.querySelector("#p13").value);
const fourteen = parseInt(document.querySelector("#p14").value);
const fifteen = parseInt(document.querySelector("#p15").value);
const sixteen = parseInt(document.querySelector("#p16").value);
const seventeen = parseInt(document.querySelector("#p17").value);
const eighteen = parseInt(document.querySelector("#p18").value);
document.getElementById("gross-score").value =
holeOne +
holeTwo +
holeThree +
holeFour +
holeFive +
holeSix +
holeSeven +
holeEight +
holeNine +
holeTen +
holeEleven +
holeTwelve +
holeThirteen +
holeFourteen +
holeFifteen +
holeSixteen +
holeSeventeen +
holeEighteen;
document.getElementById("nett-score").value =
document.getElementById("gross-score").value - handicap;
document.getElementById("total-putts").value =
one +
two +
three +
four +
five +
six +
seven +
eight +
nine +
ten +
eleven +
twelve +
thirteen +
fourteen +
fifteen +
sixteen +
seventeen +
eighteen;
document.getElementById("front-nine").value =
holeOne +
holeTwo +
holeThree +
holeFour +
holeFive +
holeSix +
holeSeven +
holeEight +
holeNine
document.getElementById("back-nine").value =
holeTen +
holeEleven +
holeTwelve +
holeThirteen +
holeFourteen +
holeFifteen +
holeSixteen +
holeSeventeen +
holeEighteen;
}
function clearInp() {
document.getElementsByTagName("input").value = "";
}
所有输入字段都清除
答案 0 :(得分：0)
在重置功能中，您必须遍历带有标签input的每个元素，并将它们的值设置为空，如下所示：
function clearInp() {
var elements = document.getElementsByTagName("input");
for(var i = 0; i < elements.length; i++){
elements[i].value = "";
}
}