3

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.

Sunil Kundal
  • 143
  • 1
  • 2
  • 8
  • 2
    Works fine when you load the JavaScript in the right place: http://jsfiddle.net/j08691/k5wfH/12/ – j08691 Jul 02 '15 at 02:51
  • 1
    @NewToJS - All his IDs are unique. What are you referring to? – j08691 Jul 02 '15 at 02:52
  • 2
    Easier to use properties: `document.getElementById("upgrey").style.display = "none"`. And don't use *block* to display, use `""` (empty string), that way the image will adopt its default or other inherited style (which may not be block). – RobG Jul 02 '15 at 02:53
  • @j08691: Please explain how did it work ? and how to load the JS in right place ? I see no difference in the new Fiddle you provided, yet it is working. How? – Sunil Kundal Jul 02 '15 at 02:56
  • 2
    Look in the upper left area where you set the options, above Fiddle Options. – j08691 Jul 02 '15 at 02:58
  • 1
    ok got it .. from "onLoad" to "No wrap - in " – Sunil Kundal Jul 02 '15 at 03:01

2 Answers2

1

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.

Vance
  • 897
  • 5
  • 9
  • 2
    You mean: `...style.display = "none"`. ;-) – RobG Jul 02 '15 at 02:54
  • @j08691: Is this a way out ? – Sunil Kundal Jul 02 '15 at 02:55
  • Well that's what I use @RobG. It works the same – Vance Jul 02 '15 at 03:00
  • Actually, your fix doesn't work at all. The [`HTMLElement.style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) property returns a [`CSSStyleDeclaration`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration) object that represents the element's style attribute. This solution is wrong. –  Jul 02 '15 at 04:54
  • Okay @Tiny Giant, maybe you can kindly emphasize what is wrong /what is the difference with using `document.getElementById(elementid).style="display:none"; ` instead of `document.getElementById(elementid).style.display="none"; ` because both lines does the same – Vance Jul 02 '15 at 05:32
  • Have you tested it? They do not function the same. Your version does nothing. http://jsfiddle.net/7z62q5z5/ –  Jul 02 '15 at 05:33
  • Both hides an element so what's wrong?I am using mozilla – Vance Jul 02 '15 at 05:37
  • It doesn't work. It does not function. What part of "it does not work" do you not understand? It does not hide the element. If it does in your browser then your browser is allowing a very bad thing to happen. That does not mean you should ever use it. That is an improper use of the property –  Jul 02 '15 at 05:38
  • Can you try this @Tiny Giant? I dont know how to use jsfiddle so here's the code: `

    CLick the button to Hide me

    `     – Vance Jul 02 '15 at 05:42
  • If that code works in mozilla, that is a bad thing. Use the proper documented method. –  Jul 02 '15 at 05:46
1

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

enter image description here

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

})();

Community
  • 1
  • 1
Keval Bhatt
  • 6,224
  • 2
  • 24
  • 40
  • Yes @Keval I had been informed me about this. Thank you for responding and the latter bit on 'document.ready' recommendation. Is it for the fiddle adjustment for when I want to use 'onLoad' instead of 'No Wrap' ? – Sunil Kundal Jul 02 '15 at 04:38
  • 1
    @SunilKundal and see this example http://jsfiddle.net/k5wfH/16/ i toggle you images may be it will help you – Keval Bhatt Jul 02 '15 at 04:43
  • @SunilKundal LOL -1 for what actually my answer is right ? – Keval Bhatt Jul 02 '15 at 05:26