测试一个简单的 javascript 按钮答案

【问题标题】：Testing a simple javascript button测试一个简单的 javascript 按钮
【发布时间】：2015-04-06 21:33:01
【问题描述】：

先生们，女士们，大家好。我正在尝试测试按钮以查看它是否绑定到事件但它不起作用。我已经在这几个小时找不到答案了。我正在寻找将 HTML 和 javsScript 分开的代码。我是新来的，我真的很感谢你的时间。当我点击按钮时，我无法让警报工作。

var formId;

 formId = document.GetElementById("button");
function run(){
  
 alert("Stack overflow"); 
  
}


formId.addEventListener("submit", run, false);

  <div id ="content">
    <div id ="title">Special Offers</div>
    <div id="colors">Sign-up to receive personalized    offers!
    </div>
      
     <fieldset>
       <legend> Please enter your information</legend>
        <form action="#" method="post" />
         <input type="text"  />
            <label for ="button">add</label>
       </form>
                
      </fieldset>
    
    <!--**************Button******-->
    
    <button type="submit" id="button">submit</button>
    
 </div>

【问题讨论】：

将GetElementById 更改为getElementById。
按钮没有submit 事件，只有表单有该事件。您应该绑定到click 事件。
<form> 标签应该在<fieldset>之外，而不是在里面。
任何答案都解决了您的问题吗？只是想知道。
是的。非常感谢。

标签： javascript events button submit

【解决方案1】：

试试...

var formId = document.getElementById("button");

function run(){
  alert("Stack overflow"); 
}

formId.addEventListener("click", run, false);

我在哪里使用.getElementById（拼写）和监听器上的点击事件。

小提琴：http://jsfiddle.net/rfornal/9duqfgL6/

【讨论】：

【解决方案2】：

您可以使用以下代码：

<div id ="content">
    <div id ="title">Special Offers
    </div>
    <div id="colors">Sign-up to receive personalize offers!
    </div>         
    <button type="submit" id="button" onclick="run()">submit</button>
</div>

你的JS应该如下：

function run(){
    alert("stack overflow");
}

【讨论】：

请不要邀请他使用内联JS，这是不必要的，也无助于整理代码。
如果他想学习 addEventListener 的更现代风格，请不要推广内联处理程序。
同意。 HTML、CSS 和 JS 应该是分开的。
好人，我也在这里自学，太棒了。你们都比我更有经验，所以我当然也不反对。我刚刚读到的有趣的文章htmlgoodies.com/html5/javascript/…

【解决方案3】：

您的form 标签自动关闭。应该是getElementById。试试click 事件而不是submit 事件。

您的button 在form 之外。当您的按钮位于其中时，您可以将submit 事件侦听器添加到您的表单中。

var formId = document.getElementById("button");
function run(){
  alert("Stack Overflow"); 
}
formId.addEventListener("click", run, false);

<div id ="content">
  <div id ="title">Special Offers</div>
  <div id="colors">Sign-up to receive personalized offers!</div>
  <fieldset>
    <legend> Please enter your information</legend>
    <form action="#" method="post">
      <input type="text"/>
      <label for="button">add</label>
      <button type="submit" id="button">submit</button>
    </form>
  </fieldset>
</div>

【讨论】：

感谢你们在百忙之中抽出时间提供帮助。我得到了代码，我花时间理解了你们提到的一切。