title: change color of a text in html using javascript
body: <p>I'm working on changing the color of some text using a separate <code>.js</code> file. I am a newbie at HTML and JavaScript, please be detailed. Thank you.</p>
  
  <p>This is what I got so far:</p>
  
  <p><strong>htmlfile.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;body&gt;
      &lt;p id="demo"&gt; Click the button to change the text in this paragraph. &lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>jsfile.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>    var button = document.createElement("button")
      button.innerHTML = "Red or green"
      // Sets or returns the content of an element
  
      // 2. Append somewhere
      var body = document.getElementsByTagName("body")[0]
      body.appendChild(button)
      // Adds a new child node, to an element, as the last child node
  
      // 3. Add event handler
      button.addEventListener("click", function () {
          state = !state
          // Attaches an event handler to the specified element
  
          //var led = document.createElement('LED')
          if (state = 1) {
              document.getElementById("demo").style.color = "red"
          } else {
              document.getElementById("demo").style.color = "green"
          }
          //body.appendChild(led)
      })
  }
  </code></pre>