innerHTML - how to assign value and display to div id in javascript

Question

I'd created checkDay function for get value of input type text field and check value with if/else condition and give desire out through innerHTML to the target div #id.

Problem is I want to avoid all time to write "document.getElementById("showDay").innerHTML ". Is there a way to write simple code, which will perform same result?

working code - http://jsfiddle.net/animatorstar/5chokg76/4/

function checkDay()
{
    
    var a = document.getElementById("enterNumber").value;  
    
    if (a==0)  //condition
    {
        alert("value of a is "+a);  //statements
        document.getElementById("showDay").innerHTML = "Enter value between 1-7";
    }
    
    if (a==1)  //condition
    {
        alert("value of a is "+a);  //statements
        document.getElementById("showDay").innerHTML = "Entered value is " + a + ", " + "Day is Monday";
    }
    
    else if (a==2)  //condition
    {
        alert("value of a is "+a);  //statements
        document.getElementById("showDay").innerHTML = "Entered value is " + a + ", " + "Day is Tuesday";
    }
    
    else if (a==3)  //condition
    {
        alert("value of a is "+a);  //statements
        document.getElementById("showDay").innerHTML = "Entered value is " + a + ", " + "Day is Wendesday";
    }
    
    else if (a==4)  //condition
    {
        alert("value of a is "+a);  //statements
        document.getElementById("showDay").innerHTML = "Entered value is " + a + ", " + "Day is Thursday";
    }
    
    else if (a==5)  //condition
    {
        alert("value of a is "+a);  //statements
        document.getElementById("showDay").innerHTML = "Entered value is " + a + ", " + "Day is Friday";
    }
    
    else if (a==6)  //condition
    {
        alert("value of a is "+a);  //statements
        document.getElementById("showDay").innerHTML = "Entered value is " + a + ", " + "Day is Saturday";
    }
    
    else if (a==7)  //condition
    {
        alert("value of a is "+a);  //statements
        document.getElementById("showDay").innerHTML = "Entered value is " + a + ", " + "Day is Sunday";
    }
    
    else
    {
        alert("Wrong value - Enter value between 1-7");  //statements
    }
    
}

<input type="text" id="enterNumber" name="" placeholder="Enter number for check value" />

<button onClick="checkDay();"> Check Value </button>

<br>
<div id="showDay"> </div>

Simon H · Accepted Answer · 2014-11-16 19:23:21Z

3

Use something like this

function checkDay()
{
    var a = document.getElementById("enterNumber").value;  

    var days = ["Mon", "Tue", "Wed","Thur", "Fri","Sat","Sun"];
    if (a > 0 and a < 8) {
        document.getElementById("showDay").innerHTML = 
           "Entered value is " + a + ", " + "Day is "+ days[a-1];
    } else
    {
        alert("Wrong value - Enter value between 1-7");  //statements
    }
}

edited Nov 16, 2014 at 19:23

answered Nov 16, 2014 at 19:17

Simon H

21.2k14 gold badges84 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Paul Roub Over a year ago

You'll want some parentheses around that condition, and there's no then in Javascript.

Simon H Over a year ago

Cheers - been doing Haskell today!

Sandy Over a year ago

Thanks Simon, for your simple way. Here I have implemented your code - jsfiddle.net/animatorstar/mzsmkuxk/1 can you please check I have implemented correctly or not. Also want to understand days[a-1]. Will you please brief me little bit more. I know array address start with 0. Sorry for my this question I am new for javascript.

David Thomas · Accepted Answer · 2014-11-16 19:22:44Z

My own take on this would be to use two simple functions; the first to reduce the typing of document.getElementById() repeatedly, though this advantage was obviated by the omission of multiple if tests. The second simply returns a day from the array, using index-1 syntax, since you were using 1-7 and JavaScript uses zero-based indexes:

function gid(id) {
  return document.getElementById(id);
}

function dayFromInt(n) {
  return ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'][n - 1];
}

function checkDay() {

  var a = document.getElementById("enterNumber").value;
  if (a > 0 && a < 8) {
    gid('showDay').textContent = 'Entered value is: ' + a + '; Day is: ' + dayFromInt(a);
  } else {
    gid('showDay').textContent = 'Pick a day, by number, from 1-7';
  }

}

<input type="text" id="enterNumber" name="" placeholder="Enter number for check value" />

<button onClick="checkDay();">Check Value</button>

<br>
<div id="showDay"></div>

Gowtham Raj J · Accepted Answer · 2014-11-16 19:32:46Z

0

You could use an array to store the days.

var days = new Array("mon","tue","wed","thur","fri","sat","sn");

And then, simply use,

if(a>=1 && a<=7)
    document.getElementById("showDay").innerHTML = "Entered value is " + a + ", " + "Day is "+ days[a-1];
else
    alert("Wrong value - Enter value between 1-7");

edited Nov 16, 2014 at 19:32

answered Nov 16, 2014 at 19:20

Gowtham Raj J

96710 silver badges26 bronze badges

2 Comments

Simon H Over a year ago

Note that in the question "0" was not an accepted answer

Gowtham Raj J Over a year ago

Yes, I was just giving him an idea on how to use an array, so that he would be able to modify his code on his own. Now i have edited the code.

Collectives™ on Stack Overflow

innerHTML - how to assign value and display to div id in javascript

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related