Javascript - onClick ineffective in IE and Chrome

Question

I am having issues with the onclick event in both IE and Chrome. The click event will work well on the first implementation of it but any event after that is not recorded. I have checked the console in both IE and Chrome and they give me no information on any issues. I have pasted my code if you guys could take a look.

html

<div class="userChoice" id="userChoice">
      <a class="fauxBtn" id="memberLink" onClick="userSelection(memberLink);">I'm a Member</a>
      <a class="fauxBtn" id="nonMemberLink"  onClick="userSelection(nonMemberLink);">I'm a Non-Member</a>
      <a class="fauxBtn" id="studentLink" onClick="userSelection(studentLink);">I'm a Student</a>
</div>

javascript

function userSelection(userChoice){
    var uC = userChoice.id;
    var userChoice = document.getElementById("userChoice");
    var memTest = document.getElementById("membershipTest");
    var memFail = document.getElementById("membershipFail");
    var memCosts = document.getElementById("memberCosts");
    var nonMemCosts = document.getElementById("nonMemberCosts");
    var studentCosts = document.getElementById("studentCosts");
    var para =  document.getElementById("preAmble");

    if(uC == "memberLink"){
        nonMemCosts.style.display = "none";
        memTest.style.display = "block";
        studentCosts.style.display = "none";
        userChoice.style.display = "none";
    }else if(uC == "nonMemberLink"){
        nonMemCosts.style.display = "block";
        memTest.style.display = "none";
        studentCosts.style.display = "none";
        userChoice.style.display = "none";
    }else if(uC == "studentLink"){
        nonMemCosts.style.display = "none";
        memTest.style.display = "none";
        studentCosts.style.display = "block";
        userChoice.style.display = "none";
    }
}

Any help would be useful. Thank you.

Are you not hiding it straight away when clicking on one of the links?? (`userChoice.style.display = "none"`) — putvande, Mar 06 '14 at 14:51
@Ani onclick and onClick make no difference. I have tried both. IE and Chrome will render those the same. Is javascript: userSelection(whatever) a more broad way of attacking this issue?\ — soccerman stan, Mar 06 '14 at 14:55
try to add quotes userSelection('memberLink'), heard of jQuery ? it will make things way easier — v0d1ch, Mar 06 '14 at 14:55
@Ani Are you randomly suggesting things or do you care to provide reasons? `onClick` should not cause a problem, and technically if the OP wants to do stuff when clicking a link, it should be a button styled like a link. But if you want to suggest `href` over `onclick`, give a reason. http://stackoverflow.com/questions/1070760/javascript-function-in-href-vs-onclick . Also note that the OP doesn't have `href` attributes — Ian, Mar 06 '14 at 14:55
@putvande yes I am hiding it right away through a css style. from there I only reveal what I need — soccerman stan, Mar 06 '14 at 14:55
@putvande That is because the browser normally expects the href to contain a URI, so the javascript: prefix tells it to expect JS code instead. However, I don't recommending doing that because the page won't work for people who have JS disabled. Better to include an href that directs the user to a page telling them to enable JS. — Ani, Mar 06 '14 at 15:01

Ani · Accepted Answer · 2014-03-06T15:16:09.223

-2

Okay Here you go: You had missing ID's in your Html...

http://jsfiddle.net/Z3XvL/3/

<div class="userChoice" id="userChoice">
  <a class="fauxBtn" id="memberLink" href="javascript: userSelection('memberLink');">I'm a Member</a>
  <a class="fauxBtn" id="nonMemberLink"  href="javascript: userSelection('nonMemberLink');">I'm a Non-Member</a>
  <a class="fauxBtn" id="studentLink" href="javascript: userSelection('studentLink');">I'm a Student</a>
</div>
<div id="membershipTest">This is membershipTest</div>
<div id="membershipFail">This is membershipFail</div>
<div id="memberCosts">This is memberCosts</div>
<div id="nonMemberCosts">This is nonMemberCosts</div>
<div id="studentCosts">This is studentCosts</div>
<div id="preAmble">This is preAmble</div>

edited Mar 06 '14 at 15:16

answered Mar 06 '14 at 14:56

Ani

4,473
4
26
31

Thank you for the answer this worked but i'm still skeptical about the difference between onclick and onClick. Can you give me some tutorials I can read – soccerman stan Mar 06 '14 at 16:03
javascript is case sensitive. Read this: http://stackoverflow.com/questions/4380719/onclick-or-onclick OR But your actual problem was the data wasn't passed an an argument - so I added single quotes. Also, you had `ID's` missing in `HTML` but you were doing `style.display none` to them, which caused javascript to break, because javascript was unable to find those `HTML element's` – Ani Mar 06 '14 at 16:12

Javascript - onClick ineffective in IE and Chrome

1 Answers1