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

how to call javascript function using HTML button

本文关键字：javascript 函数 调用 按钮 何使用 HTML      更新时间：2024-04-08

我有这段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!'); };

试试这个

  var button = document.getElementsByTagName("input");  
  button[1].onclick = function(){ button[0].value=3; };
  1. 我们应该得到所有的输入元素，结果是2个输入元素。第一个是文本，第二个是按钮
  2. 那么我们应该使用第二个按钮[1]。。。点击按钮，我们调用函数，并在文本输入中写入值3（1+2=3）

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

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

编辑：

使用document.querySelector():

//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 !');
};
<input type="button" value="Check"></input>

使用document.getElementsByTagName():

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 !');
  };
}
<input type="button" value="Not me"></input>
<input type="text"></input>
<input type="button" value="Check"></input>

函数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/

试试这个。。。

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

使用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>

相关文章：