How to make HTML content change randomly using JS

Question

How to make JS change the content (HTML/CSS) of a website randomly and make it storage in cache?

Lets suppose I have two HTML blocks I want to display in a page. One is a red with number 1 inside, and the other is a green with number 0 inside. And I want to make it display randomly on page load, one time the green , the other time the red .

I am starting with JavaScript, and my knowledge is still very shallow

Thanks in advance

You're asking multiple questions. Scope it down to a single question. And if you have made any attempt at this, show us your attempt. — Taplar
– Taplar, Commented Mar 26, 2019 at 15:44
Welcome to SO ;) Please read this article on how to ask a good question. This would include a proper description of what you are trying to achieve, your code (or the relevant snippets) as well as your efforts showing what you have tried so far and possible error messages. It is also advisable to provide a full MCVE.. — iLuvLogix
– iLuvLogix, Commented Mar 26, 2019 at 15:47

Elizabeth · Accepted Answer · 2019-03-26 16:12:28Z

2

Let's start with an HTML element to display:

<div id="result"></div>

And some CSS to make it a square:

#result {
  width: 10em;
  height: 10em;
}

To manipulate this in JavaScript, we can:

var myValue = localStorage['myKey'] // try to access our stored value

if (!myValue) { // our stored value did not exist
  myValue = Math.random(); // get a number in the range [0, 1)
  localStorage['myKey'] = myValue; // save our value to storage
}

display(myValue);

function display(v) {
  var color;
  var num;
  if (v > 0.5) {
    color = 'red';
    num = 1;
  }
  else {
    color = 'green';
    num = 0;
  }  
  var myDiv = document.getElementById('result') // get our div
  myDiv.innerText = num; // set the text to 1 or 0
  myDiv.style.backgroundColor = color; // full list of properties here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference
}

answered Mar 26, 2019 at 16:12

Elizabeth

4992 silver badges10 bronze badges

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

1 Comment

Batman Over a year ago

Thats awesome, Ethan! Let's say I want 2 completely different blocks to be displayed (instead of red or green <div>), I mean, with different content, like texts and img, etc inside them. Them I guess I should create should use JS to add a class that makes "display: none" to them. Right?

kartik radadiya · Accepted Answer · 2019-03-26 16:45:49Z

do this for your solution

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
    .page {
        width: 200px;
        height: 200px;
    }
</style>
<div class="page"></div>


<script>
    var pageMeta =new Array([],[]);
    pageMeta[0]['data']='page 0';
    pageMeta[0]['color']='red';
    pageMeta[1]['data']='page 1';
    pageMeta[1]['color']='green';

    var curentPage = localStorage['curentPage'];
    if (!curentPage) {
        curentPage=Math.floor(Math.random() * 2);
        localStorage['curentPage'] = curentPage;
    }

    page(curentPage);

    function page(a) {
        $(".page").html(pageMeta[a]['data']);
        $(".page").css('background-color',pageMeta[a]['color']);
    }
</script>

Collectives™ on Stack Overflow

How to make HTML content change randomly using JS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related