Alert when mouse is hovering over text (HTML/Javascript - javascript

So I am writing a code that displays an alert box whenever the mouse hovers over a piece of text in HTML. The problem that I have is it is not working and I am not sure why. I tried finding help online but none of them worked. I need something that doesn't use JQuery for this assignment. What I have tried is to use function when activated with the mouse over event handler but that also didn't work.
This is my code:
function mouseOver(){
showAlert();
}
function showAlert(){
alert("Alert!");
}
This is another method that I have tried:
function mouseOver(){
document.getElementById("text").alert("Alert!");
}

Try this
function mouseOver(){
alert("Alert!");
}

You can use this
document.getElementById("text").addEventListener("mouseover", function( event ) {
alert("Alert!");
}, false);
<p id="text">Hover Me</p>

Related

append onclick function to div jquery

I'm trying to add an on click function to a div using these lines of code but the click event doesnt trigger the alert.
var str="<script>$(this).on(\"click\",function(){alert('hello');})";
str+="<";
str+="/script>";
$("div:contains('Send')").last().append(str);
I've also tried this and $(this)[0] but these give me the error this.on/ $(this)[0].on is not a function
I don't know what Im doing wrong and would appreciate any and all help on the matter.
Shouldn't have to go through the trouble of creating strings for script. You can just use jquerys .on and register it with a click event.
$("div:contains('Send')").last().on("click", function () {
alert('hello');
})
If you are using jQuery, you can add click event to all the div by using $("div") for selector (just remember to call the function after you load the div)
I have create an example of simple click function
$(".start").click(function() {
$(this).toggleClass("onClick");
})
http://jsfiddle.net/7j6s2Lws/2/
The $(this) will identify which object is actually trigger the event, and choose it only. In my case, if you click on a div, it will change color (of it and only it)
i would choose a slightly different approach. i hope i understood your problem right even though i dont really get what you want to achieve by putting <script> into your string here... maybe this helps:
html
<div id='container'>
<button>Send</button>
</div>
js
var $container = $("div:contains('Send')");
var elementToAppend = "<div class='myClass' style='width:100px; height:100px; border: 1px solid red'>added dynamically ... click me</div>";
appendToContainer($container, elementToAppend);
$('.myClass').click(function($element) {
alert(123);
});
function appendToContainer($container, element) {
$container.append(element);
}
fiddle
http://jsfiddle.net/2pofLnb7/2/

I have to click twice to activate function using jQuery

I am having a lot of trouble with jQuery. I have to click twice on a button to make the page disappear. I have tried importing both versions of jQuery and I tried to use the fadeOut() function on different elements, but nothing has prevailed. It works the second time I click, but never the first. This is a recurring problem, and I need to know how it can be fixed. Here is my code:
HTML:
<body>
<h1>CSS3 Buttons Showcase</h1>
Click Me!
</body>
JavaScript:
function fadeBg(){
$("#btn-1").click(function(){
$("body").fadeOut(1000);
})
}
You must change your function to:
function fadeBg(){
$("body").fadeOut(1000);
}
In your HTML code onclick is being set to run your function fadeBg. So in your function you must put what you want to run; in this case $("body").fadeOut(1000);
The issue is that you're not binding the jQuery event handler until the fadeBg() function is called on the first click. Try this instead:
<h1>CSS3 Buttons Showcase</h1>
Click Me!
$(function() {
$("#btn-1").click(function(){
$("body").fadeOut(1000);
})
});
There are two ways to bind a click to an element :
1. The old dirty inline javascript (avoid)
(HTML) : <button onclick="doSomething()">
and 2. the cleaner event binding
(HTML) : <button id="myButton">
(JS) : $('#myButton').click( doSometing )
You mixed both, binding two clicks on the same element.
<button onclick="doSomething()">
function doSomething(){ // will be done on first click
$('#myButton').click( doSometingElse ) // will be done on second click
}
You are doing the same action twice, the code is:
HTML
<body>
<h1>CSS3 Buttons Showcase</h1>
Click Me!
</body>
JavaScript
$(document).ready(function() {
$("#btn-1").click(function(){
$("body").fadeOut(1000);
})
}
function fadeBg(){
$("#btn-1").click(function(){
$("body").fadeOut(1000);
})
}
You added the onclick event directly in your html. This function adds a second event to the same button.
Just remove the onclick event in your element And do this:
$("#btn-1").click(function(){
$("body").fadeOut(1000);
})
It's considered bad practice adding onclick events directly in your html element. You can but it doesn't look good.

Can I have 2 JavaScript onClick events in a single element?

Can you put 2 JavaScript onClick events in a single element, this is what I have tried so far, I've tried calling functions but that wouldnt work either.
<div class="contactme">Message me!</div>
Calling functions:
function hide(){
document.getElementById('download').style.display='none';
document.getElementById('skype').style.display='none';
}
HTML:
<div class="contactme">Message me!</div>
However none of them seem to work.
Of course, you can do it in pure Javascript. Your HTML doesn't need the onclick property at all.
HTML:
<div class="contactme">Message me!</div>
JavaScript:
var contact = document.getElementsByClassName("contactme")[0];
contact.addEventListener("click", function() {
document.getElementById('download').style.display='none';
document.getElementByID('skype').style.display='none';
}
Now you can use contact.addEventListener to add any function you want, like this:
contact.addEventListener("click", hide);
try this
http://jsfiddle.net/ErnestoOsuna/2pjfL5oq/
Message me!
element=document.getElementById('some_id');
element.addEventListener('click',some_func);
element.addEventListener('click',some_func2);
Your both code is correct but, in first code you typed 'document.getElementByID'.
just fixed it.
Use element.addEventListener(Event, Function, false);
document.getElementById('ELEMENTID').addEventListener('click', function(e) {
// onclick code here
}, false);
document.getElementById('ELEMENTID').addEventListener('click', function(e) {
// more code here
}, false);
How to call multiple JavaScript functions in onclick event?
And about your snippet,
onclick="hide()"
You can do it logically i.e:
<div class="contactme">
Message me!'
</div>
Now in javascript do this programatically:
function myfun(var execute){
if(execute=="one"){
// execute this if it is one
}
else(execute=="two"){
// execute this if it is two
}
}
Now here whenever you call myfun('one') it execute your first condition and myfun('two') it execute second.

Clicking text doesn't show alert

I had a similar question to this before, however, the code I gave was under different circumstances.
Here's what I have now: http://codepen.io/anon/pen/hHbku
If you click on the image and then click on the text "CLICKING THIS SHOULD SHOW THE ALERT", it should show the alert that I've told it to show in the JS code, however it's not. Why is this?
HTML:
<html>
<body>
<img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/img/demopage/thumb-3.jpg" width="150" height="150"/>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://pastebin.com/raw.php?i=udGNfeN8"></script>
</body>
</html>
JS:
$(document).on("click", ".lb-caption" function() {
alert("CLICKED.");
});
The lightbox script binds click handlers to elements of the lightbox. These handlers stop propagation of the event, so it never reaches the document and your handler isn't called.
To be honest, I'm not too sure how it works, but it works :)
I added a function
this.$lightbox.find('.lb-caption').on('click', function() {
alert("CLICKED.");
return false;
});
and this function.
this.$overlay.hide().on('click', function() {
//_this.end();
alert("...");
return false;
});
maybe will adjust any other function, which is not so much needed.
see here
There was a comma missing after ".lb-caption", and as Jason P said this will also not worked, you have to directly bind to element.
$(".lb-caption").on("click",function(){
alert("CLICKED.");
});
see here

jQuery selector click function clarification

Theres a gap in my understanding that i'd liked filled;
I have a basic jQuery click function like this..
$('.cl').each(function(e)
{
alert('works');
$(this).click(function()
{
alert('no works');
});
});
My HTML is like this:
<body>
<div id='c0'>
<div class='bO cl'>Button</div>
</div>
</body>
Basic stuff.
The 'works' alert is fired ok - but with the click function nothing happens - 'no works' is not fired.
Also
$('.cl').click(function()
{
alert('help');
});
Does not work. Simple stuff i'm sure but i'm missing something.
Why is this?
One thing to make sure is that you run the event handler once the DOM and jQuery are initialized, which is by doing this:
$(function() {
$('.cl').click(function()
{
alert('help');
});
});
Also alternatively, if your cl is loaded after the fact such as by an Ajax call you can alternativley do this
$("body").on("click", ".cl", function() {
// Your code here
})
This registers the click event with the body but only gets dispatched if the actual target is of type cl.

Categories