javascript - 从数组中获取对象的值并将其与 id 值匹配

Question

根据单击的链接的 ID，div 的高度和宽度必须根据数组中提到的相应值进行更改

点击链接的 id 值显示正确，但框的尺寸不正确。

是If语句错误还是维度写法错误

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>

Answer 1

如果有任何id匹配，否则将运行2次。

否则会运行3次。
所以错误消息无论如何都会存在。

因此，如果您想显示错误消息，请使用标志，如果找到 id，则中断循环；

然后 i 值保存匹配的索引。

试试这个代码。

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){
        flag=1;
        break;
    }
  }  
  if(flag==1){
    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>