i have this HTML code, how do i call a javascript function without making changes to my HTML file.
<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>
tried to use this javascript code but didn't work
var button = document.getElementsByTagName("input");
button.onclick = function(){ alert('hello!'); };
Try this
var button = document.getElementsByTagName("input");
button[1].onclick = function(){ button[0].value=3; };
document.getElementsByTagName("input"); gives you list of inputs and not just a button.
Here, button.onclick = function(){ alert('hello!'); }; you are trying to attach click handler to the list itself which is not valid. You have to bind the handler one by one.
Edited:
Using 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>Using 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>
The function getElementsByTagName returns all input elements in the DOM, you need to check if the input is of type button like so:
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type === "button") {
inputs[i].onclick = function () {
alert("hello!");
}
}
}
Here is a fiddle: http://jsfiddle.net/hL2kavzs/
Try this...
document.getElementsByTagName("input").addEventListener("click", function(){
alert('hello');});
Try this using 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> 