Question

我正在尝试接受用户输入，将其转换为JS变量，并在html中的多个位置使用它。

我在用户输入输入后立即包含一个警报功能，但是我无法在底部显示变量。

以下是代码：

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

Answer 1

在document.onload函数中，我会提出以下内容：

theInput.onchange = function(event){
  document.getElementById('h1Id').innerHTML = theInput.value
}

可能每次用户更改输入时都希望HTML更新？

Answer 2

JavaScript的工作方式与您想象的不同。

当你说...

document.write(theInput.value);

...在某个地方的某个html元素中间，它只在页面首次渲染时调用一次。

如果要在文本输入更改或单击按钮时调用它，则需要将其放在函数中，并在某个元素上发生某些事件时调用该函数。

请参阅此链接以了解活动：http://www.w3schools.com/js/js_events.asp

但，document.write()有点不同，从函数调用时，会覆盖整个页面！

所以......在这种情况下，你需要将一个文本元素“追加”到你想要更新的<h1>元素。

请参阅此链接以了解有关文档对象模型（DOM）的更多信息并使用其元素：http://www.w3schools.com/jsref/dom_obj_element.asp

一旦你熟悉了这些原理，你就可以通过查看用于执行jQuery的框架http://jquery.com/

更新（已增加值）： 对于那些感兴趣的人来说，今天可以很容易地在使用AngularJS（http://angularjs.org/）的“无页面”，基于JavaScript的Web应用程序中完成这样的问题。请阅读文档以及可以利用此技术的适当环境。从常见问题解答（http://docs.angularjs.org/misc/faq）开始，然后进入视频（http://www.youtube.com/user/angularjs）。

Answer 3

更新应在单击按钮后进行。

<html>
<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">

        // UPDATED HERE
        <input name="submit" type="submit" class="btn" value="Select" 
          onclick="alert('you chose ' + theInput.value);     
          document.getElementById('inputresult').innerHTML = theInput.value;"/>

         <script language="JavaScript" type="Text/JavaScript">
          var theInput = document.getElementById('txtvarInput');
         </script>
       </div>
     </form>
   </div>

<div class="page-header">
  <h1 id="myh1">Input:</h1>

   <!-- UPDATED HERE -->
    <div id="inputresult">

    </div>
 </h1>
</div>

Answer 4

提供语义标记，包括值的占位符，例如

Input: <span class="inp-reflector"></span>

<!-- Or, for HTML5+ -->
Input: <output class="inp-reflector"></output>

在程序上将一个或多个事件处理程序附加到您的输入中：

var inp = document.querySelector('#input-id');
inp.addEventListener('input',update,false);
inp.addEventListener('change',update,false);

让您的事件处理程序检索输入的值并更改您的页面：

function update(evt){
  var changedElement = evt.target;
  var newValue = changedElement.value;
  var outputs  = document.querySelectorAll('.inp-reflector');
  outputs.forEach(function(out){
    out.innerHTML = newValue;
  });
}

答案故意仅使用现代浏览器中的JavaScript功能。

对于通用反射系统：

<input class="reflectable" data-reflect-to=".bar">
…
document.querySelectorAll('.reflectable').forEach(function(el){
  el.addEventListener('change',reflect,false);
  el.addEventListener('input',reflect,false);
});

function reflect(evt){
  var outSelector = evt.getAttribute('data-reflect-to');
  document.querySelectorAll(outSelector).forEach(function(o){
    o.innerHTML = evt.target.value;
  });
}

Answer 5

如下所示的内联脚本将在浏览器呈现后立即执行。因此，一旦浏览器在用户输入任何输入之前呈现该特定脚本标记和方式，下面的脚本就会执行，因此您创建的全局变量不会填充用户输入的任何数据。您需要将事件附加到页面上的提交按钮，该按钮设置全局变量并将其显示在页面上。

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

在整个页面中使用JS变量（来自HTML表单）

5 个答案: