CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jasmine
Jasmine

Reputation: 117

Javascript doesn't change appended content

So guys I've created some buttons that have to show different messages on click but after I click on one button also the others show the same message as it. I'd also need some tips on how to make this section of my website responsive. Here is how the section looks like on the site: enter image description here

And here's the code: https://jsfiddle.net/eLu2n6pj/1/

var counter = 0;

$("#tasto1").click(function() {
  $("#blocco").animate({
    'opacity': '1'
  }, 500);

  if (counter <= 0) {
    $(".testo").append('<b name="grassetto">Test 1');
    counter++;
  }
});

$(function() {
  $('#tasto1').blur(function() {
    $('#blocco').animate({
      'opacity': '0'
    }, 500);
  });
});

$("#tasto2").click(function() {
  $("#blocco").animate({
    'opacity': '1'
  }, 500);
  if (counter <= 0) {

    $(".testo").append('Test 2');
    counter++;
  }
});

$(function() {
  $('#tasto2').blur(function() {
    $('#blocco').animate({
      'opacity': '0'
    }, 500);
  });
});

$("#tasto3").click(function() {
  $("#blocco").animate({
    'opacity': '1'
  }, 500);
  if (counter <= 0) {

    $(".testo").append('Test 3');
    counter++;
  }
});
P {
  color: black;
}

#blocco {
  position: relative;
  top: 35px;
  border: 2px solid #555;
  padding: 20px;
  border-radius: 10px;
  opacity: 0;
}

button[type="button"] {
  margin-bottom: 4px;
  width: 270px;
}

ul {
  list-style-type: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<section class="feature-area relative pt-100 pb-20" name="infobox">
  <div class="overlay overlay-bg"></div>
  <div class="container">
    <div class="row align-items-center justify-content-center">
      <div class="col-lg-4 col-md-6" name="asppi">
        <div class="single-feature" name="testo">
          <ul>
            <li>
              <button id="tasto1" type="button" class="btn btn-secondary" data-placement="right">
              Button 1
              </button>
            </li>
            <li>
              <button id="tasto2" type="button" class="btn btn-secondary" data-placement="right">
              Button 2
              </button>
            </li>
            <li>
              <button id="tasto3" type="button" class="btn btn-secondary" data-placement="right">
              Button 3
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div id="blocco" class="single-feature">
          <p class="testo"></p>
        </div>
      </div>
    </div>
  </div>
</section>

Thanks for the help.

Upvotes: 1

Views: 85

Answers (4)

Asons
Asons

Reputation: 87191

To properly fade in/out the text, you need to do something like this, where you change the text while the opacity is 0, or else it will flicker

With animation you can do that by insert a function, like this, and nest them, instead of using the blur

.animate({
'opacity': '0'}, 500, function() {
  $(".testo").html('<b name="grassetto">Test 1');
})
.animate({
'opacity': '1'}, 500);

In below sample I used .html() instead, to assign the new text.

I also temporarily removed the if (counter <= 0) {...} statement, as it is unclear what it is intended to accomplish

Stack snippet

var counter = 0;

$("#tasto1").click(function() {
  $("#blocco")
    .animate({
    'opacity': '0'}, 500, function() {
      $(".testo").html('<b name="grassetto">Test 1');
    })
    .animate({
    'opacity': '1'}, 500);
  counter++;
});

$("#tasto2").click(function() {
  $("#blocco")
    .animate({
    'opacity': '0'}, 500, function() {
      $(".testo").html('<b name="grassetto">Test 2');
    })
    .animate({
    'opacity': '1'}, 500);
  counter++;
});

$("#tasto3").click(function() {
  $("#blocco")
    .animate({
    'opacity': '0'}, 500, function() {
      $(".testo").html('<b name="grassetto">Test 3');
    })
    .animate({
    'opacity': '1'}, 500);
  counter++;
});
P {
  color: black;
}

#blocco {
  position: relative;
  top: 35px;
  border: 2px solid #555;
  padding: 20px;
  border-radius: 10px;
  opacity: 0;
}

button[type="button"] {
  margin-bottom: 4px;
  width: 270px;
}

ul {
  list-style-type: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<section class="feature-area relative pt-100 pb-20" name="infobox">
  <div class="overlay overlay-bg"></div>
  <div class="container">
    <div class="row align-items-center justify-content-center">
      <div class="col-lg-4 col-md-6" name="asppi">
        <div class="single-feature" name="testo">
          <ul>
            <li><button id="tasto1" type="button" class="btn btn-secondary" data-placement="right">
                                    Button 1
                                    </button></li>
            <li><button id="tasto2" type="button" class="btn btn-secondary" data-placement="right">
                                   Button 2
                                    </button></li>
            <li><button id="tasto3" type="button" class="btn btn-secondary" data-placement="right">
                                    Button 3
                                    </button></li>
          </ul>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div id="blocco" class="single-feature">
          <p class="testo"></p>
        </div>
      </div>
    </div>
  </div>
</section>

Upvotes: 1

Zohaib A. Butt
Zohaib A. Butt

Reputation: 156

From a conceptual level, in the case when you have to replace the inner HTML inside an HTML Element, you use .html(). In the case when you have to append to the end of the existing HTML Element, you use .append().

Usage of append is incorrect in your use case, as you are replacing the contents of the element to which the class testo has been assigned after the button is clicked.

If you replace .append() with .html(), your code should work fine.

Upvotes: 1

ssamuel
ssamuel

Reputation: 287

Change your javascript to this

 $("#tasto1").click(function() {
   $("#blocco").animate({
    'opacity': '1'
   }, 500);

    $(".testo").html('<b name="grassetto">Test 1');

});

$(function() {
   $('#tasto1').blur(function() {
     $('#blocco').animate({
       'opacity': '0'
      }, 500);
    });
 });

 $("#tasto2").click(function() {
    $("#blocco").animate({
    'opacity': '1'
    }, 500);

     $(".testo").html('Test 2');

   });

$(function() {
  $('#tasto2').blur(function() {
    $('#blocco').animate({
      'opacity': '0'
    }, 500);
  });
});

$("#tasto3").click(function() {
  $("#blocco").animate({
    'opacity': '1'
  }, 500);

    $(".testo").html('Test 3');

 });

Upvotes: 1

Fredrik Widerberg
Fredrik Widerberg

Reputation: 3108

Instead of appending, change the content of .testo like this

$(".testo").html('<b name="grassetto">Test 1');

Also, the reason it only works on the first try is this if-condition

if (counter <= 0) {

    //
}

Get rid of that and it works fine

Upvotes: 1

Related Questions