JavaScript this and onClick - javascript

I thought that JavaScript is simple, but seems that it doesn't work
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function org(){
$(this).toggle()
}
</script>
<span onClick="org()" id="kaka">Click me and i hide</span>
Anyone knows what's wrong?

this in your code is not referencing your <span> element. You need to pass a reference to your element.
<script>
function org(e){
$(e).toggle()
}
</script>
<span onClick="org(this)" id="kaka">Click me and i hide</span>
Alternatively (and this is really the preferred way) you can attach an event handler and avoid using an inline handler:
<script>
$("kaka").on("click", function() {
$(this).toggle()
});
</script>
<span id="kaka">Click me and i hide</span>

You don't need to pass a reference to the element. You can also tell the function to use the element for this
<span onClick="org.call(this);" id="kaka">Click me and i hide</span>
Demo: JSFiddle

Related

Hint button using jquery

I am trying to create a hint Button that displays the text when it is clicked. I know how to create using javascript in HTML but I am having difficulty creating it in jquery. Can somebody please give me an idea.
javascript code in HTML:
<button type="button" onClick="myFunction()">Hint!</button>
<p id="hint"></p>
<script>
function myFunction() {
document.getElementById("hint").innerHTML = "<em><u>hint here.</u></em>";
}
</script>
Assuming you have only one button, you can bind the event click and use the selector #hint.
The function $.html is used to set HTML code to the selected elements.
$('button').on('click', function() {
$("#hint").html("<em><u>hint here.</u></em>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button">Hint!</button>
<p id="hint"></p>

How to reach this element?

<div class="ptp-item-container">
<div class="plan">Text I want!</div>
<div class="price">200</div>
<div class="bullet-item">some other text</div>
<div class="cta"> <a class="button" href="javascript:getText()">Go!</a>
</div>
</div>
From the button I tried this:
function getText(){
alert($(this).parent().parent().children().text() );
}
This doesnt really work, I know there is a way! It's important to use $(this) for this time.
Edit: This is the whole Javascript:
<script>
jQuery(document).ready(function($) {
$(".ptp-button").attr("href", "javascript:getText()");
});
function getText(){
alert($(this).closest('.ptp-item-container').find('.plan').text());
}
</script>
But the console says "Uncaught TypeError: undefined is not a function VM4092:1(anonymous function)"
Dont I have to give $(this) as an argument on javascript:getText($(this)) or something like this?
You shouldn't be targeting it with javascript: href. Instead, use an .on() handler, that is the correct way to handle the click event on JQuery. Then you'll be able to use the this reference:
Then, as already answered, instead of navigation through the parents, use the .closest() function:
$('.ptp-item-container').on('click', '.button', function() {
alert($(this).closest(".ptp-item-container").find(".plan").text());
});
You can use a combination of .closest() and .find():
alert($(this).closest(".ptp-item-container").find(".plan").text());
It pays to spend some time browsing the jQuery API documentation.

Click on Anchor tag is not working

Click on Anchor tag is not working..Here is my code:
$('#selectall').onclick(function () {
console.log("Hello");
});
<li>
<a class="selectall" id="selectall">
<i class="fa fa-square-o"></i> Select All
</a>
</li>
Try the click event!
the problem is that "onclick" isn't supposed to used this way. You can either do
$('#selectall').click(function ....)
or
$('#selectall').on('click', function ....)
a
$('#selectall').onclick(function ... )
does not exist for jQuery. 'onclick' is by default a javascript function.
$('#selectall').click(function () {
alert("Hello");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a class="selectall" id="selectall"><i class="fa fa-square-o"></i> Select All</a></li>
you are using jquery it seems, so instead of onclick you should use click
just apply
<a href="javascript:void(0)".... >
or
<a href="#".... >
and use method as "click" not "onclick"
Since you also id-ed it with "selectall", the "#" is allright. You do need
$('#selectall').click(function () {
tho.
Also, when is your js executed? If the above js-code is executed BEFORE the html containg the anchor tag is rendered, it will fail, because there is nothing yet to bind it to.
I assume the $ is jQuery so use .click() not .onclick()
otherwise, the vanillaJS code is
document.getElementById('selectall').addEventListener('click',function(){
console.log('hello');
},false);
I always use delegate events, so a.selectall elements can be added/removed dynamically w/out messing up your click listener.
$("body").on("click", ".selectall", function(evt){
//click handler code here
});

Why doesn't this work?

I want to change the value of an element with javascript.
<span id="mixui_title">Angry cow sound?</span>
<script type="text/javascript">
$("#mixui_title").val("very happy cow");
</script>
Use the text method instead:
$("#mixui_title").text("very happy cow");
Try html() function instead :
<span id="mixui_title">Angry cow sound?</span>
<script type="text/javascript">
$("#mixui_title").html("very happy cow");
</script>
2 Things:
1- Usualy, javascript is placed at the top of the page. If you do this in the future, you'll need to need to enclose it in the jQuery equivalent of document.ready:
$(function() {
// do stuff
});
This tells jQuery to run the function as soon as the document is ready.
2- For any value between two opening/closing tags, you need to use the jQuery method .html("enter text to change") while the .val() method is used to change the value of any control with the attribute value="" like inputs:
<input type="submit value="This will be changed with val()" />
The following should work fine. Note its wrapped in $(function() { }); and is using the .html() property and is placed at the top of the page.
<script type="text/javascript">
$(function(){
$("#mixui_title").html("very happy cow");
});
</script>
<span id="mixui_title">Angry cow sound?</span>
It's not enclosed by the
$(document).ready(function(){
//your code goes here
});

passing a local variable within the function

By clicking on the following DIV, nothing happens.
Where is the error ?
<div onclick="function dummy(that) { alert(that.toString())}" class="next">></div>
Please help.
You are defining dummy but not calling it. I don't think it works that way, not in the HTML onclick property anyway.
I suggest you move dummy() into a separate code block:
<script type='text/javascript'>
function dummy(that) { alert(that.toString())}
</script>
and then:
<div onclick="dummy(this);" class="next">></div>
or attach the function programmatically like so:
document.getElementById("myDummyDIV").onclick = function(event) { ..... }
This should do the trick:
<div onclick="dummy(this);" class="next"></div>
<script type="text/javascript">
function dummy(that) {
alert(that.toString());
}
</script>
This is silly actually. The function you've declared is unusable as a function unless you intend to do some more fantastic stuff and call the click event of this link from other methods elsewhere. However, if you're hell-bent-for-leather intent on putting the function declaration in the onclick event, it can be done this way:
<div onclick="(function dummy(that) { alert(that.toString())})();" class="next">></div>
You end up putting the function in it's own block and then the () at the end tells the parser to do it.
This is a function declaration, not invocation.
You could do something like this:
(function dummy(that) { alert(that.toString())}) (event);
and the complete HTML would be:
<div onclick="(function dummy(that) { alert(that.toString())})(event);" class="next">></div>
you dont create function here
you can just write the following
<div onclick="alert(that.toString())" class="next">></div>

Categories