Question

162

onclick=function() not working but href=javascript: function() works fine?

rated 0 times [ 166] [ 4] / answers: 1 / hits: 5307 / 10 Years ago, thu, august 21, 2014, 12:00:00

I have written a function which quite simply changes the style attributes of an image when clicked.

    document.getElementById(normal + current).setAttribute('style', 'display: block;');

current is a parameter for the function. e.g. changeImage(10)
and the element image which we want to change the style for has a resultant id of normal10.

To make it display, basically as it's set as display: none obviously to begin with, we need to change that to block.

So, I have two instances where I call the method changeImage(current).

One which is:

    <a href=# onclick=changeImage(10);><img src=xyz></img></a>

and another which is:

    <a href=javascript: changeImage(10);><img src=xyz></img></a>

Both of these function correctly on Chrome & Opera, the display attribute is changed both times.

However on any other browser such as IE or Firefox, the display attribute only seems to get changed where we have

    <a href=javascript...>

and not where the method is called upon via the onclick.
I tried to change to:

    document.getElementById(normal + current).style.display=block;

Unfortunately to no avail.

I don't think there is an issue with the javascript itself. Since the function executes fine when called within the href.

Does anybody have any ideas?

Thanks!

EDIT:
Done with jQuery, code executes but the style of the image still doesn't change. Works in Chrome & Opera still but not in firefox & IE.

I gave the image that is clicked to execute the function an id of img.

    <img id=img src=...></img>

and the code to execute the function is placed in the following tags (in document ready function):

    $('#img').click(function(){}

Code is executed, but style is only changed from none to block on specific browsers.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rossthomasn

Add To Favorites

Follow

Total Points: 122

Total Questions: 78

Total Answers: 105

Location: South Georgia

Member since Sun, Aug 8, 2021

3 Years ago

rossthomasn questions

1 Vue 3 - How to add Polyfills to ChainWebpack

Wed, Mar 16, 22, 00:00, 2 Years ago

1 How to display 'console.log' output in Visual Studio Code?

Wed, May 5, 21, 00:00, 3 Years ago

1 Top-level await does not work with node 14.13.-

Thu, Nov 26, 20, 00:00, 4 Years ago

1 Discord.js - ReferenceError: member is not defined

Sun, May 31, 20, 00:00, 4 Years ago

1 How to flash message in Laravel after api post request with JavaScript?

Tue, Apr 28, 20, 00:00, 4 Years ago

View All

answered 10 Years ago patienceannel · Accepted Answer

Since you asked for a jQuery solution. Here is one:

<style>

  /* hide all elements with id starting by normal... */

  [id^=normal] { display: none; }

</style>



<!-- place the http protocol if you are on localhost -->

<script src=//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js ></script>



<script>

   $(document).ready(function () {         // when page is fully loaded



     // define a click event for any

     // anchor with a class shownormal and attribute data-id defined

     $(a.shownormal[data-id]).click(function (event) {

         $(#normal + $(this).attr('data-id')).show();

         event.preventDefault();

     });



   });

</script>

and your markup can be

<a href=# class=shownormal data-id=10><img src=xyz></img></a>



<a href=# class=shownormal data-id=15><img src=xyz></img></a>

Samples on jsFiddle with jQuery and without jQuery

http://jquery.com/