If it works but Else does not

Question

If it works but Else does not

Navigation

#1 by (3 votes)

0

So, the code below (it's complete in link ), the if it works but that else does not, what's wrong?

I would like it to work like this here, in the input "NAME" by rolling the bar ( link ). When you input label appears and goes up, when you clean input em> label goes down and then disappears. I'm catching js yet.

Thanks to anyone who can help.

var z = document.getElementById('name');//input com ID name
var x = document.getElementById('label');//label com ID label

z.addEventListener("keypress", function () {

'use strict';
if (typeof z.value !== "") {
    x.style.opacity = '1';
    x.style.bottom = '4em';
    x.style.color = '#722872';
} else {
    x.style.opacity = '0';
    x.style.bottom = '1.5em';
}
seBlur();
seFocus();
});

javascript if else

asked by anonymous 29.03.2017 / 19:54

1 answer

How to validate field when losing focus? Angle installation 2

score 3 · Accepted Answer

change keypress to keyup and remove typeof example:

var z = document.getElementById('name');//input com ID name
var x = document.getElementById('label');//label com ID label

z.addEventListener("keyup", function () {

'use strict';
if (z.value !== "") {
    x.style.opacity = '1';
    x.style.bottom = '4em';
    x.style.color = '#722872';
} else {
     x.style.opacity = "0";
     x.style.bottom = '1.5em';
}
seBlur();
seFocus();
});


function seBlur() {
    'use strict';
    z.addEventListener("blur", function () {
        x.style.color = "#A2A2A2";
    });
}

function seFocus() {
    'use strict';
    z.addEventListener("focus", function () {
        x.style.color = "#722872";
    });
}

* {
    font-family: sans-serif;
    margin: 0 auto;
    box-shadow: border-box;
    position: relative;
}

body {
    left: 0;
    right: 0;
    margin: 0;
    background: #898989;
}

#container {
    width: 1030px;
}

a {
    text-decoration: none;
    outline: 0!important;
    border: 0!important
}

a:hover {
    text-decoration: none;
    outline: 0!important;
    border: 0!important
}

li {
    list-style: none
}

img {
    left: 0;
    width: 100%;
    height: auto
}

#menuFix {
    top: 0;
    position: fixed;
    display: flex!important;
    background: #722872;
    width: 100%;
    right: 0;
    height: 70px;  
    line-height: 70px
}

#menuFix ul {
    margin: 0 auto;
    left: 0;
    right: 0;
}

#menuFix li {    
}

#menuFix li a{    
}

#menuFix li a{
    background-color: transparent;
    color: #7b776f;
    top: 1.8em;
    font-weight: 700;
    top: 10px
}

#menuFix a li:hover {
    text-decoration: none;
}

#menuFix li a span {    
    padding: 12px 20px;
}

#menuFix img {
    width: 3%;
    height: 60%;
    top: 12px;
}

.navbar-nav>.active>a span,
 .navbar-nav>.active>a span:focus,
 .navbar-nav>.active>a span:hover{
    background-color: #f2f2f2!important;
}

#myDescript {
    margin-top: 0px;
    width: 100%;
    top: 0;
    padding: 140px 50px 50px;
    display: flex;
    background: #b5b5b5;
    color: #fff;
    font-size: 1.55em;
    text-align: center
}

#myDescript p {
    width: 660px;
}

#myDescript p:nth-of-type(2) {
    position: relative;
    width: 100%;

}

#myDescript img {
    width: 26%;
    top: -40px;
    height: 26%;
    border-radius: 150%
}


#myDescript hr {
    width: 60%;
    font-weight: 900;
}

#sec1 {
    padding: 10px 0 30px;
    text-align: center;
    background: #edecec
}

#sec1 img {
    width: 40%;
    height: auto;
    margin: 20px;
}

#sec1 h2 {
    color: #9b9b9b;
    font-weight: 700
}

#contact {
    border-top: 2px solid rgba( 132, 132, 132, 0.247 );
    padding: 10px;
    text-align: center;
    background: #edecec
}

#contact h2 {
    text-align: center;
    font-family: sans-serif;
    color: #7a7a7a;
}


.hr1 {
    margin: 40px 1.8% 30px 3.8%!important;
    padding: 0;
    left: 4.3em;
    width: 60%!important;
    border-bottom: 4px solid #fff!important;
    color: transparent!important;
    border-bottom: solid 5px #898989;
    text-align: center;
    white-space: nowrap;
}

.hr1::after {
    content: '\f121';
    font-family: FontAwesome;
    position: relative;    
    color: #fff!important;
    top: -.7em;
    left: 67.2%;
    font-size: 2em;
    font-weight: 500;
    white-space: nowrap;
}

.div1 {    
  display: flex 
} 

.hr {
    margin: 40px 3.8% 30px;
    padding: 0;    
    float: left;
    left: 15.25em;
    max-width: 272px;
    width: 22%;
    border: 0;
    border-bottom: solid 5px #898989;
    text-align: center;
}

.hr-NotAfter::after {
    content: '\f121';
    font-family: FontAwesome;
    float: right;
    margin: -.7em -1.42em 0 0;
    color: #7a7a7a;
    font-size: 3em;
    font-weight: 500;
}

#contact {
    padding-bottom: 80px
}

form {
    width: 40%;
    margin-left: 60px;
}

form .row:first-child .form-item {
    border-top: 1px solid #fff;
}

.form-item {
    position: relative;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #bbb;
}

.form-item input,
.form-item textarea {
    z-index: 1;
    position: relative;
    padding-right: 0;
    padding-left: 0;
    border: 0;
    border-radius: 0;
    font-size: 2.2em;
    background: 0 0;
    box-shadow: none!important;
    resize: none;
    width: 100%;
}

.form-item input:focus,
.form-item textarea:focus {
    outline: 0
}

label {
    display: inline-block;
    z-index: 2;
    position: relative;
    bottom: 1em;
    margin: 0;
	padding: 0;
	left: -8.3975em;
	right: 0;
    font-size: 1.5em!important;
    line-height: 1.764705882em;
    font-weight: 700;
    vertical-align: baseline;
    color: #722872;
    opacity: 0;
    -webkit-transition: bottom .4s ease, opacity .7s ease;
    transition: bottom .4s ease, opacity .7s ease;
}

.form-item-filled label {
    top: -30px;
    opacity: 1;
    color: #aaa;
}

#contactFlex {
    display: flex;
    top: 50px
}

#contactFlex > div {
    width: 40%;
    font-size: 1.5em;
    color: #686868;
    text-align: left
}

form button {
    bottom: 20px;
    padding: 2px 8px;
    font-weight: 700;
    font-size: 1.3em;
    color: #7a7a7a
}

#contact > p {
    text-align: right;
    right: 7.5%;
    font-size: 1.4em;
    font-weight: 500;
    color: #7e7b7b
}

footer {
    width: 100%;
    height: 13em;
    background-color: #a8a8a8;
    text-align: center;
    font-size: 1.4em;
    font-weight: 700;
    color: #e0e0e0
}

#footFlex {
    width: 80%;
    display: flex;
}

#footFlex > div:not(p){
    margin-top: 6%!important
}

#footFlex ul {
    display: flex;
    margin-right: 40px;
    width: 100%;
}

#footFlex li {
    border: 2px solid #fff;
    border-radius: 50%;
    padding: 10px;
    margin: 2px;
    cursor: pointer;
    transition: all .5s;
}

#footFlex li:hover{
    background-color: #fff;
}

#footFlex li:hover i{
    color: #722872;
}

#footFlex li i:hover{
    background-color: transparent;
}

#footFlex li i{
    transition: all .5s;
    color: #fff
}

#footFlex div:first-child p:nth-child(2){
    width: 65%;
    left: 17.5%
}

#footFlex div p:nth-child(1){
    font-size: 1.3em
}

#footFlex div:first-child p:nth-child(2) a{
    color: #722872;
    font-weight: 400;
}

#footFlex div:first-child p:nth-child(2) a:hover {
    border-bottom: 2px solid #722872!important
}

#footFlex div:first-child p:first-child, #footFlex div:nth-child(2) p:first-child {
    margin-bottom: 1em
}

footer + div {
    height: 5.6em;
    background-color: #722872;
    font-size: 1.4em;
    font-weight: 700;
    color: #e0e0e0;
    line-height: 5.6em;
    text-align: center
}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="FreeCodeCamp.css">
</head>

<body id="about" data-spy="scroll" data-target=".navbar" data-offset="50">
<section id="contact">          
<div id="contactFlex">
<form id="contactForm" novalidate="">
      <div class="form-item">
        <input class="name" id="name" type="text"placeholder="Name"           required=""/> 
      </div>
        <label class="label" id="label" for="“name”">Name</label>
</form>
               
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="Javascript.js"></script>
</body>

</html>