locked
Add text to input element (noob question)

    Question

  • Hey all,

    So I am creating a very basic app to get my feet wet (apologies in advance!) and I am a little stuck more than likely because I don't fully understand event handlers.

    What I am trying to do is add an event listener so that when a button is clicked a number is added to a number input element (a calculator pretty much).

    This is done by onclick send it to another method and add it to the text field. It could be a number of things I am sure but I think perhaps it is one (or both) of two things.

    • In my event listener I call my addNumber method to handle the event on click and that method takes two arguments, eventInfo (which I am a little lost on) and the number to add to the text box and I think there is something wrong those arguments.
    • innerText is not the proper call to add to an input element.

    Thanks in advance!

    Here is my code:

                args.setPromise(WinJS.UI.processAll());
    
                var oneButton = document.getElementById("one");
                oneButton.addEventListener("click", addNumber(eventInfo, 1), false);
    
            }
        };
    
        app.oncheckpoint = function (args) {
     args.setPromise().
        };
    
        
    //method adds passed number to the number field
        function addNumber(eventInfo, numberToAdd) {                
    
                var numberField = document.getElementsById("numberInput");
                numberField.innerText = numberToAdd;
            
        }


    Friday, January 11, 2013 11:55 PM

Answers

  • Well I guess I will put this here for anyone in the future.

    I didn't solve the problem of having one event handler for all the buttons on the calculator, I ended up breaking it up so each button had an on click event and its own event handler.

    And in terms of adding to a text field with buttons, the event handler selected the text field and changed the value attribute. See example for button two below.

    function twoHandle(eventInfo) {
    
            document.getElementById("numberInput").value += 2;
        }

    • Marked as answer by Rohan Brooker Sunday, January 13, 2013 12:37 AM
    Sunday, January 13, 2013 12:37 AM