2016-12-09 5 views
0

投稿システムの並べ替えを作成しようとしていますが、ほとんどの部分は機能しますが、ポストボタンをクリックすると、リセットする。 (それは問題ではないようにCodePenがスケルトンコードを設定します)私は、さまざまな方法の束を試してみましたが、それらのどれも働いていないので、ここで私が試した最後のものは次のとおりです。フォームリセット()機能で入力フィールドをリセットしようとしましたが、動作していません

HTML:

<form id="post" name="write"> 
    <div class="textbox"> 
     <input class="postwriter" name="post" type="text" placeholder="What's on your mind?" id="myPost"> 
     <button id="Post" onclick= "return write_below(this); return formReset();" value="submit" >Post</button> 
    </div> 
</form> 
<div class="posts" id="postDisplay"> 
    <p class="para"><span id='display'></span></p> 
</div> 

はJavaScript:

function write_below(form) { 
    var input = document.forms.write.post.value; 
    document.getElementById('display').innerHTML += "<p>" + Math.floor(Math.random()*20) + ": " + input + "</p>" + "<br/>"; 
    return false; 
} 
function formReset(){ 
    document.getElementById("post").reset(); 
} 
+1

あなたは 'post'の' id'(フォームとボタン)の2つの要素を持っています。 HTMLの場合は関係ありません。すべてのIDは一意でなければなりません。 –

+0

@ScottMarcus同じIDはありません。 JavaScriptはCaSe SeNsItIvEです。 –

+0

@PraveenKumarしかし、HTMLはそうではなく、大文字と小文字だけが異なるIDを持つことは、CSSでは ''リンクの問題であり、JSでもよく混乱します。 –

答えて

3

あなたonclickは次のようになります。どのトランス

onclick="return write_below(this); return formReset();" 

レイト:

return write_below(this); 
return formReset(); 

最初の復帰後、スクリプトは終了します。最初のリターンを削除します。あなたのコードは次のようになります。

onclick="write_below(this); formReset(); return false;" 

ことを言って、ここでreturn falseは、意味がありませんので、それを取り除きます。

function write_below(form) { 
    var input = document.forms.write.post.value; 
    document.getElementById('display').innerHTML += "<p>" + Math.floor(Math.random()*20) + ": " + input + "</p>" + "<br/>"; 
} 

注:すべてのあなたのIDはあなたのコードが怒っ見ている開発者や誰かを作るかもしれない、似ています。それはあなたの意図ですか?

+0

falseを返すと、クリックすると新しいページを読み込まないようになりました。そして、似たようなIDはbcです。私はそれ以外の何かをlolで知らせることはできませんでした。 – user147219

+0

@ user147219男、それは基本的なことです。さて、 'return false'がうまくいかない場合は、それらを完全に削除してください。 –

+1

@ user147219 HTML要素のIDを渡すときは、IDの前に接頭辞を付けるのが最善です。たとえば、フォームのIDは 'frmPost'で、ボタンは' btnPost'です。接頭辞は、彼らがお互いのつま先を踏んでいないので、それらは完全に合法です。あなたのJavaScriptでは、実行時に 'txtPost'と呼ばれる要素がテキストボックスであることを知っているので、その要素がどのような種類のプロパティとメソッドであるかを知ることができます。 HTML。 –

関連する問題