CODEWITHSUNDEEP
javascript
Sandy
Sandy

Reputation: 321

Need help in javascript array

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>

Upvotes: 0

Views: 52

Answers (1)

Mouser
Mouser

Reputation: 13304

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

Upvotes: 1

Related Questions