How to show a specific DIV based on variable in Javascript

Question

I have a page that loads the following Javascript object fields :

var fields = {"age":"on","email":"useremail@gmail.com","firstname":"John","lastname":"Smith","officialrules":"on","question":"a"}; 

As you can see, the last property contains the variable question and the value a .

In the HTML I have three divs, each containing a style of display:none.

    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>

Using Javascript, I would like to show the div based on the value in the question . So for example, if the value = a, I want the display of div1 to change to block. If the value = b, I want the display of div2 to change to block, and if the value = c, I want the display of div 3 to change to block.

I am very new to Javascript, so not sure what is the best way to approach this. That being said, when I play around in the browser console, I'm able to achieve this effect using the following line:

if (fields.question == 'a') {document.getElementById('div1').style.display='block';}

How can I write a script that will show a specific div based on the variable in my Javascript? I am assuming I'll have to use an if... then... else OR switch type of statement. Do I need to first declare three variables and get the Element By Id for the 3 divs? My first line of thinking is something like this... but I'm clearly stuck:

<script type="text/javascript">

    var a = document.getElementById('div1');
    var b = document.getElementById('div2');
    var c = document.getElementById('div3');

        if (fields.question == 'a') {document.getElementById('div1').style.display='block';} 
        if (fields.question == 'b') {document.getElementById('div2').style.display='block';} 
        if (fields.question == 'c') {document.getElementById('div3').style.display='block';} 

</script>

I apologize if this is a super simple question! Trying to learn by example. Would appreciate insight on how to achieve this. Thanks so much!!

Answer 1

I would store your div ID's in an object that has the key set to the property of fields.question

var lookup = {a:"upgrade1", b:"upgrade2", ...} //and so on
document.getElementById(lookup[fields.question]).style.display = "block";

Answer 2

One way you can do it is using an object

var upgrades = {
    a : document.getElementById('upgrade1'),
    b : document.getElementById('upgrade2'),
    c : document.getElementById('upgrade3')
}

then when you want to access it to change the style

upgrades[fields.question].style.display='block'

Answer 3

As your question shows your div elements to have their id property with the prefix of 'div', the following code will work with that code (though in practice you may wish to change the 'div' id -prefix to 'upgrade'):

function showQuestion (details, prefix) {
    // which question:
    var q = details.question.toLowerCase(),
        // find the integer:
        n = (q.charCodeAt(0) - 97) + 1;
    // get the element, and set its display to 'block':
    document.getElementById(prefix + n).style.display = 'block';
}

var fields = {
    "age": "on",
    "email": "useremail@gmail.com",
    "firstname": "John",
    "lastname": "Smith",
    "officialrules": "on",
    "question": "a"
};

// call the function, passing in the relevant object, and the 'id'-prefix
showQuestion(fields, 'div');

JS Fiddle demo .

To explain the line:

n = (q.charCodeAt(0) - 97) + 1;

This takes the character (in this case the a ), finds the unicode character point (an a is 97, b is 98, etc), and subtracts 97 from that character point which gives the 'difference' between the character used and a . Because you've numbered your div elements' id properties with a one-based numbering scheme, we're adding 1 to that difference.

References:

• String.charCodeAt() .
• String.toLowerCase() .