混合的JS和HTML不起作用。幫助？

下面的代碼。混合的JS和HTML不起作用。幫助？

我在JS完整的球，我不知道我做錯了什麼。我/有/它工作，所以當用戶輸入一個名字時，點擊提交後它會在下一頁顯示'Name: {outputn}'。之後，我在其下面放置了一個表單html字段，因爲它已被刪除而沒有在這裏顯示，現在它不再有效，即使它與我以前的代碼相同。 PS：另外，如果有人碰巧知道，有沒有辦法添加額外的字段，例如性別，並讓它們使用相同的提交按鈕？

<div class="content active">Username: <input type="text" id="userName"></input> 
<script> 
    var didClickIt = false; 
    document.getElementById("submitter").addEventListener("click",function(){ 
     didClickIt = true; 
    }); 

    setInterval(function(){ 
     if(didClickIt) { 
      didClickIt = false; 
      var o=document.getElementById("outputn"),v=document.getElementById("userName").value; 
      if(o.textContent!==undefined){ 
       o.textContent=v; 
      }else{ 
       o.innerText=v; 
      } 
     } 
    },05); 
</script> 
<button id="submitter" style="background:#ffffff;">Submit</button><br> 
</div> 
<div class="content"><p>Name: <div id="outputn"></div></p></div>

來源

2014-04-01 user110187

這似乎爲我在這裏http://jsfiddle.net/NA9BM/2/

工作，我添加了另一個元素，所以你可以看到你如何能利用同樣的邏輯去做。

<div class="content active"> 
    Username: <input type="text" id="userName"></input><br> 
    Email: <input type="text" id="email"></input> 
    <button id="submitter" style="background:#ffffff;">Submit</button> 
</div> 
<div class="content"> 
    <p>Name: 
    <div id="outputn"></div> 
    </p> 
    <p>Email: 
    <div id="outpute"></div> 
    </p> 
</div>

而且JS

var didClickIt = false; 
document.getElementById("submitter").addEventListener("click",function(){ 
    didClickIt = true; 
}); 

setInterval(function(){ 
    if(didClickIt) { 
    didClickIt = false; 
    var o=document.getElementById("outputn"), v=document.getElementById("userName").value; 
    var eo = document.getElementById("outpute"), e = document.getElementById("email").value; 
    if(o.textContent!==undefined && eo.textContent!==undefined){ 
     o.textContent=v; 
     eo.textContent=e; 
    }else{ 
     o.innerText=v; 
     eo.innerText=e; 
    } 
    } 
},05);

你可以嘗試把底部的腳本標籤讓DOM正確加載實際加載腳本之前。

來源

2014-04-01 23:37:51 triangulito

將您<script>塊，你已經宣佈你#submitter元素之後 - addEventListener()不能聽那些尚未出現在頁面上的節點事件。您的代碼爲過於複雜。而不是檢查，看看是否按鈕被選中的，只是有事件觸發代碼中直接當監聽器被觸發：

document.getElementById("submitter").addEventListener("click", function() { 
    var o = document.getElementById("outputn"), 
     v = document.getElementById("userName").value; 
    if (o.textContent !== undefined) { 
     o.textContent = v; 
    } else { 
     o.innerText = v; 
    } 
});

來源

2014-04-01 23:30:40 esqew

在<script>塊JavaScript代碼執行網頁加載，所以它會在瀏覽器遇到<button id="submitter">之前遇到並執行getElementById("submitter")。

移動一個DOMContentLoaded事件處理程序中的代碼，那麼submitter元素將可用：

document.addEventListener('DOMContentLoaded', function() { 
    var didClickIt = false; 
    document.getElementById("submitter").addEventListener("click",function(){ 
     didClickIt = true; 
    }); 
});

另一種選擇是將<script>塊移動到頁面的底部。

如果您需要支持較舊的瀏覽器，請使用window.onload而不是DOMContentLoaded。

來源

2014-04-01 23:31:10 Dai

將腳本部分移到文檔的末尾。當執行行：

document.getElementById("submitter")

DOM還沒有準備好（未創建的所有元素），使您的生產NULL「提交」搜索。

實際上，正確的方法是等待DOM創建所有元素 - 請參閱JavaScript的文檔或使用jQuery。

來源

2014-04-01 23:33:15

<script type="text/javascript"> 
function init(){ 
    //Your code 
} 
window.onload = init; 
</script>

來源

2014-04-01 23:35:13

混合的JS和HTML不起作用。幫助？

回答

相關問題