Urgent help needed

Discussion in 'HTML & Website Design' started by ReaL DiGiTaL GiRL, Dec 24, 2014.

  1. #1
    Hi all
    I have this html button
    <button id="button">Button</button>
    Code (markup):
    How can i add java-script under/inside this button?
     
    ReaL DiGiTaL GiRL, Dec 24, 2014 IP
  2. aidanriley629

    aidanriley629 Banned

    Messages:
    429
    Likes Received:
    23
    Best Answers:
    3
    Trophy Points:
    175
    #2
    What do you want the button to do once clicked..?
     
    aidanriley629, Dec 24, 2014 IP
  3. ReaL DiGiTaL GiRL

    ReaL DiGiTaL GiRL Banned

    Messages:
    35
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #3
    i want that when the button got clicked the action in the java-script should be performed .
     
    ReaL DiGiTaL GiRL, Dec 24, 2014 IP
  4. Axumata

    Axumata Greenhorn

    Messages:
    22
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    10
    #4
    <script>
    
    //pure JS
    button = document.getElementById("button");
    button.onclick(function(){
              //your function
    });
    
    // or JQuery
    $("#button").click(function(){
              //your function
    });
    </script>
    Code (markup):
     
    Axumata, Dec 24, 2014 IP
  5. ramnik Rangpariya

    ramnik Rangpariya Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #5
    <script>
    
    //pure JS
    button = document.getElementById("button");
    button.onclick(function(){
              //your function
    });
    
    // or JQuery
    $("#button").click(function(){
              //your function
    });
    </script>
    PHP:
     
    Last edited by a moderator: Dec 25, 2014
    ramnik Rangpariya, Dec 25, 2014 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Is that 'button' actually a form input, or is it JUST for scripttardery? If the latter, why are you using the BUTTON tag which has a semantic meaning for a form?
     
    deathshadow, Dec 25, 2014 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    I see some ambiguity in the button element's place within the document structure. A button of type button has no default event handler and expects one to be attached through scripting. The same applies for input of type button. A button or input of type reset|submit is obviously a different kettle of fish, as their event handlers depend on form.

    Per the W3C validator for html4|html5|xhtml1.0, none throw an error for input or button not living within a form element. HTML5 doesn't object to input or button not having a block container.

    Except for button of type button, I agree that these form controls belong within a form. I confess to a long history of using the button/button element as a javascript hook.

    cheers,

    gary
     
    kk5st, Dec 25, 2014 IP
  8. Axumata

    Axumata Greenhorn

    Messages:
    22
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    10
    #8
    I believe that all that «use button tags only in a form» stuff exists due to the behavior of buttons in IE6. Modern browsers have no problems with buttons.
     
    Axumata, Dec 25, 2014 IP
  9. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #9
    Agree, I work on WebGL and mostly process data on the user machine. The alternative to this is mark it up with a bogus link and add role as button. I found that plain button handle this kind of job better.

    The other usage if when you ask user permission. Would you use a fake link or a button.

    More: a javascript function that requires the user's decision, do you use a fake link or a button to fire it.

    They focus on text content so they stick to the old school mark up.

    I wonder if they know how to ignite their car engine with javascript. In this case, would you use a fake link or a button.

    The internet of thing age is coming. Let's them be.
     
    Last edited: Dec 25, 2014
    ketting00, Dec 25, 2014 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #10
    The reason not to abuse button is like not abusing FIELDSET just because you want a border around things, HR's just because you want a line across the screen (not what it means) or EM and STRONG just because you want the text in bold or italic... It's called semantic markup!

    BUTTON is a form type element, so use it for forms. Defending using it (or INPUT, or any other form element) outside a FORM is like arguing that visual user agents (what you guys would call a browser) doesn't have a problem using a H1 instead of P for all the text on a page or blindly slapping P around anything and everything for Christmas only knows what reason; doesn't make it the proper behavior even if it does validate and the browser has no problems showing it. It's still UTTER AND COMPLETE GIBBERISH when on a non-visual UA like screen readers and defeats the entire purpose of HTML even having tags in the first place.

    Of course if it's a scripttardery only element, should it even BE functional browser-wise scripting off? ...or even in the markup for that matter? -- You know, graceful degradation by way of progressive enhancement?
     
    deathshadow, Dec 26, 2014 IP
  11. jamjar919

    jamjar919 Well-Known Member

    Messages:
    332
    Likes Received:
    7
    Best Answers:
    5
    Trophy Points:
    180
    #11
    
    <input type="button" onClick="someFunction()" value="Click Me!">
    <script>
    function someFunction() {
    //do something here...
    }
    </script>
    
    HTML:
     
    jamjar919, Jan 2, 2015 IP