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

我试图接受用户输入，将它变成一个JS变量，并在html中的多个位置使用它。在整个页面中使用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>

来源

2012-04-14 ssikes

您应避免与HTML – 2012-04-14 17:52:23

你就不能跳过此，并直接调用元素编写的代码内联？ 'document.getElementById（'txtvarInput'）.value'？ – Kamil 2012-04-14 17:52:47

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/

UPDATE（增值）： 对于那些有兴趣，像被问这里有什么方法可以很容易地在今天完成“无页面”，使用AngularJS的基于JavaScript的Web应用程序（http： //angularjs.org/）。请仔细阅读文档以及适用该技术的适当环境。从常见问题（http://docs.angularjs.org/misc/faq）开始，进入视频（http://www.youtube.com/user/angularjs）。

来源

2012-04-14 18:05:54

-1链接到W3Schools（请参阅http://w3fools.com），但+1是正确的。 – Phrogz 2012-04-14 18:15:26

@Progro我知道这会让我有些疲惫，但我使用它，因为它对于初学者来说不太可怕。这个链接并不像邀请：http：//www.w3.org/DOM/;）你有一个网站可能是这样的情况下更好的资源？ – 2012-04-14 18:20:31

看起来好像在给出的w3fools链接中有一些链接... – Arth 2012-04-14 18:23:37

在document.onload功能我把以下内容：

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

想必你想要的HTML更新每次用户改变输入？

来源

2012-04-14 17:55:43 Arth

你的意思是'event.target.value';但是如果你已经有了'theInput'的句柄，你可以使用'theInput.value'，因为函数是一个闭包。 – Phrogz 2012-04-14 18:03:11

好点，已更新！ – Arth 2012-04-14 18:05:41

请注意，仅链接到“change”事件不适用于HTML5范围输入;你需要一个'input'事件处理程序。（不是说OP在使用它们，而是给其他人发出警告。） – Phrogz 2012-04-14 18:12:40

-1

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

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

来源

2012-04-14 17:58:52

如果你足够了解建议不要混淆逻辑与内容，你如何推荐内联脚本元素和'document.write'？ – Phrogz 2012-04-14 18:02:31

@Progrog，我不推荐使用内联脚本，我只是向海报解释他们的脚本正在做什么以及它为什么不起作用。如果您仔细阅读该文章，您会注意到我说'内嵌脚本，如后续'，然后在我的声明下面张贴违规脚本。仔细阅读之后，我们还会注意到，我建议将一个事件附加到提交按钮，这将分离关注点。 – 2012-04-14 18:06:17

然后考虑一下我的观点，即你的答案提供了相互矛盾的建议，并包含一个代码示例，这是一个糟糕的主意（没有指出它是这样），并且没有包含任何最佳实践的代码示例。如果你用我认为合适的代码编辑你的答案，我会改变我的投票。 :) – Phrogz 2012-04-14 18:11:31

更新应该在按钮被点击后发生。

<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-14 18:03:38

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

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功能只有rs。

对于一个普通的反射系统：

<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-14 18:09:32 Phrogz

我可能会感到困惑......但在多个输入和输出的情况下，从特定输入到特定输出的链接在哪里？ – Arth 2012-04-14 18:19:30

@Arth映射隐含在哪个对象中，您放置事件处理程序以及处理程序选择更新哪些元素。对于允许指定_n_输入每个映射到任意输出（基于选择器）的通用系统，请参阅我的编辑。 – Phrogz 2012-04-14 18:39:51

这就是我的追求！ – Arth 2012-04-14 18:54:15

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

回答

相关问题