This seems like it should be so simple but for some reason I can't get it working. I want to get the id of a clicked element.
The element:
<i id="fav6" onclick="changefave()" style="color: #DDD;" class="fa fa-star-o"></i>
The js:
function changefave(){
alert(this.id);
}
It's current returning, 'Undefined'.
Note: the element id is generated dynamically.
Thanks
You can change the onclick attribute of the <i> tag like:-
onclick="changefave(this);"
and the function like:
function changefave(obj) {
alert(obj.id);
}
Yoy can try this
function changefave(obj) {
alert(obj.id);
}
HTML
<i id="fav6" onclick="changefave(this)" style="color: #DDD;" class="fa fa-star-o">something</i>
DEMO
in html
<i id="fav6" onclick="changefave(this)" style="color: #DDD;" class="fa fa-star-o"></i>
in js
function changefave(this){
alert(this.id);
}
or by jQuery you can do
in html remove inline onclick
<i id="fav6" style="color: #DDD;" class="fa fa-star-o"></i>
and script will
$(document).ready(function(){
$("#fav6").click(function(){
alert($(this).attr("id");
});
});
Better not to do inline JavaScript. So, your HTML should be
<i id="fav6" style="color: #DDD;" class="fa fa-star-o"></i>
Then, in JavaScript:
$(function() { // waits for document and jQuery to load
$('#fav6').on('click', function() {
alert( $(this).prop('id') );
});
});
try something like this
HTML CODE
<i id="fav6" onclick="changefave(this);" style="color: #DDD;" class="fa fa-star-o"></i>
JAVASCRIPT CODE
function changefave(obj){
alert(obj.id);
}
You need to pass it along with the "this" pointer as argument in the function call .
Hence your code in html should be
<i id="fav6" onclick="changefave(this)" style="color: #DDD;" class="fa fa-star-o"></i>
And the javascript function should be
function changefave(ele)
{
// here ele refers to the called element
alert(ele.id);
}
Refer to this link to know more about 'this' https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
Related
$('a.locked').click(function(e) {
e.preventDefault();
});
$(document).ready(function(){
$("button.button2").click(function(){
$("a").removeClass("locked");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="example.com"target="_blank" id="action2">
<button class="button2">
<span class="icon">CLICK HERE</span>
</button>
<br>
<br>
</a>
<a href="example.com"class="locked">
<button class="locked-button">
<i class="fa fa-lock" aria-hidden="true"></i>
<span class="icon">CONTINUE</span>
</button>
</a>
I want that the last a element is locked, and if you click on the 2nd button, the class locked will be removed from the last a element and I will be able to click on the link.
It deletes the class but I still can't click the link. How to fix that?
Also, is there are smarter way to do that...
This event binding isn't removed from the <a> when its class="locked" is removed:
$('a.locked').click(function(e) {
e.preventDefault();
});
At least with direct bindings like this, jQuery only uses the selector initially to attach the event handler to all matching elements. It won't recheck the selector when the event is later triggered. Currently, you'll have to do that check yourself:
$('a').click(function (e) {
if ($(this).hasClass('locked')) {
e.preventDefault();
}
});
Though, if you have an overall parent element, you can use a delegated binding and jQuery will then recheck the (2nd) selector for you when the event is triggered.
<div id="parent">
<a href="example.com" target="_blank" id="action2">
<!-- ... -->
</a>
<a href="example.com" class="locked">
<!-- ... -->
</a>
</div>
$('#parent').on('click', 'a.locked', function (e) {
e.preventDefault();
});
So, just removing a css class will not work in your case.
You should remove the event handler to allow the button to be clicked, something like this should work:
$("a.locked").on("click.locked", function(e) {
e.preventDefault();
});
$(document).ready(function(){
$("button.button2").click(function(){
$("a.locked").off("click.locked");
$("a").removeClass("locked");
});
});
Working jsfiddle.
Like this?
Check out this SO question to read more about the toggle function I used.
$(document).on("click", "#ToggleLock", function(e) {
$('#Continue').prop('disabled', function(i, v) {
return !v;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id='ToggleLock'>Unlock/Lock</button>
<button onclick="location.href='http://www.example.com'" type="button" id='Continue' disabled>Continue</button>
Let me know if I have greatly misunderstood the question.
Remove the class is not enough, since you added a click event to all $('a.locked') you need use .off() to remove the click event after removing the class. Also try to target the specific element, you could add id="btn_continue" to 2nd button. ($("a") will target all <a> which is not what you want to do)
Note:
$('a.locked').click(function(e) {
e.preventDefault();
});
$(document).ready(function(){
$("button.button2").click(function(){
$("#btn_continue").off().removeClass("locked");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="example.com" target="_blank" id="action2">
<button class="button2">
<span class="icon">CLICK HERE</span>
</button>
<br>
<br>
</a>
<a href="example.com" id="btn_continue" class="locked">
<button class="locked-button">
<i class="fa fa-lock" aria-hidden="true"></i>
<span class="icon">CONTINUE</span>
</button>
</a>
Font awesome is not working for me when I try to change the value of an element using a javascript.
Javascript:
function onClick() {
document.getElementById("dicebutton").value='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
}
HTML code for button:
<form>
Bet<br>
<input type="text" name="bet"><br>
Chance<br>
<input type="text" name="chance"><br>
<h3>Payout: 0.0000BTC</h3>
<input value = "Roll dice" id="dicebutton" onClick="onClick()" type="button" style="vertical-align:middle"></input>
</form>
Result:
Notice how the green button spits raw HTML while the top of the website correctly displays the fonts? How can I fix this?
Use the element.innerHTML = content; syntax if you want to add HTML. ".value" only passes data as a string.
So
document.getElementById("dicebutton").innerHTML='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
Edit:
I just realized you are using an < input > field for your button. This wont work in that case. The only value for an < input > field that you can use to change the button text is value= as you tried. Unfortunately "value" treats anything assigned to it as a string.
Instead of an < input > field, you will need to use an element that you can attach HTML to - for example, an < a > tag, a < button > tag, or simply using a styled div as a button. This will allow you to pass the HTML to it without having to use "value".
Use a <button> tag instead of <input> and change
document.getElementById("dicebutton").value
to
document.getElementById("dicebutton").innerHTML
You must use button instead of input button, then update the content with innerHTML.
Example:
Javascript:
function onClick() {
// you can you "this.innerHTML" too
document.getElementById("dicebutton").innerHTML='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
}
HTML:
<button id="dicebutton" onclick="onClick()" style="vertical-align:middle">Roll dice</button>
Below is my javascript file code. Script.js
$(document).ready(function(){
$("#").click(function(){
alert("Hello!");
});
And here is my php code.
<html>
<head>
Some codes are here
</head>
<body>
Some php codes are here to get value from database
<script src="script.js"></script>
<span><i class="fa fa-thumbs-up"></i> <?php echo $up; ?> </span>
<span><i class="fa fa-thumbs-down"></i> <?php echo $down; ?> </span>
<span><i class="fa fa-star-o"></i> <?php echo $fav; ?> </span>
</body>
</html>
I am calling script file in body due to my design. I can't call it in head section.
Issue is when i click on above link corresponding to # (up,down, fav). It take me to index file. I am testing Hello in alert box. But it is not working.
Any advice what i am missing.
$("#") isn't a valid selector. If you want to capture clicks on anchors it should be $('a');
The # in $("#") means and id should follow. Like if your element's id were "myElement" you would write $("#myElement").
But, since you dont know your ids adead of time, id use the vote class you already have instead like $(".vote").click....
$(document).ready(function() {
$(".vote").click(function(event) {
event.preventDefault();
alert("Hello! My id is: " + this.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span><i class="fa fa-thumbs-up"></i>Some sontent</span>
<span><i class="fa fa-thumbs-down"></i>Some sontent </span>
<span><i class="fa fa-star-o"></i>Some sontent </span>
In order to get all the anchor tags you should use $("a") instead of $("#"). Use $("#abc") in order to get a tag with id abc. Use $(".def") in order to get tags with class def.
Use attr name at the selector and call directly the function you want... $('a') is so generic
try to use
$("a[name='up']").on('click',function(){
alert("Clicked up!");
});
$("a[name='down']").on('click',function(){
alert("Clicked down!");
});
$("a[name='favorite']").on('click',function(){
alert("Clicked down!");
});
<a aria-expanded="false" data-toggle="tab" href="#pictures">
<i class="pink ace-icon fa fa-gift bigger-120"></i>
Pictures
</a>
I want to wire on click #picture event to alert some message so I add
$(document.ready(function() {
$("#pictures").click(function(){
alert('clicked!');
});
})
but this doesnt work, I've got no error messages inside firebug console.
Jquery is loaded before correctly.
In your html there is no element with ID pictures, change it, like so
$("#pictures").click(function(){
alert('clicked!');
});
// or use selector like this, if you can't change html
$('a[href="#pictures"').click(function(){
alert('clicked!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a aria-expanded="false" data-toggle="tab" href="#pictures" id="pictures">
<i class="pink ace-icon fa fa-gift bigger-120"></i>
Pictures
</a>
Update:
Also you have error in this line
$(document.ready(function() {
change it
$(function() {
// put your code
});
Did You try tout set the click handler on document?
jQuery(document).on('click', '#pictures', function(e) {
alert('clicked');
});
You also have to add :
id="pictures"
In your . Or an y other selector.
If you want to still use the #picture in href check on bellow code
jQuery(document).ready(function($) {
$("a[href='#pictures']").click(function(){
alert('clicked!');
return false;
});
})
Try this Demo, even changed some markup for the same.
$(document).ready(function() {
$("#pictures").click(function(){
alert('clicked!');
});
})
I'm trying to inject jQuery into a HTML page to create a popup window when I click a link on the page. I'm having trouble with the Selector and/or Syntax.
HTML
<a href="/leads/19365876/edit" class="hoverable edit">
<i class="icon-pencil">
</i>
</a>
Attempted Solution
jQuery(document).ready(function($) {
jQuery('a.hoverable.edit').live('click', function(){
newwindow=window.open($(this).attr('href'),'','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
});
});
you forgot to give '_blank' name to your window:
window.open($(this).attr('href'),'_blank','height=200,width=150');