title: Changing text with javascript
body: <p>I am trying to write a simple script.</p>
  
  <p>Here is the idea:</p>
  
  <p>I have a div element and dynamically created paragraph element inside div. Paragraph element contains some text. I also have a link on the page. I want the text changed to other text (predefined) when clicking the link. I have 2 functions: one function for creating paragraph element and appending it to div. Second function is for changing the text. I believe the issue has something to do with passing the variables from one function to another</p>
  
  <p>Here is HTML:</p>
  
  <pre><code>&lt;a href='' onclick='changeText();return false;'&gt;Change Text&lt;/a&gt;
  
      &lt;div id='box'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And here is JS code:</p>
  
  <pre><code>var x = document.getElementById('box');
  
          window.onload = function createEl(){
  
              var p = document.getElementsByTagName('div')[0];
              var el = document.createElement('p');
  
                  var text = "Hello";
                  p.appendChild(el);
                  var res = document.createTextNode(text);
                  el.appendChild(res);
  }
  
  
  function changeText(){
  
      text.innerHTML = 'other text';
  
  
  }
  </code></pre>