I'm using this switch statement to load different images and text on a 404 page and it is working perfectly but I was just wondering if there was a better way to write this? Shorthand it?

<script>
 var funFacts = Math.floor(Math.random() * 7) + 1;
switch (funFacts) {
    case 1:
        document.getElementById("funFactText").innerHTML = "In Florida, it is against the law to put livestock in a school bus.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff1.jpg")";
        break;

    case 2:
        document.getElementById("funFactText").innerHTML = "In Texas, it's against the law for anyone to have a pair of pliers in his or her possession.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff2.jpg")";
        break;

    case 3:
        document.getElementById("funFactText").innerHTML = "In Alaska, it is illegal to look at a moose from the window of an aircraft or another flying vehicle. It is also illegal to push a live moose out of a moving aircraft.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff3.jpg")";
        break;

    case 4:
        document.getElementById("funFactText").innerHTML = "In Ohio, women are prohibited from wearing patent leather shoes in public.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff4.jpg")";
        break;

    case 5:
        document.getElementById("funFactText").innerHTML = "By law, everybody in Vermont must take at least one bath a week.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff5.jpg")";
        break;

    case 6:
        document.getElementById("funFactText").innerHTML = "In Illinois, the law is that a car must be driven with the steering wheel.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff6.jpg")";
        break;

    case 7:
        document.getElementById("funFactText").innerHTML = "California law prohibits a woman from driving a car while dressed in a housecoat.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff7.jpg")";
        break;
}
</script>

I'm using this switch statement to load different images and text on a 404 page and it is working perfectly but I was just wondering if there was a better way to write this? Shorthand it?

<script>
 var funFacts = Math.floor(Math.random() * 7) + 1;
switch (funFacts) {
    case 1:
        document.getElementById("funFactText").innerHTML = "In Florida, it is against the law to put livestock in a school bus.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff1.jpg")";
        break;

    case 2:
        document.getElementById("funFactText").innerHTML = "In Texas, it's against the law for anyone to have a pair of pliers in his or her possession.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff2.jpg")";
        break;

    case 3:
        document.getElementById("funFactText").innerHTML = "In Alaska, it is illegal to look at a moose from the window of an aircraft or another flying vehicle. It is also illegal to push a live moose out of a moving aircraft.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff3.jpg")";
        break;

    case 4:
        document.getElementById("funFactText").innerHTML = "In Ohio, women are prohibited from wearing patent leather shoes in public.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff4.jpg")";
        break;

    case 5:
        document.getElementById("funFactText").innerHTML = "By law, everybody in Vermont must take at least one bath a week.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff5.jpg")";
        break;

    case 6:
        document.getElementById("funFactText").innerHTML = "In Illinois, the law is that a car must be driven with the steering wheel.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff6.jpg")";
        break;

    case 7:
        document.getElementById("funFactText").innerHTML = "California law prohibits a woman from driving a car while dressed in a housecoat.";
        document.getElementById("funFactImg").src = "@Url.Content("~/themes/PG/Content/Images/ff7.jpg")";
        break;
}
</script>

• javascript
• switch-statement

• 7 This question belongs on CodeReview if it doesn’t generate a duplicate. – Sebastian Simon Commented Jul 9, 2015 at 20:36
• @Xufox There are very few questions that get marked as duplicate on CR. – Simon Forsberg Commented Jul 9, 2015 at 20:43
• @Xufox this question has a good answer, no benefit in moving it. But you are right questions of this type belong to Code-Review – Caridorc Commented Jul 9, 2015 at 20:50

5 Answers 5

Yeah, use an array for facts, and some simple string concatenation:

var funFacts = [
  "In Florida, it is against the law to put livestock in a school bus.",
  "In Texas, it's against the law for anyone to have a pair of pliers in his or her possession.",
  "In Alaska, it is illegal to look at a moose from the window of an aircraft or another flying vehicle. It is also illegal to push a live moose out of a moving aircraft.",
  "In Ohio, women are prohibited from wearing patent leather shoes in public.",
  "By law, everybody in Vermont must take at least one bath a week.",
  "In Illinois, the law is that a car must be driven with the steering wheel.",
  "California law prohibits a woman from driving a car while dressed in a housecoat."
];
var funFact = Math.floor(Math.random() * 7);
document.getElementById("funFactText").innerHTML = funFacts[funFact];
var baseSrc = "@Url.Content("~/themes/PG/Content/Images/ff")";
document.getElementById("funFactImg").src = baseSrc + (funFact + 1) + '.jpg';

May look cleaner to put into an array, and pull out of the array.

var funFacts = [
{
    text: "In Florida, it is against the law to put livestock in a school bus.",
    image: "~/themes/PG/Content/Images/ff1.jpg"
},
{
    text: "In Texas, it's against the law for anyone to have a pair of pliers in his or her possession.",
    image: "~/themes/PG/Content/Images/ff2.jpg"
},
...
];
var factIndex = Math.floor(Math.random() * funFacts.length); // can be bined with line below
var fact = funFacts[factIndex];
document.getElementById("funFactText").innerHTML = fact.text;
document.getElementById("funFactImg").src = "@Url.Content(\"" + fact.image + "\")";

Make an array of objects that look like this:

{ text: "some fact...", url: "some url" }

Lets call this array facts.

Then:

var randomFact = facts[Math.floor(Math.random() * 7) + 1];

document.getElementById("funFactText").innerHTML = randomFact.text;
document.getElementById("funFactImg").src =randomFact.url;

You could do away with the switch entirely, store the data in an array, and assign the values based on a selected index:

var textElement = document.getElementById("funFactText");
var imgElement = document.getElementById("funFactImg");

var funFacts = Math.floor(Math.random() * 7);
var entries = [ 
    {
        text: "In Florida, it is against the law to put livestock in a school bus.",
        image: "@Url.Content("~/themes/PG/Content/Images/ff1.jpg")"
    },
    {
        text: "In Texas, it's against the law for anyone to have a pair of pliers in his or her possession.",
        image: "@Url.Content("~/themes/PG/Content/Images/ff2.jpg")"
    },
    {
        text: "In Alaska, it is illegal to look at a moose from the window of an aircraft or another flying vehicle. It is also illegal to push a live moose out of a moving aircraft.",
        image: "@Url.Content("~/themes/PG/Content/Images/ff3.jpg")"
    },
    {
        text: "In Ohio, women are prohibited from wearing patent leather shoes in public.",
        image: "@Url.Content('~/themes/PG/Content/Images/ff4.jpg')"
    },
    {
        text: "By law, everybody in Vermont must take at least one bath a week.",
        image: "@Url.Content("~/themes/PG/Content/Images/ff5.jpg")"
    },
    {
        text: "In Illinois, the law is that a car must be driven with the steering wheel.",
        image: "@Url.Content('~/themes/PG/Content/Images/ff6.jpg')"
    },
    {
        text: "California law prohibits a woman from driving a car while dressed in a housecoat.",
        image: "@Url.Content("~/themes/PG/Content/Images/ff7.jpg")"
    }
];

textElement.innerHTML = entries[funFacts - 1].text;
imgElement.src = entries[funFacts - 1].image;

</script>

just watch out for repeating code and try to press them into the the workflow, and check, what variables changing regarding your switch statement..I wouldn't say it's shorthand,but less code.

<script>
     var funFacts = Math.floor(Math.random() * 7) + 1;
     MyFunction(funFacts);

    function MyFunction(fun)
    {
       var text="";
       var link="";
        switch (fun) {
        case 1:
            text = "In Florida, it is against the law to put livestock in a school bus.";
           link = "~/themes/PG/Content/Images/ff1.jpg";
            break;
        case 2:
            text = "In Texas, it's against the law for anyone to have a pair of pliers in his or her possession.";
            link = "~/themes/PG/Content/Images/ff2.jpg";
            break;
        case 3:
            text = "In Alaska, it is illegal to look at a moose from the window of an aircraft or another flying vehicle. It is also illegal to push a live moose out of a moving aircraft.";
            link = "~/themes/PG/Content/Images/ff3.jpg";
            break;
        case 4:
            text = "In Ohio, women are prohibited from wearing patent leather shoes in public.";
            link = "~/themes/PG/Content/Images/ff4.jpg";
            break;
        case 5:
            text = "By law, everybody in Vermont must take at least one bath a week.";
            link = "~/themes/PG/Content/Images/ff5.jpg";
            break;
        case 6:
            text = "In Illinois, the law is that a car must be driven with the steering wheel.";
            link = "~/themes/PG/Content/Images/ff6.jpg";
            break;
        case 7:
            text = "California law prohibits a woman from driving a car while dressed in a housecoat.";
            link = "~/themes/PG/Content/Images/ff7.jpg";
            break;
        }
        document.getElementById("funFactText").innerHTML = text;
        document.getElementById("funFactImg").src = "@Url.Content(link);
    }
    </script>