HTMLでJavaScript変数を複数回使用する方法

-2

HTMLで変数を複数回表示するにはどうすればよいですか？可変バナナが増加すると、可変バナナを使用するスパンのうちの1つに対してのみ増加します。HTMLでJavaScript変数を複数回使用する方法

<!DOCTYPE html> 
<html> 
<body> 

<h3>Example Code</h3> 
<button class="button" onclick="Addbanana()">Add 1 Banana</button> 
    <p>Bananas = <span id="banana"> 0 </span></p> 
    <p>Bananas = <span id="banana"> 0 </span></p> 
    <p>Bananas = <span id="banana"> 0 </span></p> 


<script> 
var banana = 0; 
function Addbanana(){ 
    banana = banana + 1; 
    document.getElementById("banana").innerHTML = banana; 
} 
</script> 

</body> 
</html>

出典

2016-12-27 Fred

IDの** MUST **一意である - そのため、getElementByIdを（それが得るELEMENT予告で、単数ない複数）スパンが取得する最初のものだけであり、常に –

の代わりにバナナIDを使用して、バナナのクラスを使用します。 IDは一意であることを意図していますが、使用する場所が3つあるため、クラスを使用する方がよいでしょう。
あなたはその後、クラスを使用しているので、これは配列のようなオブジェクトを返すので、それを反復処理し、あなたが
前に行ったようにinnerHTMLを変更する代わりにgetElementById
のgetElementsByClassNameを使用???
利益！

出典

2016-12-27 01:40:33 therobinkim

は、なぜあなたは提供しません点1-3の論理を示すOPのコード例。あなたのポイント4-5は質問のために冗長であり、あなたは危険にさらされる危険性があります。 –

私はステップ4を理解していません。 – Oriol

迅速な応答時間と簡潔な答えをありがとう： – Fred

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
</head> 
<body> 

<h3>Example Code</h3> 
<button class="button" onclick="Addbanana()">Add 1 Banana</button> 
    <p>Bananas = <span class="banana"> 0 </span></p> 
    <p>Bananas = <span class="banana"> 0 </span></p> 
    <p>Bananas = <span class="banana"> 0 </span></p> 


<script> 
var banana = 0; 
function Addbanana(){ 
    banana = banana + 1; 
    $(".banana").each(function() { 
     $(".banana").html(banana); 
    }) 
} 
</script> 

</body> 
</html>

出典

2016-12-27 01:58:43 evanidul

HTMLでJavaScript変数を複数回使用する方法

答えて

関連する問題