javascript onclick 按钮输入在 Chrome 中不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19372463/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 15:21:07  来源:igfitidea点击:

onclick button input not working in Chrome

javascripthtmlgoogle-chrome

提问by ctaylor

Javascript code:

Javascript代码:

function doClick()
{
  alert("clicked");
}

HTML code:

HTML代码:

<div >
<table border="2" cellspacing="0" cellpadding="0" class="TextFG" style="font-family:Arial; font-size:10pt;">
<tr>
<td width="100%">
  <table border="0" style="font-family:Arial; font-size:10pt;" cellspacing="0" cellpadding="3">
    <tr>
      <td>&nbsp;Find:</td>
      <td nowrap>
        <input type="text" id="Find_Text" name="Find_Text" size="7" >&nbsp;<input type="checkbox" name="Find_ExactMatch" value="1" checked>
      </td>
      <td colspan="2" style="cursor:default" nowrap >Exact Match</td>
    </tr>
    <tr>
      <td>&nbsp;In:</td>
      <td>
        <select name="Find_DataFile">
          <option value="1">Stage 1</option>
          <option value="2">Stage 2</option>
        </select>
      </td>
      <td align="center" valign="top">
        <input type="submit" value="Go" onclick="doClick();"/>
      </td>
      <td align="center"><font class="DataFG">F2<font></td>
    </tr>
  </table>
</td>
</tr>
</table>
</div>

Hi all,

大家好,

Simple code like the above will not fire in Chrome (latest) but will under IE8 and IE10. Am I doing anything wrong ?.

像上面这样的简单代码不会在 Chrome(最新)中触发,但会在 IE8 和 IE10 下触发。我做错了什么吗?

Appreciate any help Thanks

感谢任何帮助谢谢

After stepping thru each line in the code I supplied above (which also includes a server request to populate the dropdown named "Find_DataFile" whose code I was not able to supply) I have finally found the culprit that was causing an object not defined error (because it's id was not defined and I was calling getElementById to assign it to an temp object). All working now for IE8 IE10 Chrome and Safari. Thanks guys for all the time and effort to help me find a solution. It is much appreciated. I can breathe normally now lol !

在遍历我上面提供的代码中的每一行(其中还包括一个服务器请求以填充名为“Find_DataFile”的下拉列表,我无法提供其代码)后,我终于找到了导致对象未定义错误的罪魁祸首(因为它的 id 没有定义,我正在调用 getElementById 将它分配给一个临时对象)。现在都适用于 IE8 IE10 Chrome 和 Safari。感谢所有时间和精力帮助我找到解决方案的人。非常感谢。我现在可以正常呼吸了哈哈!

回答by user1567453

The submit button is a special type of button which is ONLY used inside the < form > tags. It runs whatever function you specify in the "onsubmit" attribute of the form it belongs to. Refer Herefor an idea of how submit buttons interact with javascript and the form "onsubmit". You will be able to get the desired effect if you wire things up this way. so paying particular attention to the FORM markup the code would be...

提交按钮是一种特殊类型的按钮,仅在 <form> 标签内使用。它运行您在它所属表单的“onsubmit”属性中指定的任何函数。有关提交按钮如何与 javascript 和表单“onsubmit”交互的想法,请参阅此处。如果您以这种方式连接起来,您将能够获得所需的效果。所以要特别注意 FORM 标记,代码将是......

<body>
    <div>
        <form name="myForm" action="http://www.google.com" onsubmit="return doClick();" method="post">
            <table border="2" cellspacing="0" cellpadding="0" class="TextFG" style="font-family:Arial; font-size:10pt;">
                <tr>
                    <td width="100%">
                      <table border="0" style="font-family:Arial; font-size:10pt;" cellspacing="0" cellpadding="3">
                        <tr>
                          <td>&nbsp;Find:</td>
                          <td nowrap>
                            <input type="text" id="Find_Text" name="Find_Text" size="7" >&nbsp;<input type="checkbox" name="Find_ExactMatch" value="1" checked>
                          </td>
                          <td colspan="2" style="cursor:default" nowrap >Exact Match</td>
                        </tr>
                        <tr>
                          <td>&nbsp;In:</td>
                          <td>
                            <select name="Find_DataFile">
                              <option value="1">Stage 1</option>
                              <option value="2">Stage 2</option>
                            </select>
                          </td>
                          <td align="center" valign="top">
                            <input type="submit" value="Go" />
                          </td>
                          <td align="center"><font class="DataFG">F2<font></td>
                        </tr>
                      </table>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

and then the javascript:

然后是javascript:

function doClick()
{
alert("I've been clicked");
}

And that works for me :)

这对我有用:)

回答by Han

For your sample. It should work.

为您的样品。它应该工作。

There are two things you should be sure:

您应该确定两件事:

  1. When you click the button, make sure that the Javascript code has been loaded.
  2. Your Javascript code must not have any syntax error.
  3. If the button is inside a form, after clicked, the form could be submitted.
  1. 单击按钮时,请确保已加载 Javascript 代码。
  2. 您的 Javascript 代码不得有任何语法错误。
  3. 如果按钮在表单内,点击后可以提交表单。

回答by Roo

the submit button already has a default functionality . it wont trigger the onclick function in many browsers. try changing the button type to 'button' and try to submit the form using javascript.

提交按钮已经具有默认功能。它不会在许多浏览器中触发 onclick 功能。尝试将按钮类型更改为“按钮”并尝试使用 javascript 提交表单。