Question

以下代码。

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

Answer 1

在您宣布<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;
    }
});

Answer 2

<script>块中的JavaScript代码在页面加载时执行，因此在getElementById("submitter")遇到<button id="submitter">之前会遇到并执行DOMContentLoaded浏览器。

将代码移到submitter事件处理程序中，然后document.addEventListener('DOMContentLoaded', function () { var didClickIt = false; document.getElementById("submitter").addEventListener("click",function(){ didClickIt = true; }); });元素可用：

<script>

另一种选择是将window.onload块移动到页面底部。

如果您需要支持旧浏览器，请使用DOMContentLoaded代替{{1}}。

Answer 3

将脚本部分移动到文档末尾。执行行时：

document.getElementById("submitter")

DOM未准备好（并非所有元素都已创建），因此您搜索＆＃34;提交者＆＃34;产生了NULL。

实际上，正确的方法是等待DOM创建所有元素 - 请参阅JavaScript文档或使用jQuery。

Answer 4

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

Answer 5

这似乎对我有用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。

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

5 个答案: