Question

我正在为我的学校制作公告应用程序。所以基本上老师发布公告，如果公告的性别和等级与您的性别和成绩相符，那么它将显示。我现在遇到的问题是你为自己选择的性别和等级没有存储，我一直得到一个getData（）是未定义的，而我有相同的代码用于创建公告方面，它完美无缺。

＆＃13;

Settings.js

var userName;
var alert;
var getUser;

var filter = [];
var index = 0;

function getData() {
    'use strict';
    filter[index] = {
		gender2: $("#gender2").val(),
		grade2: $("#grade2").val()
	
	};
	index++;
    var string = JSON.stringify(filter);
    console.log(string);
    localStorage.setItem('filter', string);
}

＆＃13;

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;
	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 {
	background: #3c948b;
}
#ann {
	margin-top: 120px;
}

＆＃13;

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>
		<div id="ann"></div>
	</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>
			
	<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>
	  <option value="12">12</option>
    </select>
	<br>
	<input type="button" class="Save" *this is problems ->*onclick= "getData()" value="Save"></input>
	<br>
	<input type="button" href="HT.html" class="Log Out" onclick= "location.href='ht.html';" value="Log Out" ></input>
	</center>
    </div>
</body>
</html>

＆＃13;

Teacher-Create.js

var userName;
var alert;
var getUser;

var announcement = [];
var index = 0;

function getData() {
    
    announcement[index] = {
		club: $("#Club").val(),
		announcement: $("#ann").val(),
		gender: $("#gender").val(),
		grade: $("#grade").val()
		
		
	
	};
	index ++;
    var string = JSON.stringify(announcement);
    console.log(string);
    localStorage.setItem('announcement', string);
}

＆＃13;

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;
}

＆＃13;

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/>
	<center>	
		<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>
			
	<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>
	  <option value="12">12</option>
	  <option value="Juniors">Juniors</option>
	  <option value="Seniors">Seniors</option>
	  <option value="All">All</option>
    </select>
	</center>
		
            <input type="button" class="preview" value="Preview"></input>

            <input type="button" class="post" onclick= "getData()" value="Post"></input>

    </div>
    </body>
</html>

＆＃13;

Answer 1

getData()方法在Teacher-Create.js文件中定义，您尚未将其包含在您的Settings.html中，但仍尝试调用该方法，

您需要在Settings.html文件中包含Teacher-Create.js脚本。

<head>
 <script src="Teacher-Create.js"></script>
</head>
<body>

</body>

getData（）未定义！试图存储变量

1 个答案: