How to convert PHP simple if statement to Javascript?

Question

I would like to set a random field like in PHP e.g. 1-3 and do the code for each state, however I do not know ho to do the same using javasccript. Is it possible, how to do such thing? Thanks in advance.

            <?php $random = rand(1,3); ?>

            <?php if ($random == 1) : ?> 
                <div id="myContent">
                </div>
            <?php endif; ?>

            <?php if ($random == 2) : ?> 
                <div id="myContent2">
                </div>
            <?php endif; ?>

            <?php if ($random == 3) : ?> 
                <div id="myContent3">
                </div>
            <?php endif; ?>

Bluewind · Accepted Answer · 2011-09-19 19:32:13Z

1

// generate a random number between 1 and 3 (inclusive)
var rand=Math.floor(Math.random()*3)+1

if (rand==1) {
  document.write("first content");
}

if (rand==2) {
  document.write("second content");
}

if (rand==3) {
  document.write("third content");
}

answered Sep 19, 2011 at 19:32

Bluewind

1,0647 silver badges10 bronze badges

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

2 Comments

pimvdb Over a year ago

Also includes 0 for rand.

gen_Eric Over a year ago

rand should be Math.floor(Math.random()*3)+1. to get from 1-3.

Guard · Accepted Answer · 2011-09-19 19:39:21Z

1

I suggest jQuery and the following combination:

HTML:

<div id="myContent1">
    <p>Alternative content 1</p>
</div>

<div id="myContent2">
    <p>Alternative content 2</p>
</div>

<div id="myContent3">
    <p>Alternative content 3</p>
</div>

CSS:

#myContent1, #myContent2, #myContent3 {
    display: none;
}

JS:

1) add jQuery

2)

<script type="text/javascript">
    function randint(min, max) {
        var res;
        do {
           res = Math.floor(Math.random() * (max - min + 1)) + min;
        } while (res > max);
        return res;
    }
    var rnd = randint(1, 3);
    $('#myContent' + rnd).show();
</script>

Sample fiddle: http://jsfiddle.net/uXfcx/. Press Ctrl+Enter to run / re-run

edited Sep 19, 2011 at 19:39

answered Sep 19, 2011 at 19:33

Guard

6,9855 gold badges43 silver badges58 bronze badges

5 Comments

Guard Over a year ago

BTW, not to belittle @Bluewind's answer, but anyway, it's highly not recommended using document.write

pimvdb Over a year ago

Could you please elaborate on your while loop? Won't res always be <= max after the assignment?

Guard Over a year ago

@pimvdb due to rounding errors it's possible (with tiny probability) that Math.random could be 1

pimvdb Over a year ago

That's interesting, because the specs say: Returns a Number value with positive sign, greater than or equal to 0 but less than 1, ...

Guard Over a year ago

Yes, it should, but it's using IEEE floating point format, and some edge cases are still possible, so it's alway better to put such an insurance.

eth0 · Accepted Answer · 2011-09-19 19:39:32Z

1

var num = Math.floor(Math.random()*3) + 1;
switch(num) {
    case 1: // refactor me
        var div = document.createElement("div");
        div.setAttribute("id", "myContent" + num);
        document.body.appendChild(div);
        break;
    // etc
}

Pretty simple stuff and no jQuery :-)

answered Sep 19, 2011 at 19:39

eth0

5,1473 gold badges39 silver badges49 bronze badges

1 Comment

Kent Brewster Over a year ago

Love this. Thank you for avoiding unnecessary libraries and document.write.

Felix · Accepted Answer · 2011-09-19 19:45:25Z

1

Trivial answer with some jQuery

$(document).ready(function(){
    switch(Math.floor(Math.random()*3)+1){
         case 1: $('body').append('<div id="myContent1">Content 1</div>'); break;
         case 2: $('body').append('<div id="myContent2">Content 2</div>'); break;   
         case 3: $('body').append('<div id="myContent3">Content 3</div>'); break;
    }
 });

edited Sep 19, 2011 at 19:45

answered Sep 19, 2011 at 19:38

Felix

3,1447 gold badges44 silver badges55 bronze badges

Comments

jdias · Accepted Answer · 2011-09-19 19:40:18Z

One solution would be to create a function like:

function showRandomContent() {
    var randomNo=Math.floor(Math.random()*3)+1; //generates random number between 1 and 3

    switch (randomNo) {
        case 1:
            document.getElementById("MyContent").innerHTML = Content1;
            break;
        case 2:
            document.getElementById("MyContent").innerHTML = Content2;
            break;
        case 3:
            document.getElementById("MyContent").innerHTML = Content3;
            break;
    }
}

Now all you have to do is to include a div with id MyContent in your HTML

<div id="MyContent"></div>

The above function showRandomContent() will include the content based on the random number.

Collectives™ on Stack Overflow

How to convert PHP simple if statement to Javascript?

5 Answers 5

2 Comments

5 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related