Jalon Juanis Jalon Juanis - 4 months ago 13
CSS Question

Javascript click doesn't working

This my script code

function() {
var $phone = '123456123',
$email = 'info@youremail.com',
phone = $('#phone'),
email = $('#email');

$(phone).click(function() {
var text = $(this).text() == $phone ?
'Click to view number' : $phone;
$(this).text(text).toggleClass("active");
});

$(email).click(function() {
var text = $(this).text() == $email ?
'Click to view email' : $email;
$(this).text(text).toggleClass("active");
});

}();


This is my CSS

#phone,#email {
margin-top:20px;
width:300px;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
color:#666;
font-family: Geneva,sans-serif;
text-align:center;
font-size:20px;
background-color: #fafafa;
background-size: 14%;
background-repeat: no-repeat;
background-position: 3% 50%;
outline:none;
border:none;
border-style:none;
font-weight:700;
cursor:pointer;
padding:20px;
border-radius:50px
}


This is my HTML code

<p id="phone" >Click to view number</p>
<p id="email" >Click to view email</p>


I want to hide the phone number and email using javascript on website and only show it if the user click the "Click to view number", is there are anything wrong with my code? I click it but it doesn't change anything. I cannot detect where I did wrong.

Answer

Just needed a small fix on js. See it working here

$(function() {
    var $phone = '123456123',
          $email = 'info@youremail.com',
            phone = $('#phone'),
              email = $('#email');

    $(phone).click(function() {
        var text = $(this).text() == $phone ?
            'Click to view number' : $phone;
        $(this).text(text).toggleClass("active");
    });

    $(email).click(function() {
        var text = $(this).text() == $email ? 
            'Click to view email' : $email;
        $(this).text(text).toggleClass("active");
    });
});    
Comments