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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Put textbox value in paragraph

    Hi, I'm trying to figure out how to get the value from a textbox and put it into a paragraph by clicking a button. This is what i got. Very new to this, so anything helps. Thanks.

    Code:
    <html>
    <body>
    
    <p id="par1"></p>
    
    <input id="demo" type="text">
    
    <script>
    function myFunction()
    {
    var x=document.getElementById("demo").value;
    ((( dont know what to put here? )))
    }
    </script>
    
    <button type="button" onclick="myFunction()">Click Me!</button>
    
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,133
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Code:
    function myFunction()
    {
        var x=document.getElementById("demo").value;
        document.getElementById("par1").innerHTML = x;
    }
    Or get rid of x:
    Code:
    function myFunction()
    {
        document.getElementById("par1").innerHTML = document.getElementById("demo").value;
    }
    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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,133
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Cleaner (more modern) code:
    Code:
    <html>
    <body>
    <p id="par1"></p>
    <input id="demo" type="text">
    <button id="theButton" type="button">Click Me!</button>
    
    <script type="text/javascript">
    document.getElementById("theButton").onclick = 
        function( )
        {
            document.getElementById("par1").innerHTML = 
                document.getElementById("demo").value;
        }
    </script>
    </body>
    </html>
    And even more modern (and "unobtrusive"):
    Code:
    <html>
    <body>
    <p id="par1"></p>
    <input id="demo" type="text">
    <button id="theButton" type="button">Click Me!</button>
    
    <script type="text/javascript">
    (
      function()
      {
          document.getElementById("theButton").onclick = 
              function( )
              {
                  document.getElementById("par1").innerHTML = 
                      document.getElementById("demo").value;
              }
      }
    )();
    </script>
    </body>
    </html>
    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
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,910
    Thanks
    56
    Thanked 544 Times in 541 Posts
    just out of interest, how is the second one there more unobtrusive? I can see the value of wrapping code ion a self-executing function so as to isolate variables, but there are no variables, and the code in the first example will execute on page load, anyway... so...?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,133
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    LOL! You are dead-on right! Shame on me.

    Okay...if the situation involved using variables that would end up being page scope *then* the second version is less obtrusive.

    Sorry. Couldn't see the forest for the trees.
    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.


  •  

    Posting Permissions

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