配列からオブジェクトの値を取得し、リンクのIDに基づいて

Question

はdiv要素の高さと幅をクリックしたid値にそれを一致させることは、アレイに言及したそれぞれの値に基づいて変更することがあり

の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回実行されます。
これでエラーメッセージが表示されます。

エラーメッセージを表示する場合は、flagを使用し、見つかった場合はループを解除してください。

次に、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>

Answer 2

私が見るように、私はあなたが達成しようとしていると思います正常に動作しますが、この

で間違っています

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' 
 
    } 
 
    ]; 
 

 
    var item = arr.find(function(i) { 
 
    return i.id == x; 
 
    }); 
 
    if (item) { 
 
    document.getElementById("box").style.height = item.height; 
 
    document.getElementById("box").style.width = item.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 3

私は、あなたが探していたものであると思いますか？

他が除去され、私はあなたが起こるために何を期待している

var arr = [{ 
 
    id: 1, 
 
    width: '300px', 
 
    height: '400px' 
 
    }, 
 
    { 
 
    id: 2, 
 
    width: '500px', 
 
    height: '500px' 
 
    }, 
 
    { 
 
    id: 3, 
 
    width: '100px', 
 
    height: '100px' 
 
    } 
 
]; 
 

 

 
function myFunction(x) { 
 
    document.getElementById("result").innerHTML = x; 
 
    var found = false, box = document.getElementById("box"); 
 
    for (var i = 0; i < arr.length; i++) { 
 
    if (x == arr[i].id) { 
 
     document.getElementById("results").innerHTML = i; 
 
     found = true; 
 
     box.style.height = arr[i].height; 
 
     box.style.width = arr[i].width; 
 
     // break; // if you only want to look for one 
 
    } 
 
    } 
 
    if (!found) { 
 
    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> 
 
<hr/> 
 
<div id="result"> 
 
</div> 
 
<div id="results"> 
 
</div> 
 
<div id="box" style="border:solid 1px red;"></div>