Select a random number from lines 1 and 0 and change the color

Question

I have a string of random 1 and 0 displayed through jQuery. Now I would like to select a random number and change its color. Is it better to work with an array or string $ (div) .text ()? I can get a number from one, but how to insert it back into the div?

 var numbArray = [];

 for(i=0; i<10; i++)
 {
   var randomNumbers = Math.round(Math.random());
   $('#numbs').prepend(randomNumbers);
   numbArray[i] = randomNumbers;
 }

<div id="numbs">0000110111 </div>

The above div is the result of the code, but how to select a random element, change its color and display it on the original output?

Thanks,

Answer 1

, div html() Math.floor(Math.random() * 10) .

var index = 3;
var originalElementValue;

function colorStringValue(strIndex)
{
  strIndex = parseInt(strIndex);
  
  var character = originalElementValue.charAt(strIndex);
  $("#numbs").html(originalElementValue.substr(0, strIndex) + "<span style='color:red'>" + character + "</span>" +  originalElementValue.substr(strIndex+1));
  
  }



$(document).ready(function(){

  originalElementValue = $("#numbs").text();
  colorStringValue(index);
  
  $("#strIndex").click(function(){
  
       var rand = Math.floor(Math.random() * 10) + 0  ;
    $("#rand").html(rand);
        colorStringValue(rand);
  
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="strIndex" > Generate Random Number </button>
<br />

Random Number : <span id="rand"></span>

<br />

<div id="numbs">0000110111</div>

Hide result

Answer 2

, .

var number = '0000110111';

var index = Math.floor(Math.random() * number.length);

for(var i = 0; i < number.length; i++) {
  var n = number.charAt(i);
  if(i == index) {
    $('#numbs').append($('<span/>').css('color', 'red').text(n));
  } else {
    $('#numbs').append(n);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="numbs"></div>

Hide result

Answer 3

var numbArray = [];

for(i = 0; i< 10; i++) {
    var randomNumbers = Math.round(Math.random());
    numbArray[i] = randomNumbers;
    $('#numbs').prepend(number);
}
var randomNumberSelection = numbArray[Math.floor((Math.random() * (numbArray.length-1)) + 1)];

$('#numbs').html("");

var number;
for(number in numbArray) {
    if(number == randomNumberSelection) {
        var colorColorCodedNumber = ""+number;
            colorColorCodedNumber = colorColorCodedNumber.fontcolor("blue");//blue!
        $('#numbs').prepend(colorColorCodedNumber);
    } else {
        $('#numbs').prepend(number);
    }
}

, - , , , , , .

, , , . .

Answer 4

, div. , span ( html-) div . , , - : ( )

var randomIndex= Math.floor(Math.random() * 9); //Random number between 0 and 9.
var currentContent = $("#numbs").html(); 
var randomItem= currentContent.charAt(randomIndex);

newContent = '';
for(i=0; i<10; i++) {
    if (i == randomIndex) {
        newContent = newContent + 
        '<span style="background:red;">' + randomItem + '</span>';
    }
    else {
        newContent = newContent + currentContent.charAt(i);
    }
}

$("#numbs").html( newContent );

Answer 5

, ? .:)

     var numbArray = [];
     var sample = "<span style='color:#%COLOR%'>%NUM%</span>";
     for(i=0; i<10; i++)
     {
       var randomNumbers = Math.round(Math.random());
       var html = sample.replace('%NUM%', randomNumbers);
       var randomColor = Math.round((Math.random()* 100000000 )%16777215).toString(16);
       html = html.replace('%COLOR%', randomColor);
       $('#numbs').prepend(html );
       numbArray[i] = randomNumbers;
     }

, .

Answer 6

Good answers from everyone; thank you I did not think of adding a DOM and redrawing. I went with assigning each id number and then using css without adding. I was looking for numbers that would turn color, and when all the numbers were that color, the script would stop. I don’t know which method will work best, but this method is suitable for my limited numbers.

var whiteNumbs =
[0,1,1,0,1,1,0,1,0,1,1,0,0,0,0,1,0,1,1,1,0,0,1,0,0,1,1,1,0,0,1,0]

for(var i=0; i<whiteNumbs.length; i++) 
{
    $("#numbs").append('<span class="white" id="num_' + i + '">' +
     whiteNumbs[i] + '</span>');
}

function MakeRed()
{
    var randomNumber = Math.floor(Math.random() * whiteNumbs.length-1);

    var changeCSS = "#num_" + randomNumber;

    $(changeCSS).removeClass('white');
    $(changeCSS).addClass("red");

if ($("#numbs span").hasClass("white") )
{
    setTimeout(MakeRed,1000);
}
else
{
    return false;   
}

};

MakeRed();