Add text from an input tag to a div and then repeat

Question

General Description:

I have made a page where I use an input tag. I add a value there and click a button. Then the value I added shows up in a div.

Problem:

It adds the value when I click the button for the first time. But if I try to type something else the input tag and then click the button again, the div shows the value I added the first time.

$('#one').click(function(e) {
    console.log($('#thebox1').val());
    if($('#thebox1').val().length > 0) {
        var c = $('#thebox1').val();
        $('.popup1').removeClass().addClass(c).text(c);
    }
});

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}


body {
    background: hsl(184,65%,49%);
    margin: 0;
    font-family: 'Lato';
    text-align: center;
    color: #000;
 
}

input {
 width:100%;
 max-width:320px;
 background:#fff;
 color:#333;
    font-family: Lato;
    padding: 25px 15px 25px 0;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    border: 3px solid #333;
}

::-webkit-input-placeholder {
   color: #000;
   text-align:center;
}

.resizable-text {
  font-size:1vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="VALUE " id='thebox1'>

<div><input id="one" style="background:#000;color:#fff;" type="button" value="PREVIEW"" /></div>

  <blockquote>
 <pre>
  <code>
          VALUE: <b class="popup1" style="color:#fff;">#value </b>; 
  </code>
 </pre>
</blockquote>

Answer 1

$('.popup1').removeClass()

This line removes the class "popup1", so your selector can't find the element anymore on the second call.

Answer 2

The problem is this:

$('.popup1').removeClass()

This will remove all the classes from the b element and you won't be able to find the element next time.

Answer 3

Problem :

That happen because $('.popup1').removeClass() will remove the class popup1 also so the next time it couldn't find any element with class popup1.

Solution :

To avoid that you could use :

$('.popup1').removeClass().addClass('popup1 '+c).text(c);
//Or
$('.popup1').prop('class', 'popup1 '+popup1).text(c);

So every time you remove all the classes but add the main class popup1 so the script could select it in the next call.

Hope this helps.

$('#one').click(function(e) {
    console.log($('#thebox1').val());
    if($('#thebox1').val().length > 0) {
        var c = $('#thebox1').val();
        $('.popup1').removeClass().addClass('popup1 '+c).text(c);
    }
});

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}


body {
    background: hsl(184,65%,49%);
    margin: 0;
    font-family: 'Lato';
    text-align: center;
    color: #000;
 
}

input {
 width:100%;
 max-width:320px;
 background:#fff;
 color:#333;
    font-family: Lato;
    padding: 25px 15px 25px 0;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    border: 3px solid #333;
}

::-webkit-input-placeholder {
   color: #000;
   text-align:center;
}

.resizable-text {
  font-size:1vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="VALUE " id='thebox1'>

<div><input id="one" style="background:#000;color:#fff;" type="button" value="PREVIEW"" /></div>

  <blockquote>
 <pre>
  <code>
          VALUE: <b class="popup1" style="color:#fff;">#value </b>; 
  </code>
 </pre>
</blockquote>

Answer 4

Try this:

$('#one').click(function(e) {
    if($('#thebox1').val()) {
        $('.popup1').text($('#thebox1').val());
    }
});

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}


body {
    background: hsl(184,65%,49%);
    margin: 0;
    font-family: 'Lato';
    text-align: center;
    color: #000;
 
}

input {
 width:100%;
 max-width:320px;
 background:#fff;
 color:#333;
    font-family: Lato;
    padding: 25px 15px 25px 0;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    border: 3px solid #333;
}

::-webkit-input-placeholder {
   color: #000;
   text-align:center;
}

.resizable-text {
  font-size:1vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="VALUE " id='thebox1'>

<div><input id="one" style="background:#000;color:#fff;" type="button" value="PREVIEW"" /></div>

  <blockquote>
 <pre>
  <code>
          VALUE: <b class="popup1" style="color:#fff;">#value </b>; 
  </code>
 </pre>
</blockquote>