I have a button:
<button type="button" onclick="toggleColor('white');" >White</button>
Which makes this:
Is there any way to get what is written on the button using jQuery. For example this button would return White because its in-between the 2 button tags.
You can get it by using .text(),
$('button').text();
Please read here to know more about it.
add id to your button like this
<button type="button" onclick="toggleColor('white');" id="your_button_id" >White</button>
now you can use JS like this
var button_text = document.getElementById('your_button_id').innerHTML;
and also you can use JQUERY like this
var button_text = $('#your_button_id').text();
Try
$("button").click(function(){
var title=$(this).attr("value");
alert(title);
});
You can do this with Vanilla JS, after you've added an ID so you can fetch the element.
Assuming:
<button type="button" onclick="toggleColor('white');" id='myButton'>White</button>
You can do in JavaScript:
var someVar = document.getElementById('myButton').innerHTML; // -> White
var anotherVar = document.getElementById('myButton').textContent; // -> White
Both will hold "White"
give the button an ID
<button id="btnTest" type="button" onclick="toggleColor('white');" >White</button>
JQuery:
alert($("#btnTest").text());
Just provide one id to button and use it with JQuery
<button id=btn type="button" onclick="toggleColor('white');" >White</button>
then use jquery like this
$("#btn").val();
it will work for your condition.
Try this event.target
$("button").click(function(event){
var text=$(event.target).attr("value")
alert(text);
});
This worked for me on chrome.
$("#your-button-id").val();
If you prefer to use the Name= identifier (rather than id), you can get the button text by using:
$('button[Name="buttonNameHere"]').text();
and you can set the text by using:
$('button[Name="buttonNameHere"]').text("Replacement Text Here");
In Jquery you can use the following code:
$("#button").val();
The above line will give the text written on the button. And for setting text on the button through Jquery use the following code:
$("#button").val("SAVE");
Related
I got the following html string
<span class="text">North-West</span>
I need to add an onClick to this string in order to make it look like the following:
<span class="text" onClick="mySomeFunction()">North-West</span>
I tried to convert this string to jQuery element back and forth, or to use attr() or setAttribute() functions but it did not work. Any ideas how to do that would be welcome. Thank you.
If you are using jQuery, maybe you could put the event in your script file?
$('.text').on('click', mySomeFunction);
This way, you have your code organised in a file and it's a better practice. Inline JS is not very clean.
Without Jquery, using pure javascript:
Select your element
var t = document.querySelector('span');
Add your EventListener to detect the click
t.addEventListener('click', function(){
console.log('test');
someFunction();
})
var t = document.querySelector('span');
t.addEventListener('click', function(){
console.log('test');
alert('function');
})
<span class="text">North-West</span>
Here's an example:
html:
<button type="button" class="btn btn-primary" id="myConfirmButton">
Save changes
</button>
js:
var okbutton = document.getElementById("myConfirmButton");
okbutton.setAttribute("onclick", "deletedata('msgid',165);");
Let's say that I got code like that:
<div class="div">
<input type="submit" value="Button" class="button1">
</div>
And then when I put in the console this code:
document.getElemetsByClassName('button1')[0].click();
It does click the button, but when I try the same thing in jQuery with arrays:
array = document.getElementsByClassName('div');
$(array[0]).find('button1').click();
It does not work and does not return any error messages so I don't know what is wrong. Thanks from above for help.
button1 is class. You should add a dot(.) before button1 to select button1 class like following.
$(array[0]).find('.button1').click();
The selector you are using is a tag selector. Change it to class selector:
$(array[0]).find('.button1').click();
//----------------^ Add a . here.
I would also better change this to:
$(".div .button1").trigger("click");
Works better this way, using trigger().
I want to navigate to an HTML element having a particular 'id' in the same page using javascript on click of a button.
for example:
<body>
<div id="navigateHere" >
</div>
<button onclicK="navigate();" />
In the above code what should be there in the javascript function navigate() , so that on a click of a button , it will navigate to the 'div' element with an id 'navigateHere'.....
Thanks in advance ...
Instead of a button, you can use a simple link:
<div>Link text</div>
If you need to use JavaScript and a button, something like the following should work:
HTML:
<button type="button" id="someid">Link text</button>
JavaScript:
document.getElementById("someid").onclick = function () {
window.location.hash = "#navigateHere";
};
window.location = "#navigateHere";
It will navigate to the div element...
This may be what you want.
window.location.hash = 'navigateHere';
There is no need to use JavaScript though. Just link to #navigateHere.
I've tried to change the onclick function through a bookmarklet in the url using this code:
javascript: document.getElementById('Button1').onclick = function(){alert('foo')};void(0);
I can change the value of the button but just not the onclick function. Is it even possible?
Thanks ^^
Some notes: I've also tried putting the code in a .js file and creating an external .js file using createElementId but it still does not seem to work :/
You were missing the trailing semi-colon to terminate the alert call. It's easier to spot once you indent it:
document.getElementById('Button1').onclick = function() {
alert('foo');
};
This code works. So the only option is that Button1 is not an ID of an element on that page.
For example:
<div id="Button1">Button</div>
If an element on the page looks like that, you will get your alert ('foo');
Your code seems to work...
Try to insert this code into the w3schools jseditor http://www.w3schools.com/js/tryit.asp?filename=tryjs_events
<html>
<body>
<button type="button" id="Button1" onclick="alert('Some action');">Action!!</button>
<button type="button" id="Button2" onclick="document.getElementById('Button1').onclick = function(){alert('another action')};">Change onclick</button>
</body>
</html>
I am new to javascript/jquery .
I have a small question.
I have some thing like the following in the java script file.
<button id="button1" onclick=click() />
<button id="button2" onclick=click() />
<button id="button3" onclick=click() />
so the click function looks like the follwoing
click(id){
/do some thing
}
so my question is when ever the button is clicked how can we pass the button id to the function.
<button id="button1" onclick=click("how to pass the button id value to this function") />
how can we pass the button id like "button1" to the click function when ever the button is clicked..
I would really appreciate if some one can answer to my question..
Thanks,
Swati
I advise the use of unobtrusive script as always, but if you have to have it inline use this, for example:
<button id="button1" onclick="click(this.id)" />
The unobtrusive way would look like this:
$("button").click(function() {
click(this.id);
});
You don't need to.
function handleClick(){
//use $(this).attr("id");
//or $(this) to refer to the object being clicked
}
$(document).ready(function(){
$('#myButton').click(handleClick);
});
That not very jQuery-ish. You should rather use event listeners:
$(function() {
$('#button1,#button2,#button3').click(clicked);
function clicked() {
// "this" will refer to the clicked button inside the function
alert($(this).attr('id'));
}
});
For starters: Don't use onclick(). This is the way to do it properly.
When you get your head around all this and think "boy that's a load of cowpat to write for a litte event!", turn towards jquery.
Doing the same in jquery is simple.