Question

我想使用getElementsByTagName获取提交按钮，但我一定做错了。

 <p id="ptag">Want to find out if this works</p>     

 <button>The Button</button>

 <form>
 First name: <input type="text" name="firstname"><br>
 Last name: <input type="text" name="lastname"><br>
 <input type="checkbox" name="yes" value="yes">A checkbox<br> 
 <input type="submit" value="Login">
 </form>

在上面的HTML代码段中，如果我使用下面的函数，获取按钮仍然有效，但获取提交按钮却没有。

 window.onload = theFunction;

 function theFunction(){

 document.getElementsByTagName("BUTTON")[0].setAttribute("onclick", "theOtherFunction()");

 document.getElementsByTagName("INPUT")[3];.setAttribute("onclick", "theOtherFunction()");

 }

我做错了什么？

 function theOtherFunction(){

   document.getElementById("ptag").style.color = "blue";

 }

我在问题中添加了theOtherFunction()，因为我的所有小实验都在将<p>颜色更改为蓝色。按钮，它保持蓝色。使用提交按钮，它会快速变为蓝色，然后变回黑色。有什么区别，如何使用提交按钮保留更改？

Answer 1

查看最后一行代码document.getElementsByTagName("INPUT")[3];.setAttribute("onclick", "theOtherFunction()");

有一个;在[3]之后你不想要那里。希望这会有所帮助。

Answer 2

jQuery在这里变得非常有用

$('input[type="submit"]')

这将允许您使用免疫力进行html更改，并支持仍具有1％使用率的旧版浏览器。

你的第二个例子应该没有;在线的中间。但并非所有浏览器都支持getElementsByTagName。

使用没有现成的库进行更新。

如果你是一个自己构建的人，谁想要自己创建lib。

function getElementsByAttrib(attrib) {
    return document.querySelectorAll('[' + attrib + ']');
}
var elements = getElementsByAttrib('type="submit"');
MySubmit = elements[0]';

Answer 3

使用getElementsByTagName定位/检索特定输入元素是不切实际的。

我们必须使用正确的工具来完成正确的工作，在这种情况下它是这样的查询选择器...

var S=document.querySelectorAll('input[type=submit]');

S[0].style.background='red'; // do something to the first button

注意：上面的代码假设您只有一个提交按钮，或者您必须遍历数组＆＃34; S＆＃34;定位所有提交按钮。

如何使用getElementsByTagName检索提交按钮

3 个答案: