Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Aug 2012
    Posts
    127
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Change href of a button

    I have an input button
    Code:
    <input type="button" value='Show'; style="width:45px;font-size:11px;color:green;" onClick="javascript:*************">
    I want on the first click, "onlick" of the button changes to a function **** which changes "onclick" to open an URL link, such as http://www.codingforums.com
    on the second click, it open link http://www.codingforums.com
    Thanks for help
    Last edited by docco; 08-24-2014 at 10:41 AM.

  • #2
    New Coder
    Join Date
    Aug 2014
    Location
    Thessaloniki,Greece
    Posts
    40
    Thanks
    2
    Thanked 2 Times in 2 Posts
    ok, write :

    <input id="mybutton" value='Show' style="wahtever you want">

    And in javascript:

    $(function(){
    var hits = 0; //variable that count the hits button
    $('#mybutton').click(function(){
    if (hits % 2 !== 0) //for hits 2,4,6,8 etc. Also the condition
    {
    //Do whatever you want, or
    window.location='http://www.yournewurllink.com';
    }
    else
    { // for hits 1,3,5,7
    //Do whatever you want, or nothing
    }
    hits++;
    return false;
    });
    });


    }

  • #3
    Regular Coder
    Join Date
    Aug 2012
    Posts
    127
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by marios.frag View Post
    ok, write :

    <input id="mybutton" value='Show' style="wahtever you want">

    And in javascript:

    $(function(){
    var hits = 0; //variable that count the hits button
    $('#mybutton').click(function(){
    if (hits % 2 !== 0) //for hits 2,4,6,8 etc. Also the condition
    {
    //Do whatever you want, or
    window.location='http://www.yournewurllink.com';
    }
    else
    { // for hits 1,3,5,7
    //Do whatever you want, or nothing
    }
    hits++;
    return false;
    });
    });


    }
    Thank you very much for your fast help.
    But please simplify the code as much as posible. I only want to change "onlick" function in the 1st click, and please not use if...else

    Code:
    <input type="button" value='Show'; style="width:45px;font-size:11px;color:green;" onClick="
    	this.onclick ='window.open('http://www.codingforums.com')';";
    	">
    But something wrong in this code ???????
    Last edited by docco; 08-24-2014 at 10:50 AM.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,032
    Thanks
    15
    Thanked 240 Times in 240 Posts
    Your gonna need to use something like if/else because the first click changes the button depending upon conditions.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Code:
    <input type="button" value='Show'; style="width:45px;font-size:11px;color:green;" onclick="window.location = 'http://www.codingforums.com'">
    Clear as mud. How can there be as second click if a new page is invoked?
    And according to you a second click does exactly the same thing.

    “What is a cynic? A man who knows the price of everything and the value of nothing.”
    Oscar Wilde (Irish Poet, Novelist, Dramatist and Critic, 1854-1900)

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Regular Coder
    Join Date
    Aug 2012
    Posts
    127
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    Your gonna need to use something like if/else because the first click changes the button depending upon conditions.
    OK accept if else, please help for the code

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    mario.frag: Please do NOT give jQuery answers if the user's code is not already using jQuery. There are still some of us Luddites who don't use jQuery (or who use other libraries).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Try this:
    Code:
    <html>
    <body>
    ...
    <input id="mybutton" value="Prepare to go" />
    ...
    <script type="text/javascript">
    document.getElementById("mybutton").onclick = 
        function( )
        {
            if ( this.value == "Prepare to go")
            {
                this.value = "Go now!!";
            } else {
                window.location = "http://www.codingforums.com";
            }
        };
    </script>
    </body>
    </html>
    Note carefully where the <script> tag is! It is *NOT* in the <head> of the page.

    The two value properties that you use can of course be anything you like.

    Or you could base it on the classname. Or or or...

    Example of using a class name, so that the appearance of the button doesn't need to change:
    Code:
    <html>
    <body>
    ...
    <input id="mybutton" value="Click twice to go" />
    ...
    <script type="text/javascript">
    document.getElementById("mybutton").onclick = 
        function( )
        {
            if ( this.className.indexOf("buttonReady") < 0 )
            {
                this.className += " buttonReady";
            } else {
                window.location = "http://www.codingforums.com";
            }
        };
    </script>
    </body>
    </html>
    Note that you don't even need a <style> for that class name. But you could have one, if you wanted.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 592 Times in 572 Posts
    just slight variation on a theme, if you want to place the <script> tag anywhere, you can use event delegation:


    Code:
    <script type="text/javascript">
    document.addEventListener("click", function(e){
          var that=e.target || this; 
    
          if(that.id!="mybutton") return; // apply only to one ID   
       
            if ( that.value == "Prepare to go")
            {
                that.value = "Go now!!";
            } else {
                window.location = "http://www.codingforums.com";
            }
    }, true);
    </script>
    EDIT: oops, i forgot how delegation works, you need to use the event target instead of this...
    Last edited by rnd me; 08-24-2014 at 11:39 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    Old Pedant (08-24-2014)

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Cute. I might even have some uses for that trick.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Regular Coder
    Join Date
    Aug 2012
    Posts
    127
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Old Pedant, you always great!
    Now please help for this: I want to display a long text (in a frame such as button). The text is controlled/updated with getElementbyID('xxx').value = "text".
    In this case how can I divide the text into many lines? Or any other solution to dispaly long text in a frame and use getElementbyID.value to updated?

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Simple... JavaScript does *NOT* allow you to span text across multiple lines, but you can always create long strings by appending.
    Code:
    <div id="infoDiv"></div>
    ...
    <script>
    var info = "This is a line of text that is pretty long but has no content<br>\n"
             + "And this is another line of text that is pretty long but has no content<br>\n"
             + "And yet another line of text that is pretty long but has no content<br>\n";
    document.getElementById("infoDiv").innerHTML = info;
    </script>
    If you truly wanted to use .value (which ONLY is used with <form> fields!!) then:
    Code:
    <form id="infoForm">
        <textarea name="infoArea"></textarea>
    </form>
    ...
    <script>
    var info = "This is a line of text that is pretty long but has no content\n"
             + "And this is another line of text that is pretty long but has no content\n"
             + "And yet another line of text that is pretty long but has no content\n";
    document.getElementById("infoForm").infoArea.value = info;
    </script>
    Notice that to create line breaks in a <div> you need to use <br>s. In a <textarea>, only the \n newlines are needed.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    New Coder
    Join Date
    Aug 2014
    Posts
    27
    Thanks
    0
    Thanked 1 Time in 1 Post
    You can simply change using below code.

    buttonInstance.href = 'new value';


    Or you can use

    button.href = '#new_link';
    button.el.dom.href = button.getHref();


    I hope that will work for you.!


  •  

    Posting Permissions

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