在整個頁面中使用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表單）

回答

相關問題