2017-04-04 4 views
-1

私は11級のコンピュータープログラマーで、JSON割り当てを完了しようとするといくつかの問題が発生しました。目標はオブジェクトをローカルストレージに保存することですが、私のhtmlとjsはそうしません。代わりに、何も起こりません。すべてのフィードバックは高く評価されます。JSON Javascript&HTML

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" language="javascript" src="JDOS.js"> 
</script> 
    <title>Announcements Storage</title> 
</head> 

<body> 

    <form> 
     <fieldset> 
      <legend>Add New Announcement</legend> 
      Title:<br> 
      <input required id="title" type="text"><br> 
      Category:<br> 
      <input required id="category" type ="text"><br> 
      Creator:<br> 
      <input required id="creator" type="text"><br> 
      Type: 
      <select required id='type' name="type" > 
       <option value="Event">Event</option> 
       <option value="Reminder">Reminder</option> 
       <option value="General">General</option> 
      </select><br> 
      Date and Time:<br> 
      <input required id="date" type="date"><br> 
      <input required id="time" type="time"><br> 
      Sex:<br> 
      <select required id='sex'> 
       <option value="Male">Male</option> 
       <option value="Female">Female</option> 
       <option value="All">All</option> 
      </select><br> 
      Grade:<br> 
      <input required id='grade' type='text'><br> 
      Message:<br> 
      <textarea required id="message" rows="10" cols="50">Type 
      announcement here</textarea><br> 
      <input type="submit" onclick="createAnnouncement()" value="Post"> 
     </fieldset> 
    </form> 

    <div id="showAnnouncement"></div> 
</body> 
</html> 

Javascript begins here: 

function createAnnouncement() { 
var title= document.getElementById('title').value; 
var category= document.getElementById('category').value; 
var creator= document.getElementById('creator').value; 
var type= document.getElementById('type').value; 
var datetime= document.getElementById('datetime').value; 
var sex= document.getElementById('sex').value; 
var grade= document.getElementById('grade').value; 
var message= document.getElementById('message').value; 
var announcement = { 
Title: title, 
Category: category, 
Creator: creator, 
Type: type, 
DateTime: datetime, 
Sex: sex, 
Grade: grade, 
Message: message 
}; 
var x = JSON.stringify(announcement); 
localStorage.setItem('announcement', x); 
} 

function showAnnouncement(){ 
var obj = localStorage.getItem('announcement').value; 
var obj2 = JSON.parse (obj); 

document.getElementById('showAnnouncement').innerHTML = "title:" + obj2.title 
+ "category:" + obj2.category + "creator:" + obj2.creator + "type:" + 
obj2.type + "datetime:" + obj2.datetime + "sex:" + obj2.sex + "grade:" + 
obj2.grade + "message:" + obj2.message; 
} 

答えて

0

ロジックにはいくつかのエラーがあります。

入力がtype="submit"として作成されているため、createAnnouncement()関数を呼び出す代わりにHTTP POSTを実行しようとします。 type="button"に変更できます。

その後、あなたはshowAnnouncement()機能をトリガーする方法を見つける必要があり、これは<a>または別の<button>などの要素である可能性があります。

+0

ああ、感謝します、ありがとう、ビクター! –

関連する問題