Show a javascript variable on html textbox

Question

All I have to do is to show a number in a textbox and a button which add 10 every time I press it, here's my code (it doesn't work).

<head>
    <script type="text/javascript">
    var n=parseInt(ocument.forms["formNum"]["numero"].value);
    document.getElementById("numero").value=n;

    function sumar() {
        n=document.forms["formNum"]["numero"].value+10;
        document.forms["formNum"]["numero"].value=n;
    }

    function inicializar() {
        n=document.forms["formNum"]["numero"].value=0;
    }
    </script>
</head>

<body>
    <form name="formNum">
        <p>
            <input type="text" size="10" name="numero" id="numero" />
        </p>

        <p>
            <input type="button" name="sumar" value="Sumar" onclick="sumar()" />
            <input type="button" name="inicializar" value="Iniciar a 0" onclick="inicializar()" />
        </p>
    </form>
</body>

thefourtheye · Accepted Answer · 2013-10-11 07:40:40Z

4

<body>
    <script type="text/javascript">
       function sumar(){
           document.getElementById("numero").value = parseInt(document.getElementById("numero").value)+10;
       }

       function inicializar(){
           document.getElementById("numero").value=0;
       }
    </script>

    <form name="formNum">
        <p>
            <input type="text" size="10" name="numero" id="numero" value="0" />
        </p>

        <p>
            <input type="button" value="Sumar" onclick="sumar()" />
            <input type="button" value="Iniciar a 0" onclick="inicializar()" />
        </p>
     </form>
</body>

Five suggestions.

It is always better to give unique ids to your html elements.
Never name your HTML elements and javascript functions the same.
If you want to access the html element from javascript, if you know the id, use getElementById.
Use Firebug or Developer tools from the browser, to debug.
If you want to access your elements with the hierarchy, use elements in the form like this document.forms["formNum"].elements["numero"].value. Check this example

Demo: http://jsfiddle.net/DPJCR/

edited Oct 11, 2013 at 7:40

answered Oct 11, 2013 at 7:35

thefourtheye

241k53 gold badges466 silver badges505 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

thefourtheye Over a year ago

Could you please explain what you tried and what didn't work?

Alex Over a year ago

Finally solved, it didn't work because i gave the samen "name" and "id" to the buttons...

Community · Accepted Answer · 2017-05-23 12:28:04Z

0

This code should work:

<input type="text" id="mytext">

<script type="text/javascript">
   var elem = document.getElementById("mytext");
   elem.value = "My default value";
</script>

See: Set the value of an input field

Maybe you are getting an exception from the parseInt that prevents the value from changing.

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Oct 11, 2013 at 7:36

HasanAboShally

18.8k9 gold badges32 silver badges35 bronze badges

Comments

R. Oosterholt · Accepted Answer · 2013-10-11 07:33:31Z

-1

If it is an option to use jQuery, try this:

function sumar(){
    $("#numero").attr("value", parseInt($("#numero").attr("value"), 10)+10);
}

answered Oct 11, 2013 at 7:33

R. Oosterholt

8,2003 gold badges56 silver badges80 bronze badges

Comments

S. S. Rawat · Accepted Answer · 2013-10-11 07:36:22Z

-1

Try this this will help you

var count=10;
$('#btnSumar').click(function(){
              if($('#numero').val()=='')
              {
                  $('#numero').val(count);
              }else

           $('#numero').val(eval($('#numero').val())+count);    

                     });
$('#btnInc').click(function(){
    $('#numero').val('');});

Fiddle here

answered Oct 11, 2013 at 7:36

S. S. Rawat

6,1414 gold badges45 silver badges59 bronze badges

3 Comments

Pavlo Over a year ago

Any reason to use eval here?

S. S. Rawat Over a year ago

evali used to retrive numaric value from textbox rather than string

Pavlo Over a year ago

That's what parseFloat()/parseInt() for. Other problems I see here: unsolicited use of jQuery and not cached selectors.

Collectives™ on Stack Overflow

Show a javascript variable on html textbox

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related