-1
我正在爲我的學校製作公告應用程序。所以基本上老師會發佈一個公告，如果公告的性別和等級與您的性別和年級相匹配，那麼它會顯示。我現在遇到的問題是，你爲自己選擇的性別和等級不存儲，並且我一直得到一個getData（）是未定義的，而我爲創建公告方面有相同的代碼，並且它工作得很好。getData（）未定義！試圖存儲變量
Settings.js
var userName;
var alert;
var getUser;
var filter = [];
var index = 0;
function getData() {
'use strict';
filter[index] = {
\t \t gender2: $("#gender2").val(),
\t \t grade2: $("#grade2").val()
\t
\t };
\t index++;
var string = JSON.stringify(filter);
console.log(string);
localStorage.setItem('filter', string);
}Settings.css
body {margin: 0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3c948b;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: "Lato";
font-size: 15px;
}
ul.topnav li a:hover:not(.active) {
-webkit-transition-duration: 0.5s;
background-color: #202020;
}
ul.topnav ul.right {
float: right;
list-style-type: none;
}
@media screen and (max-width: 600px){
ul.topnav ul.right,
ul.topnav li {float: none;}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #3c948b;
}
li {
display: inline;
float: left;
}
a {
display: block;
padding: 8px;
background-color: #3c948b;
}
center
/*nav{
border:1px;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
background: grey;
\t margin-right: 1px;
height: 50px;
}
nav li{
display:inline;
}
nav a{
display:inline-block;
padding:15px;
text-decoration: none;
color: white;
}
/*Hover state for top level links
li:hover a {
\t background: #3c948b;
}
#ann {
\t margin-top: 120px;
}Settings.html
<!doctype html>
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<html lang="en">
<link href="Settings.css" rel="stylesheet" />
<head>
<body>
<ul class="topnav">
<li><a href="Main2.html">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<ul class="topnav right">
<li><a href="Settings.html">Settings</a></li>
<li><a href="#login">Login</a></li>
</ul>
</ul>
</head>
<br>
<center>
\t \t <div id="ann"></div>
\t </center>
<center>
<div class="dropdown1">
<select id = "gender2">
<option value="" disabled selected>Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
\t \t \t
\t <div class="dropdown2">
<select id = "grade2">
<option value="" disabled selected>Grade</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
\t <option value="12">12</option>
</select>
\t <br>
\t <input type="button" class="Save" *this is problems ->*onclick= "getData()" value="Save"></input>
\t <br>
\t <input type="button" href="HT.html" class="Log Out" onclick= "location.href='ht.html';" value="Log Out" ></input>
\t </center>
</div>
</body>
</html>Teacher-Create.js
var userName;
var alert;
var getUser;
var announcement = [];
var index = 0;
function getData() {
announcement[index] = {
\t \t club: $("#Club").val(),
\t \t announcement: $("#ann").val(),
\t \t gender: $("#gender").val(),
\t \t grade: $("#grade").val()
\t \t
\t \t
\t
\t };
\t index ++;
var string = JSON.stringify(announcement);
console.log(string);
localStorage.setItem('announcement', string);
}Teacher-Create.css
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
#club {
text-align: center;
}
#ann {
text-align: left;
border: 1px solid grey;
margin-top: 10px;
border-radius: 2.5px;
height: 200px;
width: 315px;
}
#Club {
text-align: center;
border: 1px solid grey;
margin-top: 10px;
border-radius: 2.5px;
height: 50px;
width: 315px;
}
h5 {
margin: -1px;
font-size: 13px;
color: orange;
font-family: 'FontAwesome'
}
#view {
text-align: center;
}
.post {
text-align: center;
width: 100%;
margin-top: 5px;
}
.preview {
width: 100%;
text-align: center;
margin-top: 5px;
}
.box {
border: 1px solid grey;
margin-top: 20px;
border-radius: 2.5px;
}
#ann {
border: 1px solid grey;
margin-top: 10px;
border-radius: 2.5px;
}
.box2 {
border: 1px solid grey;
margin-top: 10px;
border-radius: 2.5px;
}
.box3 {
border: 1px solid grey;
margin-top: 10px;
border-radius: 2.5px;
}
.grid {
margin: 120px auto;
max-width: 20rem;
width: 90%;
}
#all {
align-content: center;
}Teacher-Create.html
<!DOCTYPE html>
<html>
<link type="text/css" rel="stylesheet" href="Teacher-Create.css"/>
<head>
<script src="Teacher-Create.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="grid">
<input id="Club" class="all" type="text" class="Club" placeholder="Club" required/>
<input id="ann" class="all" type="text" class="ann" placeholder="Announcement" required/>
\t <center> \t
\t \t <div class="dropdown1">
<select id = "gender">
<option value="" disabled selected>Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Male & Female">Male & Female</option>
</select>
\t \t \t
\t <div class="dropdown2">
<select id = "grade">
<option value="" disabled selected>Grade</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
\t <option value="12">12</option>
\t <option value="Juniors">Juniors</option>
\t <option value="Seniors">Seniors</option>
\t <option value="All">All</option>
</select>
\t </center>
\t \t
<input type="button" class="preview" value="Preview"></input>
<input type="button" class="post" onclick= "getData()" value="Post"></input>
</div>
</body>
</html>
感謝您的迴應，但它似乎仍然不存儲信息。我試圖將它存儲在本地存儲中，並將其鏈接到我的Settings.js，甚至是teacher-create.js，但我仍然遇到了錯誤。 –
你能爲你的問題創建一個js小提琴嗎？ – Shyju
https://jsfiddle.net/evd9gtv2/ –