I use a <img>, set onclick() method, but it cannot call the method:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date</title>
</head>
<body>
<div style="width: 300px; height: 200px;" id="img-div" >
<img id="img-id" src="resources/01.jpg" width="200px" height="80px" style="CURSOR:pointer;" onclick="close();">
</div>
<script type="text/javascript">
function close(){
console.log('js');
alert(111);
}
</script>
</body>
<html>
Why when I click the <img>, it can not execute the close() cody?
I really don't know how to resolve the issue.
As haim770 pointed out in a comment (edit; and now an answer), the problem is the name of the function. The global namespace is really crowded, and there's already a close function in it that you can't override. Use a different name.
This is one of the many reasons not to use onxyz attribute-style event handlers: They require that your functions be globals. Instead, use modern event handling that doesn't require that you use globals:
document.getElementById("img-id").addEventListener("click", function() {
// ...your code here...
}, false);
Make sure the code above runs after the img element exists. (If you have to support obsolete browsers like IE8 — or IE9-11 when they hobble themselves with [in]compatibility mode — see this answer.)
Example:
document.getElementById("img-id").addEventListener("click", function() {
// ...your code here...
alert("Clicked");
}, false);
<div style="width: 300px; height: 200px;" id="img-div">
<img id="img-id" src="https://www.gravatar.com/avatar/4f8efc215ecc23017b42334c9b30c49b?s=32&d=identicon&r=PG&f=1" style="CURSOR:pointer;">
</div>
When you define a function named close on the global context (window, in case of the browser), you're actually defining it as window.close. But, since window.close is reserved for the purpose of closing the current window, they collide.
Change the name to something less generic:
function closeIt() {
// ...
};
The problem is in the name "close()"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date</title>
</head>
<body>
<div style="width: 300px; height: 200px;" id="img-div" >
<img id="img-id" src="resources/01.jpg" width="200px" height="80px" style="CURSOR:pointer;" onclick="closing();">
</div>
<script type="text/javascript">
function closing(){
console.log('js');
alert(111);
}
</script>
</body>
<html>
You have used close() function which is same as JavaScript's native close() function, so use another name as below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date</title>
</head>
<body>
<div style="width: 300px; height: 200px;" id="img-div" >
<img id="img-id" src="resources/01.jpg" width="200px" height="80px" style="CURSOR:pointer;" onClick="close_function();"/>
</div>
<script type="text/javascript">
function close_function(){
console.log('js');
alert(111);
}
</script>
</body>
<html>
Related
this is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js"></script>
</head>
<body onload="load();">
<img src="img1.png">
<img src="img2.png">
<img class="img3" src="img3.png">
</body>
</html>
And I want the 3rd image to go to the left when mouse is over it. (It has position: absolute; on it) using this js code
let img;
function load(){
img = document.querySelector(".img3");
img.addEventListener("mouseover", mouseover);
}
function mouseover(){
img.style.left = "0px";
}
but mouseover never gets called. (Checked with logging)
you can use the hover method in css to achieve this, it would look something like:
.img3:hover {
width: *put desired width here*;
height: *put desired height here*;
}
You might need to use id tags to make the default image shrink when the img3:hover event occurs. You can find more information about it here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
In your css you can use
.img3:hover{
/* css here */
}
If you use this method you do not need to use Javascript to change css on hover it is built in to css already :)
<html>
<head>
</head>
<body>
<(some tag #1) ................>
<(some tag #2) ................>
<(some tag #3) functionNameToBeCalled(params....) >
</body>
</html>
When the tag # 1&2 are executed and code is on tag #3 I want it to call the function present in the javascript AUTOMATICALLY and NOT by using onclick().
Is there a way to execute this?
You can call the function without a click by using the ready function.
$(document).ready(function(){
functionNameToBeCalled(params....)
});
Or another vanilla way,
<script>
// self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
})();
</script>
Also,
There is a standards based replacement,DOMContentLoaded that is supported by over 98% of browsers, though not IE8:
document.addEventListener("DOMContentLoaded", function(event) {
//do work
});
You can use the jQuery delay() method to call a function after waiting for some time. Simply pass an integer value to this function to set the time interval for the delay in milliseconds.
Let's check out an example to understand how this method basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Execute a Function after Certain Time</title>
<style>
img{
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
function showImage(){
$("img").fadeIn(500);
}
$(document).ready(function(){
$(".show-image").click(function(){
$(this).text('loading...').delay(1000).queue(function() {
$(this).hide();
showImage(); //calling showimage() function
$(this).dequeue();
});
});
});
</script>
</head>
<body>
<button type="button" class="show-image">Show Image</button>
<img src="../images/kites.jpg" alt="Flying Kites">
</body>
</html>
I want to change an image on a click but it doesn't work:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/build/tailwind.css" />
<title>Document</title>
</head>
<body class="bg-black">
<h1 class="text-4xl font-bold text-center text-blue-500">Hello world!</h1>
<lottie-player
src="https://assets7.lottiefiles.com/private_files/lf30_vAtD7F.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px;"
loop
autoplay
id="img"
onclick="change()"
>
</lottie-player>
<script src="../js/index.js"></script>
<script src="https://unpkg.com/#lottiefiles/lottie-player#latest/dist/lottie-player.js"></script>
</body>
</html>
function change() {
document.getElementsByName('lottie-player').src = 'https://assets7.lottiefiles.com/packages/lf20_uzCbcN.json';
}
I got this error, on the console:
Using onclick attribute is considered as a bad practice. Instead, use addEventListener().
And note that, getElementsByName() returns a collection of all elements in the document with the specified name.
document.getElementById('img').addEventListener('click', function() {
this.src = 'https://assets7.lottiefiles.com/packages/lf20_uzCbcN.json';
});
I have this code below that contains a simple hello world html page i'm trying to use the library html2canvas to try to download the canvas but it doesn't seem to be working i'm following a tutorial i saw but it doesn't work am i doing something wrong below? Any help would be greatly appreciated.
function sendData() {
html2canvas(document.getElementById('capture')).then(function (canvas) {
$('#capture').append(canvas);
$('#match-button').attr('href', canvas.toDataURL('image/png'));
$('#match-button').attr('download', 'Test.png');
$('#match-button')[0].click();
});
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="//#" />
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Helloo world!</h4>
</div>
<div id="match-button" onclick="sendData();">capture</div>
</body>
</html>
First of all. If test is an id of some element, jQuery syntax requires # before it.
$('#test')
Then, html2canvas onrendered option is deprecated. Use then() method instead as described on the official site https://html2canvas.hertzen.com/. I could not find test element in html snippet from the question, so I added it after the match-button. The modified code looks like this:
<script>
function sendData() {
html2canvas(document.getElementById('capture')).then(function (canvas) {
$('#capture').append(canvas);
$('#test').attr('href', canvas.toDataURL('image/png'));
$('#test').attr('download', 'Test.png');
$('#test')[0].click();
});
}
</script>
...
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Helloo world!</h4>
</div>
<div id="match-button" onclick="sendData();">capture</div>
<a id="test" href="#"></a>
I saw a few similar topics which did help but I have specific problem and didn't manage to solve it alone so if anyone can help out I would appreciate it
I want to add onclick event to a div element.
HTML:
<div id="thumb0" class="thumbs" onclick="klikaj('rad1')"></div>
JavaScript:
function klikaj(i)
{
document.getElementById(i).style.visibility='visible';
}
Wanted result: div with id="rad1" (which is hidden) turns visible, when clicked on div with id="thumb0".
This works when I add it to a button element but don't know how it goes with div elements.
I'm not sure what the problem is; running the below works as expected:
<div id="thumb0" class="thumbs" onclick="klikaj('rad1')">knock knock</div>
<div id="rad1" style="visibility: hidden">hello world</div>
<script>
function klikaj(i) {
document.getElementById(i).style.visibility='visible';
}
</script>
See also: http://jsfiddle.net/5tD4P/
maybe your script tab has some problem.
if you set type, must type="application/javascript".
<!DOCTYPE html>
<html>
<head>
<title>
Hello
</title>
</head>
<body>
<div onclick="showMsg('Hello')">
Click me show message
</div>
<script type="application/javascript">
function showMsg(item) {
alert(item);
}
</script>
</body>
</html>
Depends in how you are hiding your div, diplay=none is different of visibility=hidden and the opacity=0
Visibility then use ...style.visibility='visible'
Display then use ...style.display='block' (or others depends how
you setup ur css, inline, inline-block, flex...)
Opacity then use ...style.opacity='1';
Its possible, we can specify onclick event in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="thumb0" class="thumbs" onclick="fun1('rad1')" style="height:250px; width:100%; background-color:yellow;";></div>
<div id="rad1" style="height:250px; width:100%;background-color:red;" onclick="fun2('thumb0')">hello world</div>
<script>
function fun1(i) {
document.getElementById(i).style.visibility='hidden';
}
function fun2(i) {
document.getElementById(i).style.visibility='hidden';
}
</script>
</body>
</html>
I think You are using //--style="display:none"--// for hiding the div.
Use this code:
<script>
function klikaj(i) {
document.getElementById(i).style.display = 'block';
}
</script>
<div id="thumb0" class="thumbs" onclick="klikaj('rad1')">Click Me..!</div>
<div id="rad1" class="thumbs" style="display:none">Helloooooo</div>