javascript/htmlで反応評価ボタンを作成

Question

実際にプログラミング言語を知らなくても、プロジェクトを改善するために学校に課題があります。プロジェクトの骨子があり、そこにいくつかの機能を追加する必要があります。

スケルトンはブログでログイン/登録/があり、記事の作成、編集、削除ができます。

私の最初のアイデアは、変数にリンクされた好き嫌いの2つのボタンを追加することです。好きなボタンをクリックすると格付けが1ずつ上がり、嫌いな方はそれを減らします。私はボタンを追加しましたが、私はJavaScriptコードに苦労しています。これは次のようになります。

<script> 
    var rating = 0; 

    function IncreaseRating() { 
     document.getElementById('like').value = ++rating; 
    }; 
    function DecreaseRating() { 
     document.getElementById('dislike').value = --rating; 
    }; 
</script> 
<button id="like" type="button" onclick="IncreaseRating()">Like</button> 
<button id="dislike" type="button" onclick="DecreaseRating()">Dislike</button> 
<script>document.write(rating)</script> 

ただし、動作しません。どうにか私は評価値を表示することができましたが、それは増減しません。問題を解決するにはどうしたらいいですか？

Answer 1

コードの順序は問題です。要素がDOMに含まれる前にスクリプトタグを実行してください。

修正するには、順序を変更するだけで、ドキュメントの一番下、つまり終了タグの直前にスクリプトタグを配置します。

<button id="like" type="button" onclick="IncreaseRating()">Like</button> 
<button id="dislike" type="button" onclick="DecreaseRating()">Dislike</button> 
<script> 
    var rating = 0; 

    function IncreaseRating() { 
     document.getElementById('like').value = ++rating; 
    }; 
    function DecreaseRating() { 
     document.getElementById('dislike').value = --rating; 
    }; 
</script> 

<script>document.write(rating)</script> 

Answer 2

問題は、要素を作成した後に本体でスクリプトを呼び出していることです。その問題は、あなたの要素に関数Xを呼び出すように指示しましたが、まだ宣言されていない（要素を作成した直後に宣言した）ものとしては見つかりません。

2つの解決策がありますので、のようなDOM要素のイベント処理するために処理する

• 使用jQueryのイベント：$('#like').click(function() { //actions here });
• またはあなたのメタデータを使用してヘッダーでネイティブのJavascriptのコードを入れては、このようにそれがロードされ、あなたの関数はページロード時に（要素が作成される前に）宣言されます。

https://jsfiddle.net/h6sveuju/7/

お知らせどのようにあなたが

荷重タイプ

が

ないラップに設定されていることがわかりJavascriptの設定をクリックした場合 - で

また

あなたは現在、それはただの値になるように、ボタンのテキストを更新してしまうと、明らかに間違っている文字列（同様と嫌い）されているボタンのテキストをインクリメントしようとしていますボタンのテキストはのようになります。