フォームのボタンが機能しない

私はJSを扱うのは初めてのことであり、私のクラスのプロジェクトに取り組んでいると言って始めたいと思います。フォームのボタンが機能しない

フォームデータを保存するボタン、表示するフォーム、フォームを消去するボタンの3つのボタンでフォームを作成する必要があります。私は、私が間違っていることを試してみるために、すべての目的のために研究してきました。これはオンラインクラスなので、ここには本以外の情報はありません。あなたの割り当てはここにあります。

私はこれまでのところ、私の店と表示ボタンが機能していない理由と、店のボタンがデータを配列に正しく格納しているかどうかを確認する方法があります。表示ボタンが動作しないのですか？

私は髪を切っています。ひどいことを申し訳ありません。

<DOCTYPE HTML!> 
 

 
<html> 
 
<head> 
 
<style> 
 

 
form {border-style: inset; 
 
\t border-color: blue; 
 
\t height: 360px; 
 
\t width: 775px; 
 
\t margin: auto; 
 
\t } 
 
\t 
 
</style> 
 

 
<script> 
 

 
var fullNames = new Array(100); 
 
var dates = new Array(100); 
 
var opinions = new Array(100); 
 

 
var numOfRatings = 0; 
 

 
function validateData() 
 
{ 
 
\t var fullNameStr = document.getElementById("FullName").value; 
 
\t var dateStr = document.getElementById("Date").value; 
 
\t var opinionStr = document.getElementById("opinion").value; 
 
\t { 
 
\t \t var dateVal = dateStr; 
 
\t \t var dateParts = dateVal.split("/"); 
 
\t \t if (parseInt(dateParts[2]) < "2014") 
 
\t \t \t { 
 
\t \t \t alert("Invalid date!"); 
 
\t \t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t fullNames[numOfRatings] = fullNameStr; 
 
\t \t \t dates[numOfRatings] = dateStr; 
 
\t \t \t opinions[numOfRatings] = opinionStr; 
 
\t \t \t numOfRatings++; 
 
\t \t \t document.getElementById("FullName").value = ""; 
 
\t \t \t document.getElementById("Date").value = ""; 
 
\t \t \t document.getElementById("opinion").value = ""; 
 
\t \t } 
 
\t } 
 
} \t \t \t 
 

 
function displayData() 
 
{ 
 
\t var col; 
 
\t var pos; 
 
\t 
 
\t document.getElementById("list").value = "FULL NAME    DATE   RATING\n"; 
 
\t 
 
\t for (pos = 0; pos < numOfRatings; pos++) 
 
\t { 
 
\t \t document.getElementById("list").value += fullNames[pos]; 
 
\t \t for (col = fullNames[pos].length; col <= 25; col++) 
 
\t \t \t document.getElementById("list").value += " "; 
 
\t \t document.getElementById("list").value += dates[pos]; 
 
\t \t for (col = dates[pos].length; col <= 15; col++) 
 
\t \t \t document.getElementById("list").value += " "; 
 
\t \t document.getElementById("list").value += opinions[pos]"\n"; 
 
\t } 
 
} 
 

 
//Clear data function 
 
function clearData() 
 
{ 
 
\t var pos; 
 
\t 
 
\t for (pos = 0; pos < numOfRatings; pos++) 
 
\t { 
 
\t \t fullNames[pos] = ""; 
 
\t \t dates[pos] = ""; 
 
\t \t opinions[pos] = ""; 
 
\t } 
 
\t numOfRatings = 0; 
 
} \t 
 

 
</script> 
 
</head> 
 
<body> 
 
<center> 
 
<font size="10px"><h1>Internet Technologies Membership</font> 
 
</center> 
 
<b><hr></hr></b> 
 
</h1> 
 
<form name ="ratingForm"> 
 
<table cellpadding="10"> 
 
<td> 
 
<tr> 
 
<td>Full Name:</td> 
 
<td><input type="text" id="FullName" name="FullName"></td> 
 
<td>Date:</td> 
 
<td><input type="date" id="Date" name="Date"></td> 
 
<td>Opinion:</td> 
 
<td><select name="opinion" id="opinion"> 
 
\t <option value="excellent">Excellent</option> 
 
\t <option value="verygood">Very Good</option> 
 
\t <option value="good">Good</option> 
 
\t <option value="fair">Fair</option> 
 
\t <option value="poor">Poor</option> 
 
\t <option value="verybad">Very Bad</option> 
 
</select></td> 
 
</table> 
 
<br> 
 
<center> 
 
<td><textarea name="list" id="list" rows="10" cols="100"> 
 
</textarea> 
 
<br> 
 
<br> 
 
<input type="button" value="RATE" onClick="validateData();"> 
 
<input type="button" value="DISPLAY" onClick="displayData();"> 
 
<input type="reset" value="CLEAR" onClick="clearData();"> 
 
<br> 
 
</center> 
 
</form> 
 
</body> 
 
</html>

出典

2017-07-05 Daniel Miller

あなたのDOCTYPEが間違って書かれている、それは '<！DOCTYPE HTML>' – Soviut

ことになって、私は私の実際のコードでは、それが正しい持っていた、笑それを超えるコピー台無し。今日はあまりにも長くこの道を見て、ありがとう！ –

-1

私はあなたがこれにdisplayData()を変更することができると思います：

function displayData() { 
      var col; 
      var pos; 
      var listElement = document.getElementById("list"); 

      listElement.value = "FULL NAME    DATE   RATING\n"; 
      for (pos = 0; pos < numOfRatings; pos++) { 
       listElement.value += fullNames[pos] + " ".repeat(24 - fullNames[pos].length); 
       listElement.value += dates[pos] + " ".repeat(16 - dates[pos].length); 
       listElement.value += opinions[pos] + "\n"; 
      } 
     }

repeat()機能をES2015に追加されます。
要素を1回検索します。

出典

2017-07-05 02:52:57 polunzh

構文は、あなたが+「のあなたなら、あなたのページにJSエラー右クリックをご覧になるに
document.getElementById("list").value += opinions[pos]+"\n";
に署名するのを忘れ、このラインのため
document.getElementById("list").value += opinions[pos]"\n";
正しくありません。クロムを使用して、[要素の検査] - > [コンソール]をクリックします。あなたのページが投げているエラーを教えてくれます。

出典

2017-07-05 02:27:23 altoids

あなたは私を冗談にしなければならない...それを固定した笑！ –

@DanielMiller笑私たちはすべてそこにいた – altoids

そこに行った:)） – Cedric

あなたは多くのエラーを持っていた：

無効なドキュメントタイプを持っていました。あなたのHTMLはH1タグの周りで壊れていました。フォームタグは閉じられませんでした。

レート機能でクリーンアップが必要です。

表示機能に+が表示されない場合があります。

修正プログラムに関するコメントと今後のデバッグ方法については、完全な動作コードです。

form { 
 
    border-style: inset; 
 
    border-color: blue; 
 
    height: 360px; 
 
    width: 775px; 
 
    margin: auto; 
 
}

<!-- 
 
broken html. 
 
Use a tool to validate your html and make it "pretty" or "tidy" for you. 
 
--> 
 
<h1 style="text-align:center; border-bottom:1px solid #999999">Internet Technologies Membership</h1> 
 
<!-- 
 
An HTML validator would have told you <font> and <center> are depcrecated. Replaced with css. 
 
--> 
 
<form name="ratingForm"> 
 
    <table cellpadding="10"> 
 
    <td> 
 
     <tr> 
 
     <td>Full Name:</td> 
 
     <td> 
 
      <input type="text" id="FullName" name="FullName"> 
 
     </td> 
 
     <td>Date:</td> 
 
     <td> 
 
      <input type="date" id="Date" name="Date"> 
 
     </td> 
 
     <td>Opinion:</td> 
 
     <td> 
 
      <select name="opinion" id="opinion"> 
 
      <option value="excellent">Excellent</option> 
 
      <option value="verygood">Very Good</option> 
 
      <option value="good">Good</option> 
 
      <option value="fair">Fair</option> 
 
      <option value="poor">Poor</option> 
 
      <option value="verybad">Very Bad</option> 
 
      </select> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    <br> 
 
    <center> 
 
    <td> 
 
     <textarea name="list" id="list" rows="10" cols="100"> 
 
     </textarea> 
 
     <br> 
 
     <br> 
 
     <input type="button" value="RATE" onclick="validateData();"> 
 
     <input type="button" value="DISPLAY" onclick="displayData();"> 
 
     <input type="reset" value="CLEAR" onclick="clearData();"> 
 
     <br> 
 
    </center> 
 
<!-- add missing end form tag --> 
 
</form> 
 
<!-- when javascript isn't working, put different blocks inside of seperate script tags. 
 
If there is an error in one everything inside the script tag wont work. 
 
Using seperate script tags you find out which block of code isn't working. 
 
Also, look in web developer console for errors in the console tab. 
 

 
--> 
 
<script> 
 
var fullNames = new Array(100); 
 
var dates = new Array(100); 
 
var opinions = new Array(100); 
 

 
var numOfRatings = 0; 
 
</script> 
 
<!-- put validateData() in its own script tag to isolate it because it wasn't working. --> 
 
<script> 
 

 
function validateData() { 
 
    //console.log('validating data'); // use console.log to see what code is executing 
 
    var fullNameStr = document.getElementById("FullName").value; 
 
    var dateStr = document.getElementById("Date").value; 
 
    var opinionStr = document.getElementById("opinion").value; 
 
    //console.log('validating data 1'); // making sure the getters didn't break anything. 
 
    // add validation for name and opinion. 
 
    //If they are null then display won't work because a string + null==null; 
 
    if(!fullNameStr||!opinionStr|| !dateStr) { 
 
    \t alert("Please complete all fields."); 
 
    return; 
 
    } 
 
    var dateVal = dateStr; 
 
    var dateParts = dateVal.split("/"); 
 
    
 
    // need to validate the dataParts array has at least two items. 
 
    // also SHOULD be making sure it is a validate date. 
 
    if (dateParts.length<3 || parseInt(dateParts[2]) < "2014") { 
 
    alert("Invalid date!"); 
 
    } else { 
 
    fullNames[numOfRatings] = fullNameStr; 
 
    dates[numOfRatings] = dateStr; 
 
    opinions[numOfRatings] = opinionStr; 
 
    numOfRatings++; 
 
    document.getElementById("FullName").value = ""; 
 
    document.getElementById("Date").value = ""; 
 
    document.getElementById("opinion").value = ""; 
 
    } 
 
} 
 
</script> 
 

 
<!-- put displayData() in its own script tag to isolate it because it wasn't working. --> 
 
<script> 
 

 
function displayData() { 
 
    var col; 
 
    var pos; 
 

 
    document.getElementById("list").value = "FULL NAME    DATE   RATING\n"; 
 

 
    for (pos = 0; pos < numOfRatings; pos++) { 
 
    document.getElementById("list").value += fullNames[pos]; 
 
    for (col = fullNames[pos].length; col <= 25; col++) 
 
     document.getElementById("list").value += " "; 
 
    document.getElementById("list").value += dates[pos]; 
 
    for (col = dates[pos].length; col <= 15; col++) 
 
     document.getElementById("list").value += " "; 
 
     //broken code, add + after opinions[pos] 
 
    document.getElementById("list").value += opinions[pos] + "\n"; 
 
    } 
 
} 
 
</script> 
 

 
<!-- put clearData() in its own script tag to isolate it because it wasn't working. --> 
 
<script> 
 

 
//Clear data function 
 
function clearData() { 
 
    var pos; 
 

 
    for (pos = 0; pos < numOfRatings; pos++) { 
 
    fullNames[pos] = ""; 
 
    dates[pos] = ""; 
 
    opinions[pos] = ""; 
 
    } 
 
    numOfRatings = 0; 
 
} 
 
</script>

出典

2017-07-05 02:59:32

ありがとうございました！あなたが私に提供した情報は非常に有用であり、私は間違いなく今後より良いHTMLフォーマットを使用します。私はJSのために非常に新しいですので、私は目が痛いのを謝罪します！ –

私はあなたのコードを実行するとき、どんな日、私はそれを無効として戻って来て入らないことを言及したかったです！この割り当てでは、実際に日付が2014より小さいか、または現在の日付よりも大きい場合、日付を拒否する必要があることが実際に記載されています。 –

「1/1/2014」は私のために働きます。 firefox latestを使用しています。君は？ Web開発者のコンソールとデバッガを使用して確認し、コードを実行してみてください。 –

フォームのボタンが機能しない

答えて

関連する問題