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. #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    29,698
    Thanks
    93
    Thanked 4,947 Times in 4,908 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;
    }
    Be yourself. No one else is as qualified.

  3. #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    29,698
    Thanks
    93
    Thanked 4,947 Times in 4,908 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>
    Be yourself. No one else is as qualified.

  4. #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,689
    Thanks
    58
    Thanked 665 Times in 660 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. #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    29,698
    Thanks
    93
    Thanked 4,947 Times in 4,908 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.
    Be yourself. No one else is as qualified.


 

Posting Permissions

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