CODEWITHSUNDEEP
javascripthtmlforms
Alex
Alex

Reputation: 780

Show a javascript variable on html textbox

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>

Upvotes: 0

Views: 12186

Answers (4)

thefourtheye
thefourtheye

Reputation: 239473

<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.

  1. It is always better to give unique ids to your html elements.
  2. Never name your HTML elements and javascript functions the same.
  3. If you want to access the html element from javascript, if you know the id, use getElementById.
  4. Use Firebug or Developer tools from the browser, to debug.
  5. 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/

Upvotes: 4

HasanAboShally
HasanAboShally

Reputation: 18675

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.

Upvotes: 0

S. S. Rawat
S. S. Rawat

Reputation: 6111

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

Upvotes: -1

R. Oosterholt
R. Oosterholt

Reputation: 8080

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

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

Upvotes: -1

Related Questions