how can i call javascript function when clicking on image? [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
How can I call a js function so it work on click image?
$("#closeButton").click(function () {
$("#sheet").css("display", "none");
});
image code?
<img src="images/divclose.png" alt="*" onclick="function()"/>

Add an ID (remove your onclick thingy):
<img src="images/divclose.png" alt="*" id="closeButton" />
Write this (note that you don't need the outer function anymore if you already have it);
$(function () {
$("#closeButton").click(function () {
$("#sheet").css("display", "none");
});
});
Now, go reading a beginner tutorial, a book or whatever. Learn the basics ;)

You try to access the image using an id in your code, but you don't have any id on the image element. Just add that, and it will work (provided that you have your code inside the ready or load event, so that the element exists when it runs):
<img src="images/divclose.png" alt="*" id="closeButton"/>
Don't have any onclick attribute on the element if you want to bind the event using jQuery. The event model is somewhat different for jQuery, and may conflict with plain DOM events.

tag must have the "id" and you can use the same method you described

I assume you want to use jquery so you should check jquery documentation.
What you did is declaring an "oldschool" pure javascript way to call "function()" on the click.
Therefor you need to declare the function "function" in the javascript itself the old fashioned way.
Using jquery and your code all you need is to assign your id to your image.
<img src ="foo.png" id="closeButton"/>
and it should work.

Related

Javascript function unable to change style display from none to block for img / image source [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Here is a simple code
fiddle: http://jsfiddle.net/k5wfH/11/
which is not working for me for 2 days straight.
In my website, the 2nd, i.e. the
flag
image style display change works,
but the 1st, i.e. the
upvote
image style display change does not work.
However in Fiddle, both of the style display change functions are not working.
HTML:
<img id='upgrey' class='up' src='http://s24.postimg.org/8v77coekx/up_grey.png' width='26px' onclick='upvote();'>
<img id='upgold' class='up' src='http://s24.postimg.org/jtdvh4dsh/up_raised.png' width='26px' style='display:none'>
<img id='flaggrey' class='flag' src='http://s1.postimg.org/egcymr8cb/flag_grey.png' height='26px' onclick='flag();'>
<img id='flagred' class='flag' src='http://s1.postimg.org/a5yar6397/flag_raised.png' height='26px' style='display:none'>
JS
function upvote() {
document.getElementById("upgrey").setAttribute("style", "display:none");
document.getElementById("upgold").setAttribute("style", "display:block");
}
function flag() {
document.getElementById("flaggrey").setAttribute("style", "display:none");
document.getElementById("flagred").setAttribute("style", "display:block");
}
I thought this was the bread and butter functionality of JavaScript and no idea what else I can do at all to fix this.
Ah, when the simple things fail to work!
Edit:
Seems like another div's padded region was covering one of the images (almost completely ~95%) and i was unable to click the image and rather just clicking the other div's padded region. Everything is sorted out. Learned a thing or two here. Thank you everyone.
My friend your code is perfect and it is running.
see this example: http://jsfiddle.net/k5wfH/16/
See this discursion its an jsfiddle config seeting. when you use external file.
How to use function declaration with jsfiddle
I done this in your fiddle and now it is working.
And use this if you want it like an document.ready
(function() {
// your page initialization code here
// the DOM will be available here
})();
when simple things fail to work, try solving it with simple solutions. :) Try changing the code beginning at the setAttribute part; say change document.getElementById("upgrey").setAttribute("style", "display:none"); to document.getElementById("upgrey").style="display:none"; and so on.

href that only runs javascript [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have an a tag inside of a form that is used to remove uploaded files. I don't want the a tag to take the user to another section of the page, or try to submit the form or anything like that, I only want it to run a javascript function. How can I accomplish this? I'm not sure what to put in the href?
You can use #:
function doSomething() {
alert('test');
}
Click me
Really, any URL can go there - the return false; short-circuits the default behaviour of the link.
In general, if at all possible, it's best to use a real URL that does the same thing your JS does, for users who have JS disable. This is called "graceful degradation".
You really need to add more code and examples to your questions in the future. Fortunately I know what you're actually asking.
In the function that runs when you click the link, you want to prevent its default behavior.
Here's a very simple example:
<a href="http://google.com" id="myanchor">
Javascript
document.querySelector('#myanchor').addEventListener('click', function (ev) {
ev.preventDefault();
// your code here.
});
<form>
<!-- other inputs-->
<input type='button' onclick='run()' />
</form>
Then for the Javascript:
function run() {
//do something
}

How to add a data attribute to each item in a select using jQuery [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I'm trying to create a select drop down, which on change, takes the "data-bg" attribute value of the option, and applies it as the body background.
But the background image urls are coming from somewhere in the php script.
so what i need to do is, take a php array of background image urls, and with a for loop, create a jquery function to add the image urls as data attributes to each option in the select input.
one thing is that the 1st option in the list is a blank, so i will need an offset there too.
What jquery function would i be able to use to loop through the option's in a select to apply a data-attr, so i can bind an on change to change the background image.
let me know if you need any clarification.
Use jquery's each() function with a selector for option elements.
$('[name=options]').each(function(index, element) {
$(element).attr('data-bg', value);
});
See my SUPER DEMO HERE
I believe this is what you want.
Use jQuery.each() and onchange() function
Use each function in jquery
[enter link description here][1]
[Chek the demo here]: http://jsfiddle.net/5aRvF/53/
I assume that $arr is a PHP array that contains the URLs and that you can include PHP directly in scripts (may need server configuration but easier to write this code inline in your HTML document). I also assume that the select has an id of "my_select".
var arr = <?php echo json_encode($arr); ?>
$("#my_select option").each(function (i, opt) {
$(opt).attr("data-bg", arr[i]);
});

Get parent div id of second javascript? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I have a div which is like this:
<div id="mainDiv">
<script>
javascript here...
</script>
</div>
I basically want to get the ID of the div it is inside.
I have tried using jQuery and classic javascript to do this but it keeps returning undefined.
Does anyone have any idea's? Thanks
Since broswer read the code from up to down, you can do this:
Vanilla JS
var scriptTags = document.getElementsByTagName('script');
var id = scriptTags[scriptTags.length - 1].parentNode.id;
jQuery
var id = $('script').last().parent().prop('id');
when it will read this code, the last script tag is the one the browser is reading.
Here's a fiddle : http://jsfiddle.net/nb234/
Check this out http://jsfiddle.net/78N9A/1/
<div id="parent">
<script id="scr">
function show()
{
alert('hello');
}
</script>
</div>
window.onload = function(){
var ele = document.getElementById('scr').parentNode;
alert(ele.id);
}
<script id="script">
Then
$('#script').parent();
If I understand correctly, you are saying that the id on the parent div is unknown in advance, and you want to use JS to determine what it is.
If you can't edit the script tag to add an id, maybe you could do a document.write() within that block to add in a little hidden element, then you can test to see what that element's parent is.
http://jsfiddle.net/AtRYF/
JAVASCRIPT:
Give your script an ID and then use parentNode to move up the DOM.
var the_div_you_want = document.getElementById("skript").parentNode.id;
JQUERY:
Pretty sure .parent() is what you're after
$('#scriptId').parent().attr("id");
Regardless, you need to find some way to locate the script and the move up the dom to find that relationship. Hope this helps.
http://jsfiddle.net/Zbuf8/1/
jQuery(document).ready(function($) {
$('div').attr('id');
});
should get you the value you need.

click and if in Javascript [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
I've this function in my script :
$("#image4").click(function(){
if($(this).attr("src")=="http://XXX.jpg"){
$(this).attr("src","http://YYYY.jpg");
}else{
$(this).attr("src","http://XXX.jpg");
}
return false;});
HTML
<img src="http://XXX.jpg" id="image4"/>
I don't understand why when I click on my image, the if part doesn't works. I explain : If I use this code, nothing change. If I add and alert un my click function, I see the alert twice and see the image change twice to.
It seems, "if" doesn't works and apply "if" and "else" at each time
Someone can help me about that. I think it a basic feature, I don't understand why it doesn't works.
Thanks
("#image4").click(function(){
^^
you missed a bracket!
Working: http://jsfiddle.net/MAVyb/
The sysntax and everything on your code is right so it is definetly value problem. Problem may be src have leading or trailing space in it.
try alert like
alert("-"+$(this).attr("src")+"-")
and whether is there any space between -(hypen) and src value.
also try
alert(($(this).attr("src")=="http://XXX.jpg")), it should return true if the src is equal
Update: i can reproduce your problem -- you should have attached the event listener function for two times. check your original code. that is the problem. check your code. you can verify this by changing id to some other in jquery method and img tag

Categories

Resources