CODEWITHSUNDEEP
javascriptarraysif-statement
Deepika Rao
Deepika Rao

Reputation: 155

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>

Upvotes: 0

Views: 153

Answers (3)

mplungjan
mplungjan

Reputation: 177685

I think the is what you were looking for?

The else is removed and I use a flag instead

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>

Upvotes: 1

Sagar V
Sagar V

Reputation: 12478

if any id matched, else will run 2 times.

otherwise, it will run 3 times.
So the error message will be there anyway.

So, if you want to show the error message, use a flag and if id found, break the loop;

Then the i value hold the index matched.

Try this code.

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>

Upvotes: 2

Vikramaditya
Vikramaditya

Reputation: 5574

I works fine as i see, i think you are trying to achieve is this

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>

Upvotes: -1

Related Questions