On Click Image Doesn't Work - javascript

I made a script with an image and a javascript function but it doesn't work. It should redirect to www.moseso.de when you click the image. What's wrong with it?
<html>
<head>
<title>Hallo</title>
</head>
<body>
<img src="test.jpg" onclick="func" />
<script>
function func() {
window.location="www.moseso.de"
}
</script>
</body>
</html>

try setting:
onclick="func();"
also close the statement:
window.location="www.moseso.de";

You can try this:
<img src="test.jpg" alt="" class="img.my_clickable_image" />
<script>
$(document).ready(function() {
$('my_clickable_image').click(function() {
window.location.href = www.moseco.de';
});
});
</script>

Related

while getting image src using jquery returns undefined

$(document).ready(function() {
var aa = $('.page-1 img').attr('src');
alert(aa);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img src="dddddd.jpg" width="76" height="100" class="page-1" />
</body>
</html>
while getting image scr using jquery returns undefined can anyone solve this problem?
Your selector should be img.page-1.
.page-1 img will try to find img tag inside an element with class .page-1.
$(document).ready(function() {
var aa = $('img.page-1').attr('src');
alert(aa);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://placebear.com/g/200/300" width="76" height="100" class="page-1" />
You are using selector in wrong way. That's why script is return error. Since .page-1 is on the same element you need select it by following pattern.
$('img.page-1').attr('src');
<script>
$(document).ready(function(){
var aa= $('img.page-1').attr('src');
alert(aa);
});
</script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img src="https://www.google.ae/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" width="76" height="100" class="page-1" />
</body>
</html>
.page-1 img this method will find the child img element of .page-1. Since it is not and there is no child element so selector won't work.

Changing HTML image, function doesn't seem to be called

I am trying to add a source to an image through Javascript, and some JQuery code I found on internet, but it doesn't seem to work:
<html>
<head>
<script src = "http://www.example.com/images/">
var count=1;
var initnumber=100;
function changeImage(){
count++;
$("#HTMLPhoto").attr('src'+((initnumber+count).toString)+".jpg");
}
</script>
</head>
<body onload="changeImage()" >
<img id="HTMLPhoto"/>
<button onclick="changeImage()">Next Image</button>
</body>
I am also trying to call once again the changeImage() function with button clicks.
Edit:Managed to make it work, I changed the code a bit, if anyone wants to see:
<html>
<head>
<script>
var count=1;
function nextImage(address){
count++;
image = document.getElementById('HTMLPhoto');
image.src ="http://www.example.com/images/"+(address+count)+".jpg";
}
</script>
</head>
<body>
<img id="HTMLPhoto"/>
<button onclick="nextImage(100)">Next Image</button>
</body>
Change:
$("#HTMLPhoto").attr('src'+((initnumber+count).toString())+".jpg");
To:
$("#HTMLPhoto").attr('src', ((initnumber+count).toString())+".jpg");

dynamically applying image src is not working in FF and IE

Try the follwing code in w3schools in FF, IE and chrome. Observe the behavior.
In chrome the image is reloading. But in IE and FF it's not working.
<!DOCTYPE html>
<html>
<head>
<script>
function changeSrc()
{
document.getElementById("myImage").src="some captcha url";
}
</script>
</head>
<body>
<img id="myImage" src="compman.gif" width="107" height="98">
<br><br>
reload
</body>
</html>
Thanks,
Sravanthi.
Try Close the final Quote and add the ;, before the last }
function changeSrc()
{
document.getElementById("myImage").src="some captcha url";
}
This should do what you need. Don't forget to include the latest version of jQuery in your script:
$(function () {
//REFRESH CAPTHCA IMAGE
$("div#refresh").on("click", function()
{
var newSrc= "some captcha url";
$("#myImage").attr("src",newSrc);
});
});
<img id="myImage" src="compman.gif" width="107" height="98">
<div id="refresh"> Refresh </div>

Refreshing a div creates a duplicate in struts2

I'm new to Javascript so please bear with me.
I have code which refreshes the div of the parent window when the child window closes. The problem is when content of the div refreshes it creates a duplicate, and I don't know why. My code is below.
Inside the head tag of the parent I'm doing this:
<html>
<head>
<script language="javascript" type="text/javascript">
function ParentWindowFunction()
{
$(".mydiv").load("Welcome.jsp");
return false;
}
</script>
</head>
<body>
<div class="mydiv">
<img src="<s:property value="#session.img"/>" id="img" width="200" height="150" />
</div>
</body>
</html>
Inside child window's head tag I have:
<html>
<head>
<script type="text/javascript">
function refreshAndClose()
{
window.opener.ParentWindowFunction();
window.close();
}
</script>
</head>
<body onbeforeunload="refreshAndClose();">
...
</body>
</html>
i found solution for my problem instead of refreshing div i am reloading entire page like this
<script>
function winopen()
{
chatterinfo = window.open('fileupload.jsp',"chatterwin","scrollbars=no,resizable=yes, width=400, height=300, location=no, toolbar=no, status=no");
chatterinfo.focus();
}
</script>
<script language="javascript" type="text/javascript">
function ParentWindowFunction()
{
window.location="Login.action?uname=${uname}&&pass=${pass}";
}
</script>
</head>
<body>
<div class="mydiv">
<img src="<s:property value="#session.img"/>" id="img" width="200" height="150" />
</div>
</body>
</html>
Inside child window's head tag I have:
<html>
<head>
<script type="text/javascript">
function refreshAndClose()
{
window.opener.ParentWindowFunction();
window.close();
}
</script>
</head>
<body >
<input type=button onclick="refreshAndClose();" />
</body>
</html>

How do I add a .click() event to an image?

I have a script that places an image based on a mouse click thanks to Jose Faeti. Now I need help adding a .click() event to the code below so that when a user clicks the image it performs the function shown in the script.
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
I put the entire code below, in case you want to see it.
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
document.getElementById('foo').addEventListener('click', function (e) {
var img = document.createElement('img');
img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');
e.target.appendChild(img);
});
// -->
</script>
</head>
<body>
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
</body>
</html>
Help?
First of all, this line
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
You're mixing HTML and JavaScript. It doesn't work like that. Get rid of the .click() there.
If you read the JavaScript you've got there, document.getElementById('foo') it's looking for an HTML element with an ID of foo. You don't have one. Give your image that ID:
<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />
Alternatively, you could throw the JS in a function and put an onclick in your HTML:
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" onclick="myfunction()" />
I suggest you do some reading up on JavaScript and HTML though.
The others are right about needing to move the <img> above the JS click binding too.
You can't bind an event to the element before it exists, so you should do it in the onload event:
<html>
<head>
<script type="text/javascript">
window.onload = function() {
document.getElementById('foo').addEventListener('click', function (e) {
var img = document.createElement('img');
img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');
e.target.appendChild(img);
});
};
</script>
</head>
<body>
<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />
</body>
</html>
Enclose <img> in <a> tag.
<img src="smiley.gif">
it will open link on same tab, and if you want to open link on new tab then use target="_blank"
<img src="smiley.gif">
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" >
function openOnImageClick()
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
var img = document.createElement('img');
img.setAttribute('src', 'tiger.jpg');
img.setAttribute('width', '200');
img.setAttribute('height', '150');
document.getElementById("images").appendChild(img);
}
</script>
</head>
<body>
<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>
<div id="images" >
</div>
<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" />
<img src="Logo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" />
</body>
</html>

Categories