www.webdeveloper.com
Results 1 to 3 of 3

Thread: Unable to change html attribute

  1. #1
    Join Date
    Mar 2013
    Posts
    10

    Unable to change html attribute

    Code:
                $(function() {
                    $(".vote").click(function() 
                    {
                        var id = $(this).attr("id");
                        var name = $(this).attr("name");
                        var parent = $(this);
                        if(name=='up')
                        {
                            var idtrim = id.replace('-up','');
                            var dataString = 'id='+ idtrim ;
                            var oppid = idtrim + '-down';
                            $(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
                            alert (dataString);
     $.ajax({
                                type: "POST",
                                dataType: "json",
                                url: "updown/up_vote.php",
                                data: dataString,
                                cache: false,
                                success: function(data)
                                {
                                    parent.html(data.upvalue);
                                    document.getElementById(oppid).innerHTML(data.downvalue);
                                }  });
                        }
    When I execute this code I get an error:

    TypeError: document.getElementById(...).innerHTML is not a function
    [Break On This Error]

    document.getElementById(oppid).innerHTML(data.downvalue);

    I have tried setting a variable and then changing html (as in the parent.html line above my error:
    Code:
    var opposite = document.getElementById(oppid);
    opposite.html(data.downvalue);
    which gives this error:
    TypeError: opposite.html is not a function
    [Break On This Error]

    opposite.html(data.downvalue);

    What am I doing wrong?
    Thanks,

  2. #2
    Join Date
    Nov 2010
    Posts
    1,050
    it's a curious mix of jQuery (I assume) and vanilla js you have there, but in vanilla you set the innerHTML like this:
    Code:
    document.getElementById(oppid).innerHTML=data.downvalue;
    in jQuery it would be like this:
    Code:
    $("#"+oppid).html(data.downvalue);
    you should maybe choose one or the other

    the problem with your "opposite" line is that getElementById returns a DOM object but .html("something") is a jQuery method

    the reason why your parent line works is because you convert "this" (whatever "this" is) to a jQuery object on this line:
    Code:
    var parent = $(this);
    which would work equally, if you wanted to go that way by doing
    Code:
    var opposite = $(oppid);
    opposite.html(data.downvalue);
    (I think... or maybe it would be var opposite =$("#"+oppid))

    Anyway. The point is you can mix jQuery and javascript (jQuery is just javascript after all) but you have to know what you're doing. Until you're confident it's best to stick to one or the other (and the general advice tends to be learn javascript basics before starting to use jQuery shortcuts)

  3. #3
    Join Date
    Mar 2013
    Posts
    10
    Thanks. Javascript and jQuery are next on my list of things to learn. I was going to just learn PHP but I find myself constantly stumbling through jQuery because I need Ajax to get my applications to behave the way I want them to.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles