Need help in javascript array

Question

I am working on javascript based functionality for showing user emotion through smiley for 7 days. 1 Smiley for 1 day.

I did this for user 1 for day 1 by javascript if else. But this is not a good way for doing this task. Because here we have 7 days and as per enter value in text field it will show smiley.

Somehow I feel array will be good option. But I don't know how to achieve this task through by array.

What I am thinking first I have to call 7 smiley background in array, then match them as per user entered value. But the problem is for user2 and user3. I think I have to twice time duplicate user1 code for user2 and user3.

Anyone can suggest some good solution.

My working jsfiddle code

function checkvalue()
{
    var iuser1 = document.getElementById("user1").value;
    var iuser2 = document.getElementById("user2").value;
    var iuser3 = document.getElementById("user3").value;
    
    if ( iuser1 == 1 )
    {
        document.getElementById("c1day1").style.backgroundImage = "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/18_EmoticonsHDcom.png')";
    }                    
    else if ( iuser1 == 2 )
    {
        document.getElementById("c1day1").style.backgroundImage = "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/53_EmoticonsHDcom.png')";                    
    }
    else if ( iuser1 == 3 )
    {
        document.getElementById("c1day1").style.backgroundImage = "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/69_EmoticonsHDcom.png')";                    
    }
    else if ( iuser1 == 4 )
    {
        document.getElementById("c1day1").style.backgroundImage = "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/42_EmoticonsHDcom.png')";                    
    }
    else if ( iuser1 == 5 )
    {
        document.getElementById("c1day1").style.backgroundImage = "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/72_EmoticonsHDcom.png')";                    
    }
    else if ( iuser1 == 6 )
    {
        document.getElementById("c1day1").style.backgroundImage = "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/26_EmoticonsHDcom.png')";                    
    }
    else if ( iuser1 == 7 )
    {
        document.getElementById("c1day1").style.backgroundImage = "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/40_EmoticonsHDcom.png')";                    
    }
    
    
}

input[type="text"]{
    display:block;
    width:100%;
    margin-bottom:10px;
}
.icon-bg{
    width:64px;
    height:64px;
    display:block;
    background-position:center;
}

<h5> Check result by javascript code </h5>
<input type="text" name="in" id="user1" placeholder="Put value for user 1 between 1-7">
<input type="text" name="in" id="user2" placeholder="Put value for user 2 between 1-7">
<input type="text" name="in" id="user3" placeholder="Put value for user 3 between 1-7">
    
<input type="submit" id="check" value="Check" onclick="checkvalue()">
                
<hr>
                    
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
    <tr>
        <td> <strong> &nbsp; </strong> </td>
        <td> &nbsp;</td>
        <td> <strong> Day 1 </strong> </td>
        <td> <strong> Day 2 </strong> </td>
        <td> <strong> Day 3 </strong> </td>
        <td> <strong> Day 4 </strong> </td>
        <td> <strong> Day 5 </strong> </td>
        <td> <strong> Day 6 </strong> </td>
        <td> <strong> Day 7 </strong> </td>
    </tr>
                            
    <tr>
        <td> <strong> User 1 </strong> </td>
        <td>&nbsp;</td>
        <td> <div class="icon-bg" id="c1day1"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day2"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day3"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day4"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day5"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day6"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day7"> &nbsp; </div> </td>
        
    </tr>
                            
    <tr>
        <td> <strong> User 2 </strong> </td>
        <td>&nbsp;</td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/01_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/72_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/22_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/59_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/70_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/71_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/40_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        </tr>
                                                        
            <tr>
                <td> <strong> User 3 </strong> </td>
                <td>&nbsp;</td>
                <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/50_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/51_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/53_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/20_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/19_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/37_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/69_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
              </tr>
 </tbody>
</table>

Just for future coding. When using that much else if constructions, replace it with switch. Nicer more readable (cleaner) code. — Mouser
– Mouser, Commented Mar 10, 2015 at 19:33

Mouser · Accepted Answer · 2015-03-10 20:44:11Z

here's an updated version, indeed using an array for the images and a loop to go through the inputs:

I learned, back in the days, from a coworker that if you need to use the same piece of code twice, either put it in a function or if you can use a loop.

//create an array with the background images.
var imgArray =  ["url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/18_EmoticonsHDcom.png')", "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/53_EmoticonsHDcom.png')", "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/69_EmoticonsHDcom.png')", "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/42_EmoticonsHDcom.png')", "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/72_EmoticonsHDcom.png')", "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/26_EmoticonsHDcom.png')", "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/40_EmoticonsHDcom.png')"];                    


function checkvalue()
{
    var inputs = document.querySelectorAll("input[name='in']"); //select an HTML collection using document.querySelectorAll based on the element: input and the name having value "in"
  
  //loop the inputs:
  
  for (var i = 0; i < inputs.length; i++)
  {
      var value = inputs[i].value;
      if (!isNaN(value) && value > 0 && value < 8) //check if number and greater than 0, but smaller than 8
      {
         //subtract 1 from the number since JavaScript is zero based with indices.
         document.querySelectorAll(".icon-bg")[i].style.backgroundImage = imgArray[value-1];
      }
      else
      {
         //do something here to show error message
      }  
      
  
  }
    
   
    
    
}

input[type="text"]{
    display:block;
    width:100%;
    margin-bottom:10px;
}
.icon-bg{
    width:64px;
    height:64px;
    display:block;
    background-position:center;
}

<h5> Check result by javascript code </h5>
<input type="text" name="in" id="user1" placeholder="Put value for user 1 between 1-7">
<input type="text" name="in" id="user2" placeholder="Put value for user 2 between 1-7">
<input type="text" name="in" id="user3" placeholder="Put value for user 3 between 1-7">
<input type="text" name="in" id="user4" placeholder="Put value for user 3 between 1-7">
<input type="text" name="in" id="user5" placeholder="Put value for user 3 between 1-7">
<input type="text" name="in" id="user6" placeholder="Put value for user 3 between 1-7">
<input type="text" name="in" id="user7" placeholder="Put value for user 3 between 1-7">
    
<input type="submit" id="check" value="Check" onclick="checkvalue()">
                
<hr>
                    
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
    <tr>
        <td> <strong> &nbsp; </strong> </td>
        <td> &nbsp;</td>
        <td> <strong> Day 1 </strong> </td>
        <td> <strong> Day 2 </strong> </td>
        <td> <strong> Day 3 </strong> </td>
        <td> <strong> Day 4 </strong> </td>
        <td> <strong> Day 5 </strong> </td>
        <td> <strong> Day 6 </strong> </td>
        <td> <strong> Day 7 </strong> </td>
    </tr>
                            
    <tr>
        <td> <strong> User 1 </strong> </td>
        <td>&nbsp;</td>
        <td> <div class="icon-bg" id="c1day1"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day2"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day3"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day4"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day5"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day6"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day7"> &nbsp; </div> </td>
        
    </tr>
                            
    <tr>
        <td> <strong> User 2 </strong> </td>
        <td>&nbsp;</td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/01_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/72_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/22_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/59_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/70_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/71_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/40_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        </tr>
                                                        
            <tr>
                <td> <strong> User 3 </strong> </td>
                <td>&nbsp;</td>
                <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/50_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/51_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/53_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/20_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/19_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/37_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/69_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
              </tr>
 </tbody>
</table>

This code uses the following methods and properties:

isNaN(): check whether a variable is a number or not. If input is not a number return true else return false.
document.QuerySelectorAll selects a HTML collection based upon css-selectors.
- Used attribute selection here: input[name='in']
- Used class selection here: .icon-bg

Mouser thanks for sharing good knowledge on document.QuerySelectorAll
Mouser, here I am sharing what I want, please see jsfiddle url only for idea understanding purpose:- jsfiddle.net/animatorstar/90jbh828
@Sandy, I get it, so my solution should fit in nicely there?
Actually we fixed only 1 smiley for 1 day (Sorry I didn't explain correctly in my question) - For example user have to enter value between 1-7 for day 1 and based of user input value it will show result for day1 from 7 smiley options. Also I am thinking I have to create 7 input text field for user 1, so he can select any choice for all 7 days. What you can suggest?
Yes, in my example there are three inputs for three days. You can expand that to seven. Full solution there.

Collectives™ on Stack Overflow

Need help in javascript array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related