Reload DIV from javascript

Question

I'm not an experience programmer in JavaScript and I'm struggling with reloading data in a specified DIV.

I have an example here. The original code is more complex I contains a calendar with disabled days. After the update new disabled days are calculated and should be listed in the calendar. However this example shows the issue. When clicking the button the text "Updated text" should appear instead of "Original text".

Any suggestions?

var bla = "Original text";

function js_updtest() {
  bla = "Updated text";
  $("#test").load(" #test");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="inlay">
  <div id="middle">
    <div id='test'>
      <script type="text/javascript">
        document.write(bla)
      </script>
    </div>
    <input type='button' value='Update' name='Updatetext' onclick='js_updtest();'>
  </div>
</div>

Firstly, [don't use document.write](https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice). Then, you have a scoping issue. You can't access a variable from one script in another unless you make it global. — isherwood, Jun 22 '21 at 13:30

David · Answer 1 · 2021-06-22T13:41:31.253

There are a couple of fundamental problems here, and your best bet is probably to start over on some introductory JavaScript tutorials. But specifically the two problems are:

Here you set a new value to a variable:
```
bla = "Updated text";
```
But you don't re-use that variable anywhere. It was used once, with its initial value, when the page loaded. Updating the value of a variable doesn't update all of the places where it has already been used.

After updating it, use it. For example:
```
document.getElementById('test').innerText = bla;
```
(Note that this would also be a better way to initially use the variable on page load. document.write() is pretty much universally frowned upon. Don't think of it in terms of writing to the document, think of it in terms of identifying the DOM element to update and updating it.)
What are you even trying to do here?:
```
$("#test").load(" #test");
```
The jQuery .load() function is for making an AJAX request to fetch new content from the server and directly write it to a target element. But that doesn't appear to be what you want to do here at all. It looks like this statement (and jQuery in general) can just be removed.

Reload DIV from javascript

1 Answers1