title: JavaScript Element.value vs Element.getAttribute("value")
body: <p>I've started learning JavaScript recently but there's something that I'm confused with :</p>
  
  <p><strong>what is the different between</strong> <code>Element.value</code> <strong>and</strong> <code>Element.getAttribute("value")</code> <strong>?</strong></p>
  
  <p>actually my problem is , when I try to copy the value of an <code>input</code> element with type of <code>text</code> to another one , if I use the first method (<code>Element.value</code>) It works fine but if I go with the second method It copies the first value given to the element and It never gets updated when I change the text inside the <code>textbox</code> , this behavior seems odd to me ! can you guys please explain what's going on here ?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Hello JavaScript&lt;/title&gt;
      &lt;script src="script2.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input id="Text1" type="text" /&gt;
      &lt;input id="Button1" type="button" value="button" /&gt;
      &lt;input id="Text2" type="text" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The JavaScript file :</p>
  
  <pre><code>var myButton;
  
  window.onload = function () {
  
      myButton = document.getElementById("Button1");
      myButton.onclick = function () {
          var val = document.getElementById("Text1").getAttribute("value");  
          //var val = document.getElementById("Text1").value;
          document.getElementById("Text2").setAttribute("value", val);
      };
  
  };
  </code></pre>