SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jan 2008
    Location
    Palm Harbor, FL
    Posts
    348
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question JavaScript: Changing the onclick value of a link

    How do I use JavaScript to change the onclick value of a link?

    Example link:
    <a id="voteup" href="#" onclick="vote(0,1);">Vote Up</a>

    Inside the function that's supposed to change the value, I've been trying to use something like:
    document.getElementById("voteup").onclick = "vote("+itemID+",1);";

    Needless to say, it's not working.

    It works fine to change the href value though...
    e.g.: document.getElementById("voteup").href = "vote.php?id="+itemID+"&amp;vote=1";

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,899
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Quote Originally Posted by Morthian View Post
    How do I use JavaScript to change the onclick value of a link?
    Could you give us a brief example of what you are trying to do (obviously something to do with upvotes) and provide a minimum amount of code that we can run to recreate your issue?

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You shouldn't be using code like that at all.

    1. You need to replace the # with where you want the link to go for people who don't have JavaScript enabled.

    2. Get rid of the onclick event handler in the HTML and replace it with a click eventlistener in the separate JavaScript file. You can then attach whatever processing you like to the click and replace or remove actions as required.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Addict
    Join Date
    Jan 2008
    Location
    Palm Harbor, FL
    Posts
    348
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    You shouldn't be using code like that at all.

    1. You need to replace the # with where you want the link to go for people who don't have JavaScript enabled.

    2. Get rid of the onclick event handler in the HTML and replace it with a click eventlistener in the separate JavaScript file. You can then attach whatever processing you like to the click and replace or remove actions as required.
    I'm not all that fluent with JavaScript, so I'm not sure how to create the event listener, but I'll look into it.



    Quote Originally Posted by Pullo View Post
    Hi,



    Could you give us a brief example of what you are trying to do (obviously something to do with upvotes) and provide a minimum amount of code that we can run to recreate your issue?
    I was trying to keep it simple, but I can provide more code...

    Code:
    <div id="title" style="text-align:center; font-weight:bold;">---</div>
    <br />
    <div id="vote" style="text-align:center;">
    <a id="voteup" href="#" onclick="submitVote(0,1);">[Vote Up]</a> | <a id="votedown" href="#" onclick="submitVote(0,0);">[Vote Down]</a>
    </div>
    
    <script type="text/javascript">
    jwplayer().onPlaylistItem( function(event){
        document.getElementById("voteup").onclick = 'submitVote('+jwplayer().getPlaylistItem().mediaid+',1);';
    	document.getElementById("votedown").onclick = 'submitVote('+jwplayer().getPlaylistItem().mediaid+',0);';
    	document.getElementById("title").innerHTML = jwplayer().getPlaylistItem().title;
    return;
    });
      </script>
    I'm trying to use AJAX so that the page doesn't reload when somebody votes on the video currently playing from the playlist.
    I didn't include the AJAX code, but basically the function submitVote() sends a request to a PHP vote script.
    The function uses two integer variables, the first one is the ID of the video, which should be updated in the vote links upon each video to match the ID of the current video. The second is just the vote (0 for vote down; 1 for vote up).
    Before I started on the AJAX, the links pointed directly to the vote script, and there was no problem getting the variables in the href to change upon each video.
    The title still changes just fine.

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,899
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    So to summarize your problem:

    You some videos that people can vote on, these are identified by their id.
    You have two links per video, one for "Vote up" and one for "Vote down".
    You also have a list of the videos with a tally of up-votes and down-votes.
    When someone hits either the "Vote up" or the "Vote down" link on any of the videos, you want to submit an AJAX request to a PHP script which will then update the tally of up-votes and down-votes (presumably in a database).
    Once the AJAX request has completed, you want to update the tally of up-votes and down-votes for the respective videos on your page.

    Did I get that right?
    Last edited by Pullo; Sep 14, 2013 at 03:10. Reason: Added more detail

  6. #6
    SitePoint Addict
    Join Date
    Jan 2008
    Location
    Palm Harbor, FL
    Posts
    348
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi,

    So to summarize your problem:

    You some videos that people can vote on, these are identified by their id.
    You have two links per video, one for "Vote up" and one for "Vote down".
    You also have a list of the videos with a tally of up-votes and down-votes.
    When someone hits either the "Vote up" or the "Vote down" link on any of the videos, you want to submit an AJAX request to a PHP script which will then update the tally of up-votes and down-votes (presumably in a database).
    Once the AJAX request has completed, you want to update the tally of up-votes and down-votes for the respective videos on your page.

    Did I get that right?
    Yeah, that's pretty much the gist of it. I'm just having trouble getting JavaScript to update the onclick values of the vote links.
    But as felgall basically suggested... maybe I'm going about this all wrong. =/

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,899
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Morthian View Post
    I'm just having trouble getting JavaScript to update the onclick values of the vote links.
    Why do you need to do this?
    This isn't how AJAX works.

    Quote Originally Posted by Morthian View Post
    But as felgall basically suggested... maybe I'm going about this all wrong. =/
    Well, I can help you with that, but it's important that we understand what you are trying to do first.

    Would it help if I made a simple example page doing what I suggested above?

    If so, do you mind using the jQuery library to implement the AJAX functionality?


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
  •