CODEWITHSUNDEEP
javascripthtmljquerycssvar
Milly
Milly

Reputation: 43

Add automatic refresh to a div with JS

The div works perfectly, but adding a new value to it results in NaN. But when updating the page, the div shows the updated value.

Would there be any way to add an automatic refresh to this div?

$(function () {

         $(".but").on("click",function(e) {

          e.preventDefault();
          $(".content").hide();
          $("#"+this.id+"div").show();

        });

    });
.content { display:none };
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="but" type="button" id="Id">Load</button>


<div id="Iddiv" class="content">

  <h2>content div</h2>
  
</div>

Upvotes: 2

Views: 59

Answers (2)

Sagive
Sagive

Reputation: 1827

Given that hadent supplied where the new data comes from. Here are 2 examples.

Example one:

<button class="btn1" type="button" id="Id" data-newtxt="Example Text">Load</button>

<div id="section1">
    <h2>content div</h2>
    <span class="new-data"></span>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
jQuery(document).ready(function($) {
    $('.btn1').click(function() {
        $('.section1 .new-data').text( $(this).data('newtxt') );
    })
});
</script>

Example two:

<button class="btn2" type="button" id="Id" data-newtxt="Example Text">Load</button>
<div class="hidden-div">Some example content</div>

<div id="section2">
    <h2>content div</h2>
    <span class="new-data"></span>
</div>


<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
jQuery(document).ready(function($) {
    $('.btn2').click(function() {
        $('.section2 .new-data').text( $('.hidden-div').text() );
    })
});
</script>

Upvotes: 1

DCR
DCR

Reputation: 15665

$(function () {

         $(".but").on("click",function(e) {
         
        
         
         if ($("h2")[0].innerHTML=='content div'){
            $("h2")[0].innerHTML="";
         }else {
         
            $("h2")[0].innerHTML='content div';
         }
          
          
          
          
        });

    });
.content { display:block };
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="but" type="button" id="Id">Load</button>


<div id="Iddiv" class="content">

  <h2></h2>
  
</div>

Upvotes: 1

Related Questions