Passing id of image to function and display count

Question

I have a static page with the following markup

 <div class="middle-content">
    <div class="white-div">
        <div class="like-buttons">
            <img id="1" src="up.png" onclick="onClick(true, this.id)" />
            <span id="clickOne">0</span>
            <img id="2" src="down.png" onclick="onClick(false, this.id)" />
        </div>
        <div class="tex-area">
            <h4>Heading One</h4>
            <p>Some random paragraph</p>
        </div>
    </div>
    <div class="red-div">
        <div class="like-buttons">
            <img id="3" src="up.png" onclick="onClick(true, this.id)" />
            <span id="clickTwo">0</span>
            <img id="4" src="down.png" onclick="onClick(false, this.id)" />
        </div>
        <div class="tex-area">
            <h4>Heading Two</h4>
            <p>Some random paragraph</p>
        </div>
    </div>
    <div class="white-div">
        <div class="like-buttons">
            <img id="5" src="up.png" onclick="onClick(true, this.id)" />
            <span id="clickThree">0</span>
            <img id="6" src="down.png" onclick="onClick(false, this.id)" />
        </div>
        <div class="tex-area">
            <h4>Heading Three</h4>
            <p>Some random paragraph</p>
        </div>
    </div>
    <div class="red-div">
        <div class="like-buttons">
            <img id="7" src="up.png" onclick="onClick(true, this.id)" />
            <span id="clickFour">0</span>
            <img id="8" src="down.png" onclick="onClick(false, this.id)" />
        </div>
        <div class="tex-area">
            <h4>Heading Four</h4>
            <p>Some random paragraph</p>
        </div>
    </div>
</div>

My JavaScript function is as follows:

<script type="text/javascript">
    var clicks = 0;
    function onClick(flag, id) {
        alert(id); //Displays empty 
        if (flag && clicks < 10)
            clicks += 1;
        else if (!flag && clicks > 0)
            clicks -= 1;
        document.getElementById("clickOne").innerHTML = clicks;
        //How to ensure only relevant count goes up depending on the image clicked?
    };
</script>

What I'm trying to achieve is when a user clicks on one of the images only that span count for the particular section goes up and no other one. I've tried passing the id through but the alert comes back as blank. Can someone suggest where I'm going wrong or what would be the correct way to approach this.

Thanks in advance for your help.

Answer 1

Try this:

<div class="red-div">
    <div class="like-buttons">
        <img id="3" src="up.png" onclick="onClick(true, 'clickTwo')" />
        <span id="clickTwo">0</span>
        <img id="4" src="down.png" onclick="onClick(false, 'clickTwo')" />
    </div>
    <div class="tex-area">
        <h4>Heading Two</h4>
        <p>Some random paragraph</p>
    </div>
</div>


function onClick(flag, id) {
    var clicks = parseInt(document.getElementById(id).textContent, 10);
    if (flag && clicks < 10)
        clicks += 1;
    else if (!flag && clicks > 0)
        clicks -= 1;
    document.getElementById(id).innerHTML = clicks;
};

Here's a solution that doesn't need ID's at all

<div class="white-div">
    <div class="like-buttons">
        <img src="up.png" onclick="onClick(true, this)" />
        <span>0</span>
        <img src="down.png" onclick="onClick(false, this)" />
    </div>
    <div class="tex-area">
        <h4>Heading One</h4>
        <p>Some random paragraph</p>
    </div>
</div>

and the javascript

function onClick(flag, el) {
    var span = el.parentElement.querySelector('span');
    var clicks = parseInt(span.textContent, 10);
    if (flag && clicks < 10)
        clicks += 1;
    else if (!flag && clicks > 0)
        clicks -= 1;
    span.innerHTML = clicks;
};

Here it is working - http://jsfiddle.net/d1bd3eut/1/

I'm on a roll ...

<div class="white-div">
    <div class="like-buttons">
        <img src="up.png" onclick="onClick(this)" />
        <span>0</span>
        <img src="down.png" onclick="onClick(this)" />
    </div>
    <div class="tex-area">
        <h4>Heading One</h4>
        <p>Some random paragraph</p>
    </div>
</div>

JS

function onClick(el) {
    var span = el.parentElement.querySelector('span');
    var clicks = parseInt(span.textContent, 10);
    var value = -Math.sign(el.src.indexOf('own.png'));
    clicks = Math.max(0, Math.min(clicks + value, 10));
    span.innerHTML = clicks;
};

Fiddle http://jsfiddle.net/d1bd3eut/3/