Home/ Questions/Q 7796013
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T23:14:25+00:00

I’m trying to take a user input, turn it into a JS variable, and

  • 0

I’m trying to take a user input, turn it into a JS variable, and use it in multiple places in the html.

I’ve included an alert function immediately after the user enters the input and that works, but I can’t display the variable at the bottom.

Here’s the code:

<body>
 <div class="hero-unit">
   <h1> Title </h1>
     <p> This form description </p>  
      <form class="well" name="formInput" action= "#">
       <label>Input</label>
        <input Id="txtvarInput" class="span3" style="margin: 0pt auto;" type="text" placeholder="AAA, BBB, CCC..." data-provide="typeahead" data-items="10" data-source="[&quot;AAA&quot;,&quot;BBB&quot;,&quot;CCC&quot;,&quot;DDD&quot;,&quot;EEE&quot;,&quot;FFF&quot;,&quot;GGG&quot;,&quot;HHH&quot;,&quot;III&quot;,&quot;JJJ&quot;,&quot;KKK&quot;,&quot;LLL&quot;]"/>               
       </label>
      <div class="form-actions" "span3">
        <input name="submit" type="submit" class="btn" value="Select" onclick="alert('you chose ' + theInput.value)"/>
         <script language="javascript" type="text/javascript">
          var theInput = document.getElementById('txtvarInput');
         </script>
       </div>
     </form>
   </div>

<div class="page-header">
  <h1>Input:
    <script language="javascript" type="text/javascript">
      document.write(theInput.value);
    </script>
 </h1>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    JavaScript works a bit differently than you might be imagining.

    When you say…

    document.write(theInput.value);

    …right in the middle of some html element somewhere, it only calls that once when the page first renders.

    If you want to call it when the text input changes or a button is clicked you’ll need to put it in a function and call that function when some event happens on some element.

    See this link to learn about events: http://www.w3schools.com/js/js_events.asp

    HOWEVER, document.write() is a bit different where, when called from a function, it will overwrite the entire page!

    So… in this case you will need to “append” a text element to the <h1> element that you are trying to update.

    See this link to learn more about the document object model (DOM) and working with its elements: http://www.w3schools.com/jsref/dom_obj_element.asp

    Once you’re familiar with these principals you’ll want to make your life a lot easier and your code more cross-browser friendly by checking out a framework for doing these things like jQuery: http://jquery.com/

    UPDATE (ADDED VALUE):
    For those interested, something like what is being asked here can be accomplished quite easily today in “pageless”, JavaScript based web applications using AngularJS (http://angularjs.org/). Do read up on the documentation and the appropriate circumstances under which this technology can be utilized. Start with the FAQs (http://docs.angularjs.org/misc/faq) and move into the videos (http://www.youtube.com/user/angularjs).

    • 0