title: Create input of type button in JavaScript
body: <p>I have a wcf service that get values from database and return json object. I'm trying to create input buttons depend on returned values as :</p>
  
  <pre class="lang-js prettyprint-override"><code>$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "My Servic URL",
    processData: false,
    dataType: "json",
    success: function(response) {
      var foo = document.getElementById("hmengcont");
      foo.innerHTML = "";
      for (var i = 0; i &lt; eval(response.d).length; i++) {
        var element = document.createElement("input");
        //Assign different attributes to the element.
        element.type = "button";
        element.id = eval(response.d)[i].CityID;
        element.class = "show-page-loading-msg";
        element.style = "width: 100%;height: 50px; border-radius: 5px;-webkit-appearance: inherit;cursor: pointer; opacity: 5.1;z-index: 2;color: #131212;background: rgba(255, 255, 255, 0);";
        element.value = eval(response.d)[i].CityNameEng; // Really? You want the default value to be the type string?
        element.name = eval(response.d)[i].CityID;
        element.onclick = function() { // Note this is a function
          alert(element.value);
        }
        ");";
        foo.appendChild(element);
      }
    },
    error: function(a, b, c) {
      alert(a.responseText);
    }
  });
  </code></pre>
  
  <p>the buttons created successfully and all of them has his own correct values , but on click the alert return only the latest value.</p>