I was wondering if its possible to use Javascript to change the function/method that an HTML element calls.
Example:
<input type="button" id="some_id" name="some_name" value="A Button" onclick="someFunction()" />
I now want to use Javascript to change the method/function called on the onclick event to another function has displayed below.
<input type="button" id="some_id" name="some_name" value="A Button" onclick="anotherFunction()" />
I tried using innerHTML, and when I checked the generated HTML, it actually changed the value of the onclick event in the button, but when I click the button, the method is not called.
You can assign a function object directly to the onclick field of the element. For example,
var inp = document.getElementById( 'some_id' );
inp.onclick = anotherFunction;
Using jQuery you could do:
$('#some_id').unbind('click');
$('#some_id').click(function () {
anotherFunction();
});
Related
<input type="submit" value="Login" onclick="myFunction">
<!-- Project -->
<script>
function myFunction(){
document.getElementById("input[tpye="submit"]").style.backgroundColor="blue";
}
</script>
getElementById gets the element with that id. You're probably looking for querySelector instead, which will select the element that matches that selector:
function myFunction(){
document.querySelector("input[type='submit']").style.backgroundColor="blue";
}
You have done three mistakes in your code snippet
You have not given () to the function call
You have written incorrect spelling in the querySelector of "type" word
You are calling the getElementById() function but you have not given id to the input box
<input type="submit" value="Login" onclick="myFunction()">
<!-- Project -->
<script>
function myFunction(){
document.querySelector("input[type='submit']").style.backgroundColor="blue";
}
</script>
In the javascript function you are using 'getElementById' which means that it'll look for the DOM elements with the id you have provided, and the problem is you didn't provided any id.
You have to first give an id to the button
<button id="some_id">Click</button>
And then align your function in this way.
function myFunction(){ document.getElementById("some_id").style.backgroundColor="blue"; }
this is my solution to your problem. In your case you have some type of input, you need first to add an event listener to the input, which will execute some function on a specific event. In our case, we will execute the change color function.
This is a quick solution to your problem.
let button = document.getElementById('changecolor');
let input = document.getElementById('basic-input');
function changeBackground(){
// Change the background of the page
document.body.style.background = 'red';
// Change background of the button
button.style.background = 'blue';
}
button.addEventListener('click' , changeBackground);
input.addEventListener('click' , changeBackground);
<button id="changecolor">Change background</button>
<input type="text" placeholder="basic input" id="basic-input">
I need one help. I am passing this key word inside the onclick function. if user need to call the same function without using the onclick event how it will be called using javascript.I am explaining the scenario below.
<input name="optional_0_0_ans" id="optional_0_0_ans" class="form-control firstsec" placeholder="Answer" value="" type="text"> <button type="button" class="btn btn-sm btn-success" style="line-height:12px;" onclick="createNew(this,0,0,1);"><i class="fa fa-plus" aria-hidden="true"></i></button>
<script>
function createNew(evt,index,childindex,hidevalue){
}
</script>
On the above code i am passing the this keyword inside the onclick event.Here suppose user wants to call the createNew function some where else and wants to pass the same this key word then how it will be done.Please help me.
Here suppose user wants to call the createNew function some where else and wants to pass the same this key word then how it will be done.
That's not possible since this only exists inside the event handler. The "same this" doesn't exist outside of the handler.
I guess what you mean is that they want to pass the same or a similar value. So what is the value of this? It's a DOM element. They just need to get a reference to a DOM element and pass that:
var someElement = // get reference to a DOM element
createNew(someElement,0,0,1);
Inside the onclick attribute this refers to the current DOM Element. So if you want to achieve the same behavior, you can simply get and parse the DOM Element yourself:
var button = document.querySelector('#optional_0_0_ans button');
createNew(button, 0, 0, 3);
You can do it using below code:
$(".btn-success").on("click", function(){
someFunction(this, param1, param2,...)
})
Where ".btn-success" is a class assigned to button on which click you want to call a JavaScript function. You can also use id in selector.
Yes you can ,add id to your element will be more easy to handle ...
I added id to your button element to illustrate
<button type="button" class="btn btn-sm btn-success" id="btn" style="line-height:12px;" onclick="createNew(this,0,0,1);"><i class="fa fa-plus" aria-hidden="true"></i></button>
<script>
function createNew(evt,index,childindex,hidevalue){
alert(evt.type); //alert button when click
}
createNew(document.getElementById('btn'),4,5,4); //alert button when run
</script>
Just started working in Dreamweaver recently. I was wondering if when you are working with external javascript files, do you have to pass in html elements or can the js file see their id? For example;
<body>
<script src="client.js"></script>
<input type="submit" name="submit" id="submit" onclick="getValue()" value="Submit"></td>
And then in the client.js file
function getValue() {
"use strict";
document.getElementById(submit).value = document.getElementById(otherelement).value;
}
This isn't working in the first place and I understand that there are other errors, but mainly - can the client.js file see and use getElementById(submit) and getElementById(otherelement)?
I would suggest shying away from using inline JavaScript elements, and doing things differently. I'd suggest using addEventListener() to bind events from JavaScript.
So, remove the onclick attribute, and just do:
<input type="submit" name="submit" id="submit" value="Submit">
We will be adding the event in JavaScript. For this to work, the script needs to be ran after the page (DOM) is loaded. You can use window.onload = function(){} to do this or you can load the script at the end of the page (before </body>).
Anyway, in your JavaScript, you want to use:
document.getElementById("submit").addEventListener('click', function(event){
// NOTE: You are clicking a submit button. After this function runs,
// then the form will be submitted. If you want to *stop* that, you can
// use the following:
// event.preventDefault();
// In here `this` will be the element that was clicked, the submit button
this.value = document.getElementById('otherelement').value;
});
document.getElementById( id ) takes id param as string
Use
document.getElementById("otherelement");
document.getElementById("submit");
also remove the </td> as there is no <tr> in your code
If you don't use quotes to wrap your strings, javascript will try to find variables named submit or otherelement. Try adding quotes like that :
function getValue() {
"use strict";
document.getElementById("submit").value = document.getElementById("otherelement").value;
}
If you have an HTML element with an id attribute, The JS engine automatically converts it to a variable..
e.g.
<input type="submit" name="submit" id="submit" onclick="getValue()" value="Submit"></td>
equals to the var submit in your JS code (considering you load your JS file when the DOM is fully rendered).
In every HTML page an element id is unique and that's why it is converted to a variable and wll not be overwritten until you decide so.
I was wondering if when you are working with external javascript
files, do you have to pass in html elements or can the js file see
their id
Yes you can see the ID:
function whoAmI(e) {
document.getElementById('output').textContent = e.target.id;
}
<button id='Hiii' onclick='whoAmI(event)'>Check ID</button>
<p id='output'></p>
I am using simple ajax uploader
https://github.com/LPology/Simple-Ajax-Uploader
https://www.lpology.com/code/ajaxuploader/docs.php
my file upload button
<div class="form-group">
<input type="button" id="upload-btn1" class="btn btn-success clearfix" value="Choose file">
</div>
I am trying to use onChange callback function of SimpleAjax Uploader
onChange( filename, extension, uploadBtn )
This Function is called when user selects a file.
The function gets passed three arguments:
a string containing the filename
a string containing the file extension
a reference to the button which triggered the upload
I am facing problem with 3rd parameter of onChange function uploadBtn which is button reference it can be different digits, so I wonder how can I use this reference to change my upload button text when file is selected!
Thanks.
This is actually a bug in simple ajax uploader.
For more info please see issue #115
I don't know the "SimpleAjax Uploader" library, but typical jQuery callbacks return a DOM element, rather than a wrapped set. Therefore, you should be able to change the displayed text of the button by converting it to a jQuery wrapped set and using the val() method. In the sample below, uploadBtn is a DOM element. The anchor tag's click handler wraps it and uses val() to change the text after each click.
var uploadBtn = document.getElementById('uploadBtn');
$('a').click(function() {
var d = new Date();
$(uploadBtn).val("Changed at " + d);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="uploadBtn" type="button" value="Default text" />
<br/>
Change the text of the button
In your case, you'd have an onchange callback like:
function onchange( filename, extension, uploadBtn ) {
$(uploadBtn).val("New text goes here");
}
I'm new to javascript and am having a hard time finding the answer to this. Any help is appreciated.
If you had the following HTML:
<input type="text" />
<input id="button" type="button" value="Click Me" />
You can bind a function to be executed when a click event fires on that button like this:
$(function() {
$('#button').click(function() {
// Do logic here
});
});
Creating it all on the fly
You can insert the previous HTML into your document using jQuery. First select another element in the DOM which locates where you wish to insert the HTML:
$('#someElement')
Then you can use any of the jQuery insertion methods in order to inject some HTML of your own:
$('#someElement')
.append('<input type="text" />')
.append('<input id="button" type="button" value="Click Me" />');
Now that your elements are in the DOM, you can select them and bind a callback to the click event in the normal way:
$('#button').click(function() {
// Do logic here
});
the html :
<textarea id="txt"></textarea><input type="button" id="button">submit</input>
and the js:
var d = document.getElementById('button');// identifying the button
function myFunction(){
var text = document.getElementById('txt').value;//getting the user's input
// and whatever you want to do with the user's input
}
d.addEventListener('click',myFunction,false);//attaching myFunction to be called on the button click`
If you use jQuery, the syntax is a bit simpler :
$('#button').click(myFunction);
// or
$('#button').click(function(){
var text = $('#txt').val();
//and again your logic here
});