Get value of object from array and match it to an id value

Based on the id of the link clicked the div's height and width has to change based on the respective value mentioned in the array

The id value of the clicked link is getting displayed properly but the dimension of the box is not correct.

Is the If statement wrong or the way dimension is written is wrong

function myFunction(values) {
  
    
  var x = document.getElementById(values).id
  document.getElementById("result").innerHTML = x;

 var arr = [
  { id: 1, width: '300px', height: '400px'}, 
  { id: 2, width: '500px', height: '500px'}, 
  { id: 3, width: '100px', height: '100px'}];
  
  for (var i = 0; i<arr.length; i++){
      document.getElementById("results").innerHTML = i;
    if(x==arr[i].id)
      {
    
    document.getElementById("box").style.height = arr[i].height;
    document.getElementById("box").style.width = arr[i].width;
  }
 else{
       document.getElementById("box").innerHTML = "Error in entry";
     } 
  }
  
}

<a href="#" id="1" onclick="myFunction('1')">July 3, 2013</a>
<a href="#" id="2" onclick="myFunction('2')">July 10, 2013</a>
<a href="#" id="3" onclick="myFunction('3')">July 17, 2013</a>

<div id="result">
</div>
<div id="results">
</div>
<div id="box" style="border:solid 1px red;">
</div>