Question

我有这个HTML代码，如何在不更改HTML文件的情况下调用javascript函数。

<tr>
     <td><div id="number1">1</div></td>
     <td><div>+</div></td>
     <td><div id="number2">2</div></td>
     <td><div>=</div></td>
     <td><input type="text"></input></td>
     <td><input type="button" value="Check"></input></td>
</tr>

尝试使用此javascript代码但无法正常工作

var button = document.getElementsByTagName("input");
button.onclick = function(){ alert('hello!'); };

Answer 1

试试这个

  var button = document.getElementsByTagName("input");  
  button[1].onclick = function(){ button[0].value=3; };

我们应该得到所有的输入元素，结果是2个输入元素。第一个是文字，第二个是按钮
然后我们应该使用第二个（按钮）按钮[1] ...在单击按钮上我们调用函数并在文本输入中写入值3（1 + 2 = 3）

Answer 2

函数getElementsByTagName返回DOM中的所有输入元素，你需要检查输入是否是类型按钮，如下所示：

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type === "button") {
        inputs[i].onclick = function () {
            alert("hello!");
        }
    }
}

这是一个小提琴：http://jsfiddle.net/hL2kavzs/

Answer 3

使用querySelectorAll（）

尝试此操作

 document.querySelector('input[type="button"]').addEventListener('click', function() { alert('hello'); });

<table>
<tr>
     <td><div id="number1">1</div></td>
     <td><div>+</div></td>
     <td><div id="number2">2</div></td>
     <td><div>=</div></td>
     <td><input type="text" /> </td>
     <td><input type="button" value="Check" /></td>
</tr>
</table>

Answer 4

document.getElementsByTagName("input");为您提供输入列表，而不仅仅是按钮。

在这里，button.onclick = function(){ alert('hello!'); };您试图将点击处理程序附加到无效的列表本身。您必须逐个绑定处理程序。

编辑：

使用document.querySelector()：

＆＃13;

//gets the input where type is button and value is check
var btn = document.querySelector('input[type=button][value=Check]');
//add click handler
btn.onclick = function() {
  alert('You clicked !');
};

＆＃13;

<input type="button" value="Check"></input>

＆＃13;

使用document.getElementsByTagName()：

＆＃13;

var inputs = document.getElementsByTagName('input'); //get all inputs
var i = 0;
var btn; //temp for button
var t //temp
while (t = inputs[i++]) { //loop in all inputs for correct button
  //verify if type is `button` and value is `check`
  if (t.type.match(/button/i) && t.value.match(/check/i)) {
    btn = t;
    break;
  }
}
if (btn) { //got the button
  btn.onclick = function() {
    alert('You click me !');
  };
}

＆＃13;

<input type="button" value="Not me"></input>
<input type="text"></input>
<input type="button" value="Check"></input>

＆＃13;

Answer 5

试试这个......

document.getElementsByTagName("input").addEventListener("click",   function(){
    alert('hello');});

如何使用HTML按钮调用javascript函数

5 个答案: