How to use JavaScript variables multiple times in HTML

Question

How can you display one variable multiple times in HTML? When the variable banana increases it only increases for one of the spans using the variable banana.

<!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>

ID's **MUST** be unique - therefore, the span that getElementById (notice, it is get ELEMENT, singular not plural) gets is the first one only and always — Jaromanda X, Dec 27 '16 at 01:38

score 1 · Accepted Answer · answered Dec 27 '16 at 01:40

1

Instead of using banana IDs, use banana classes. IDs are meant to be unique... but since you have three places where you want to use it, you're better off using classes.
Since you're then using classes, use getElementsByClassName instead of getElementById
This returns an array-like object, so iterate through it, and change the innerHTML as you did before
???
Profit!

answered Dec 27 '16 at 01:40

therobinkim

2,500
14
20

Why don't you supply a code example for the OP demonstrating the logic of points 1-3. Your points 4-5 are redundant for the question and you risk getting flagged. – Robin Mackenzie Dec 27 '16 at 01:43
I don't understand step 4. – Oriol Dec 27 '16 at 01:43
Thank you for the quick response time and concise answer :) – Fred Dec 27 '16 at 01:45
Please check the running sample: https://jsfiddle.net/ray986/f7w0j2p3/1/ – Codemole Dec 27 '16 at 01:49

score 0 · Answer 2 · answered Dec 27 '16 at 01:58

<!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>

How to use JavaScript variables multiple times in HTML

2 Answers2