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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Newcomer: Simple button + Alert box

    Hi all, I'm new to the forum and Javascript. I have a simple project I want to complete. I have an input box, and a button. When I click the button I want to take text from the input box and display it in an alert window.

    As it stands, data is being pulled from the 'sCounters' input box and is displayed in the alert window. However, if I change the data in the window while the page is loaded and active, then press the button, the data in the alert window does not change to reflect the current data in the input box???

    So, that's my problem. As I say, I'm new to this and I'm sure it's quite basic. I'd be delighted with some help.

    Regards,
    LF

    My Html...

    <fieldset>
    <legend>Details</legend>

    <label for "name">Name</label>
    <input id="name">

    <label for "wCounters">Weiße Zähler</label>
    <input id="wCounters" type="number" value='1' min="0" max="10">

    <input type="button" id="test" value="Test">
    </fieldset>

    js file...

    $(document).ready(function() {

    var x=document.getElementById("wCounters").value;

    $('#test').click(function(){
    window.alert(x);
    });

    });

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    you are getting the value of x after the page has loaded but before the click has happened. try this:

    Code:
    $(document).ready(function() {
    
    $('#test').click(function(){
    var x=document.getElementById("wCounters").value;	
    window.alert(x);
    });
    
    });

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    The code you are showing there would require one of the JavaScript libraries--most likely jQuery--in order to run. Is there some reason you want to pull in the entire jQuery library for something as simple as this?

    Also, are you aware that alert( ) is considered (a) very obsolete and (b) bad practice except maybe when debugging code. Some browsers now allow the user to turn off alerts. And you can expect that in the near future that will be true with *all* browsers. What good is an alert( ) if the use has disabled it?
    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.

  • #4
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Reply

    Thank you very much for the replies.

    The solution worked properly.

    Regarding use of the alert box, it's just a temporary measure. I wanted to learn how to pull data from an input box, place it in a variable and then have it available to perform operations upon. Using an alert box was purely for test purpose to see that I was successfully collecting data.

    As for using JQuery, I'd be happy to see an example without it's use. I have been looking at JQuery aswell as Javascript itself. If there are better methods, I'd be delighted to see.

    Thanks again for prompt replies.

    LF

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Using jQuery is like using a sledghammer to crack a nut. There is a massive overhead. You should look at jQuery after you have become proficient at Javascript, not before.


    Code:
    <input type= "text" id ="mytext" size = "2" maxlength = "2" value = 1>
    <input type = "button" id = "mybutton" value = "Alert the Textbox Value" onclick = "showValue()">
    
    <script type = "text/javascript">
    
    function showValue() {
    var val = Math.floor(document.getElementById("mytext").value);   // make an integer number
    if (val <=10 && val >=0) {
    alert (val);  // use alert() only for testing purposes
    }
    else {
    alert ("Invalid value entered - must be 0-10");
    }
    }
    
    </script>

    BTW, you should avoid giving names or id's to your variables/functions/arguments/forms words which are HTML/JavaScript methods/properties/attributes such as 'name' or 'id' or 'value' or 'test' or 'text' or 'checked' or 'click' or 'href' or 'closed' or 'go' or 'submit' or 'replace' or 'button' or 'radio' or 'parseInt'.
    And of course you may not give a variable a name which is a Javascript keyword or event such as alert, case, char, confirm, false, int, null, onload, return, this, void, window, and so on.


    A couple of errors cost us two goals and that was all that was good about the game. - Football team coach
    Last edited by Philip M; 12-30-2012 at 12:39 PM.

    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
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much Philip, excellent and useful advice on Javascript and naming conventions. I agree, I can see Javascript fulfilling my requirements just fine. I'll pursue this path.

    Thanks all for the prompt help.

    Regards,
    LF.

  • #7
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, Philip a quick question.

    I'm wondering, is it considered good practice to include the onclick function call in your HTML?

    Code:
    <input type = "button" id = "mybutton" value = "Alert the Textbox Value" onclick = "showValue()">
    As it is, I'm laying out structure on HTML, styling through CSS and was wondering about separating all Javascript code. Not sure if a call to a function is an issue though to be honest, just something that came to mind.

    I'm new to this, so am wondering if this is the conventional and recommended approach.

    Thanks,
    LF

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    conventional: yes
    recommended: not really

    the problem that you may run into later is that if you add another onclick to that button in the javascript it will override the first. and if you add another it will override the second.

    It's not something to lose too much sleep over at this point, but some people advocate learning to do it right from the beginning to avoid developing bad habits.

    To simply separate the javascript from the html you would do:

    Code:
    <input type= "text" id ="mytext" size = "2" maxlength = "2" value = 1>
    <input type = "button" id = "mybutton" value = "Alert the Textbox Value">
    
    <script type = "text/javascript">
    document.getElementById("mybutton").onclick=showValue;
    
    function showValue() {
    var val = Math.floor(document.getElementById("mytext").value);   // make an integer number
    if (val <=10 && val >=0) {
    alert (val);  // use alert() only for testing purposes
    }
    else {
    alert ("Invalid value entered - must be 0-10");
    }
    }
    </script>
    to make the javascript unobtrusive (ie, allow various click listeners on the same button not to conflict with each other) you would do something like

    Code:
    <input type= "text" id ="mytext" size = "2" maxlength = "2" value = 1>
    <input type = "button" id = "mybutton" value = "Alert the Textbox Value">
    
    <script type = "text/javascript">
    if (window.addEventListener)
    addEvent = function(ob, type, fn ) {
    ob.addEventListener(type, fn, false );
    };
    else if (document.attachEvent)
    addEvent = function(ob, type, fn ) {
    var eProp = type + fn;
    ob['e'+eProp] = fn;
    ob[eProp] = function(){ob['e'+eProp]( window.event );};
    ob.attachEvent( 'on'+type, ob[eProp]);
    };
     
    addEvent(document.getElementById('mybutton'),'click',showValue);
    addEvent(document.getElementById('mybutton'),'click',secondFunc);
    
    function showValue() {
    var val = Math.floor(document.getElementById("mytext").value);   // make an integer number
    if (val <=10 && val >=0) {
    alert (val);  // use alert() only for testing purposes
    }
    else {
    alert ("Invalid value entered - must be 0-10");
    }
    }
    
    function secondFunc(){
    alert("another function")
    }
    </script>
    felgall explains it more in depth here

  • #9
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great Xelawho, thanks for the in depth answer.

    I want to get the simple stuff straight to begin with and then build.

    Regards,
    LF


  •  

    Posting Permissions

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