Question

我需要为我的javascript类创建一个注册页面。通过使用本地存储，该程序需要允许学生注册4个班级，每个班级总共3学分。单击显示时，您应该看到已注册的类和总学分。因此，如果学生注册所有4个班级，则总时数应为12.如果学生注册3个班级，则总数应为9等。如果学生放弃课程，则结果应为空。显示类但总学分时间设置为0.如何解决此问题？这就是我所拥有的：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Class Registration</title>
<style>
body {
    background-color:lightblue;
}
</style>
<script>
function storeTask(task) {
    var taskDetail = document.getElementById(task).value;
    localStorage.setItem(task, taskDetail); 
}

function getTask(task) {
    document.getElementById(task).value = localStorage.getItem(task);
}

function clearTask(task) {
    localStorage.removeItem(task);
    document.getElementById(task).value="";
}

function displayTasks() {
    var intTotal =0;
    if (localStorage.getItem('Class1') != null) {
    }
    outputResults = document.getElementById("Results");
    outputResults.innerHTML = 
        'Class 1: ' + localStorage.getItem('class1') + '<br />' +
        'Class 2: ' + localStorage.getItem('class2') + '<br />' +
        'Class 3: ' + localStorage.getItem('class3') + '<br />' +
        'Class 4: ' + localStorage.getItem('class4') + '<br />' +
        '<br />' +
        'Total Class Hours: ' + intTotal +
        '';
}

</script>
</head>
<body>

<table width="100%">
<tr>
<td valign="top">

<div id="outer">
<h1>Local Storage</h1>
My Upcoming Classes
<br><br>
Class 1:
<select id="class1">
  <option value="">Please Select a Class</option>
  <option value="IT Management">IT Management</option>
  <option value="Multimedia Technology">Multimedia Technology</option>
  <option value="Multimedia Authoritizing">Multimedia Authoritizing</option>
  <option value="Web Site Development">Web Site Development</option>


&nbsp;
    <input type="button" value="Register" 
    onclick="storeTask('class1');">
    <input type="button" value="Drop" 
    onclick="clearTask('class1');">
<br><br>
 Class 2:
<select id="class2">
  <option value="">Please Select a Class</option>
  <option value="IT Management">IT Management</option>
  <option value="Multimedia Technology">Multimedia Technology</option>
  <option value="Multimedia Authoritizing">Multimedia Authoritizing</option>
  <option value="Web Site Development">Web Site Development</option>
&nbsp;  
    <input type="button" value="Register" 
    onclick="storeTask('class2');">
    <input type="button" value="Drop" 
    onclick="clearTask('class2');">
<br><br>
Class 3:
    <select id="class3">
  <option value="">Please Select a Class</option>
  <option value="IT Management">IT Management</option>
  <option value="Multimedia Technology">Multimedia Technology</option>
  <option value="Multimedia Authoritizing">Multimedia Authoritizing</option>
  <option value="Web Site Development">Web Site Development</option>

    &nbsp; 
    <input type="button" value="Register" 
    onclick="storeTask('class3');">
    <input type="button" value="Drop" 
    onclick="clearTask('class3');">
<br><br>
Class 4:
    <select id="class4">
  <option value="">Please Select a Class</option>
  <option value="IT Management">IT Management</option>
  <option value="Multimedia Technology">Multimedia Technology</option>
  <option value="Multimedia Authoritizing">Multimedia Authoritizing</option>
  <option value="Web Site Development">Web Site Development</option>
    &nbsp;
    <input type="button" value="Register" 
    onclick="storeTask('class4');">
    <input type="button" value="Drop" 
    onclick="clearTask('class4');">

</div>
</td>

<td valign="top">
Output Results
<br>
<input type="button" value="Display Tasks"
    onclick="displayTasks();">

<div id="Results"></div>

</td>
</tr>
</table>
</body>
</html>

Answer 1

您可以拥有一个全局变量，每次存储项目时都会增加3。然后在代码的其他部分使用该变量。我认为这应该让你在没有完全交给你的情况下把这个问题拿出去，如果这确实是家庭作业的话。

Answer 2

你好像很亲密。每次调用intTotal时，您都会将displayTasks重置为0，但每次存储其中一项时，您永远不会将其递增3。与@carlosHT提到的类似，您将希望将该总数存储在可访问的位置，并在每次存储项目时访问它以增加它。如果可能的话，我会避免使用全局变量。希望这不会给予太多。

无法在Javascript中显示总小时数

2 个答案: