SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    increment label value on image click

    How would i go about doing the following:

    Im looking to increment a value of a Lable when an image is clicked.
    e.g. if the label contains 1 and the image is clicked, the label should be changed to 2.

    Any ideas?

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    document.getElementById('the_image').onclick = function () {
      var the_label = document.getElementById('the_label');
      var currval = parseFloat(the_label.innerHTML);
      the_label.innerHTML = currval + 1;
    }
    Something like that?

  3. #3
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry for posting again, my javascipt coding is v.poor. Could you just have a look at the following to check where im going wrong:

    Code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
        <script>
        IncrementQuantity() {
            var the_label = document.getElementById('the_label');
            var currval = parseFloat(the_label.innerHTML);
            the_label.innerHTML = currval + 1;
        }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <script>
            document.getElementById('the_image').onclick = IncrementQuantity();
        </script>
        <div>
            <asp:Label ID="the_label" runat="server" Text="0"></asp:Label>
            <asp:Image ID="the_image" runat="server" /></div>
        </form>
    </body>
    </html>

  4. #4
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IncrementQuantity() {

    should be

    function IncrementQuantity() {

    and

    onclick = IncrementQuantity();

    should be

    onclick = IncrementQuantity;

  5. #5
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have made the alterations suggested, however still no joy.
    When running the page in firefox, I get the following error in javascript console:
    "document.GetElementByID("the_image") has no properties"
    Any ideas?

    Code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
        <script>
        function IncrementQuantity() {
            var the_label = document.getElementById('the_label');
            var currval = parseFloat(the_label.innerHTML);
            the_label.innerHTML = currval + 1;
        }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <script>
            document.getElementById('the_image').onclick = IncrementQuantity;
        </script>
        <div>
            <asp:Label ID="the_label" runat="server" Text="0"></asp:Label>
            <asp:Image ID="the_image" runat="server" ImageUrl="~/images/arrow/arrowup.GIF" /></div>
        </form>
    </body>
    </html>

  6. #6
    I'm not a human
    Join Date
    Aug 2006
    Location
    India
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi,

    instead of this
    document.getElementById('the_image').onclick = IncrementQuantity;

    use ,

    var ele = document.getElementById('the_image');
    ele.setAttribute("onclick","IncrementQuantity()");

    i think this would work
    Regards,
    Vijay
    Follow me on twitter @vijaycbe
    World Holiday Calander || My Cricket Blog

  7. #7
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you my frired, that sorted it

  8. #8
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kvijayhari
    ele.setAttribute("onclick","IncrementQuantity()");
    This will fail in Internet Explorer. Use:
    Code:
    ele.onclick = IncrementQuantity;


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •