`SetInterval` ichidagi elementning orqa fon rangini o'zgartiring

I'm trying to make an

element's color change every 300 ms by using document.getElementById("h1").style and making it a variable that makes a random color, but it doesn't seem to be working.

Mana mening kodim:

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
var newColor = getRandomColor();
function color() {
    document.getElementById("h1").style = "backgroundColor = " + newColor;
    setTimeout(color(), 300)
}
0

7 javoblar

Bir necha ko'rsatkich:

  • You can't use the tag name (h1) as the argument to getElementById unless you set one in your HTML (which I would recommend renaming);

  • You need to use element.style.backgroundColor = newColor to update CSS styling;

  • You need to omit the parentheses after color() when you pass a function to setTimeout (otherwise you are passing the return value of that function);

  • You should be calling getRandomColor inside your color function, so you get a different color each time;

  • You can use setInterval instead of recursively calling setTimeout inside color, and since setInterval can pass extra parameters to your callback function you don't need to save your

    in a global variable.

Edit: You can drastically shorten your getRandomColor function by using JavaScript's native hex string conversion: number.toString(16)


Demo zarbasi:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

function getRandomColor() {
  return '#' + (
    '000000' + (Math.random() * 0x1000000).toString(16)
  ).slice(-6)
}

function color (heading) {
  heading.style.backgroundColor = getRandomColor()
}

setInterval(color, 300, document.getElementById('heading'))

Heading

</div> </div>

5
qo'shib qo'ydi

Bir necha ko'rsatkich:

  • You can't use the tag name (h1) as the argument to getElementById unless you set one in your HTML (which I would recommend renaming);

  • You need to use element.style.backgroundColor = newColor to update CSS styling;

  • You need to omit the parentheses after color() when you pass a function to setTimeout (otherwise you are passing the return value of that function);

  • You should be calling getRandomColor inside your color function, so you get a different color each time;

  • You can use setInterval instead of recursively calling setTimeout inside color, and since setInterval can pass extra parameters to your callback function you don't need to save your

    in a global variable.

Edit: You can drastically shorten your getRandomColor function by using JavaScript's native hex string conversion: number.toString(16)


Demo zarbasi:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

function getRandomColor() {
  return '#' + (
    '000000' + (Math.random() * 0x1000000).toString(16)
  ).slice(-6)
}

function color (heading) {
  heading.style.backgroundColor = getRandomColor()
}

setInterval(color, 300, document.getElementById('heading'))

Heading

</div> </div>

5
qo'shib qo'ydi

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

(function color() {
    document.getElementById("myH1").style.backgroundColor = getRandomColor();
    
    //if you want to query element by tag name
    //document.getElementsByTagName("h1")[0].style.backgroundColor = getRandomColor();
    setTimeout(color, 300)
})();
#myH1{
 transition:all 0.3s ease;
}

test

</div> </div>

5
qo'shib qo'ydi

O'zgartirish

document.getElementById("h1").style = "backgroundColor = " + newColor;

uchun

document.getElementById("h1").style.backgroundColor = + newColor;

Ushbu kod tekshirilmagan, lekin backgroundColor uslubning xususiyatidir, shuning uchun style.backgroundColor emas, balki style = backgroundColor bo'lishi kerak.

EDIT -ni tanlang

Shuningdek, yana bir savolga javob sifatida h1 getElementById funktsiyasidir, shuning uchun h1-ni ber yoki boshqacha usulni tanlang.

2
qo'shib qo'ydi

O'zgartirish

document.getElementById("h1").style = "backgroundColor = " + newColor;

uchun

document.getElementById("h1").style.backgroundColor = + newColor;

Ushbu kod tekshirilmagan, lekin backgroundColor uslubning xususiyatidir, shuning uchun style.backgroundColor emas, balki style = backgroundColor bo'lishi kerak.

EDIT -ni tanlang

Shuningdek, yana bir savolga javob sifatida h1 getElementById funktsiyasidir, shuning uchun h1-ni ber yoki boshqacha usulni tanlang.

2
qo'shib qo'ydi
function getRandomColor() {
   var letters = '0123456789ABCDEF';
   var color = '#';
   for (var i = 0; i < 6; i++ ) {
      color += letters[Math.floor(Math.random() * 16)];
   }
   return color;
}

setInterval(function() {
   document.getElementsByTagName('h1')[0].style.backgroundColor = getRandomColor();
}, 300)
0
qo'shib qo'ydi
function getRandomColor() {
   var letters = '0123456789ABCDEF';
   var color = '#';
   for (var i = 0; i < 6; i++ ) {
      color += letters[Math.floor(Math.random() * 16)];
   }
   return color;
}

setInterval(function() {
   document.getElementsByTagName('h1')[0].style.backgroundColor = getRandomColor();
}, 300)
0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb