2

我正在尝试获取用户输入，将其转换为 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>
4

5 回答 5

2

在一个document.onload函数中，我会输入以下内容：

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

大概您希望每次用户更改输入时更新 HTML？

于 2012-04-14T17:55:43.647 回答
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/

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

于 2012-04-14T18:05:54.940 回答
0

单击按钮后应进行更新。

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

于 2012-04-14T18:03:38.097 回答
0

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

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

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

  2. 以程序方式将一个或多个事件处理程序附加到您的输入：

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

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

    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;
  });
}
于 2012-04-14T18:09:32.423 回答
-1

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

<div class="page-header">
  <h1>Input:
    <script language="JavaScript" type="Text/JavaScript">
      document.write(theInput.value);
    </script>
 </h1>
</div>
于 2012-04-14T17:58:52.913 回答