why does my javascript code for changing(onclick) the div opacity fail?

zkytony Published at Dev

zkytony

<a id = "click_show_more" href = "" onclick = "showMore()">
    <li id = "more">
    MORE
    </li>
</a>
<div id = "more_hidden">
    <ul id = "list_hidden">
    <li>EFG</li>
    <li>ABC</li>
    </ul>
</div>

The above is my html code. I want to call the javascript function "showMore()" when clicking on a the link "MORE" with id "click_show_more".

This is my javascript code.

function showMore() {
    var moreShow = document.getElementById('more_hidden');
    moreShow.style.opacity = 0.8;
}

I don't know why this code fails. Nothing happens when I clicked on the link.

Please help me figure it out. Thank you so much!

m59

Remove the href attribute from your link or set it to something like # so that a page won't be loaded. You are linking to another page (or the same page) with that.

Further, your html is invalid. <li> does not belong as a child of <a>.

See this demo with your markup corrected demonstrating the difference between the link with the href and with it removed. http://jsbin.com/iJEDiku/2/edit

Please don't use inline javascript (like onclick in your html). Study about this here: Why is inline JS bad?

Here's your code following better practices. Live demo here (click).

Markup:

<a id="change-opacity">Click here to change opacity.</a>
<div id="opacity-gets-changed">
  <ul>
    <li>EFG</li>
    <li>ABC</li>
  </ul>
</div>

JavaScript:

var a = document.getElementById('change-opacity');
var div = document.getElementById('opacity-gets-changed');

a.addEventListener('click', function() {
  div.style.opacity = 0.4;
});

Collected from the Internet

Please contact [email protected] to delete if infringement.