Kolory napisów

Question

Siema mam taki problem na podstawie 2 i 3 lekcji Pana Mirosława chciałem stworzyć program który napis zmienia kolory.Prawię się udało ale nie do końca ponieważ zawsze ładuje mi się przykładowo napis później napis z innym kolorem a chciałbym żeby był tylko jeden który zmienia sobie kolory automatycznie.

var napis1 = "taki napis";

var numer = Math.floor(Math.random()*2)+1;
var kolory = new Array(4);
kolory[0]='<span style = "color:blue">'+napis1+'</span>'
kolory[1]='<span style = "color:#404040">'+napis1+'</span>'
kolory[2]='<span style = "color:990066">'+napis1+'</span>'
kolory[3]='<span style = "color:red">'+napis1+'</span>'

var timer1 = 0;
var timer2 = 0;

function schowaj()
{
$("#napis").fadeOut(500);
}


function spr()
{
   numer++; if (numer>3) numer=1;

	var plik = document.write(kolory[numer]);
	$("#napis").fadeIn(500);
	timer1 = setTimeout("spr()", 5000);
	timer2 = setTimeout("schowaj()", 4500);
  
document.getElementById("napis").innerHTML = plik;
}

 

Answer 1

Dajesz tylko jeden span twój tekst A potem document.getElementById("napis").color = kolor;

Answer 2

Sprawdzałeś co zwraca ta tablica? Bo mam wrażenie że tak się nie da przypisać elementów, no i brakuje średników.

Answer 3

Po pierwsze, mógłbyś napisać swój post bardziej po polsku :)

Co kodu, to:

• tablice w JavaScript możesz tworzyć po prostu var tablica = [];, a wartości przypisywać normalnie - czyli tablica[0] = 'cokolwiek'; Natomiast, jeśli chcesz wypełnić tablicę wieloma wartościami, to do tego służy choćby pętla for
• zamiast styli w formie inline możesz zmieniać im klasy zapisane w CSS z poziomu JS - element.classList.add/remove/toggle() https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
• jeśli stosujesz tylko fadeOut/fadeIn, to nie musisz podpinać jQuery: http://stackoverflow.com/a/20910008/4983840
• document.write się nie stosuje i w ogóle co chcesz zrobić w 23 linijce?
• po co zwracasz do zmiennych timer1 / timer2 wartość setTimeout()?
  https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

timeoutID is the numerical ID of the timeout, which can be used later with window.clearTimeout().

wartość zwracana z funkcji setTimeout() jest wykorzystywana do późniejszego, ewentualnego, jego wyczyszczenia - podobnie jak w setInterval(). Ty natomiast nic nie robisz dalej z tymi zmiennymi timer1 / timer2, więc po co Ci one są potrzebne? 

Comments

zrobiłem coś takiego lecz span kolor nie widzi tej tablicy ??
​
 </span>
function spr()
{
	var napis1 = "taki napis";
 
	kolory = new Array ("red","blue","green");
    
	for(numer=0; numer<=3; numer++)
{
    var plik = '<span style = "color:'+kolory[numer]+'">'+napis1+'</span>'
}
   

  document.getElementById("napis").innerHTML = plik;
}

---

Popełniłeś tu kilka błędów:

• zmienną kolory tworzysz bez słówka var, co oznacza, że jest ona globalna - zmienne globalne to zły pomysł, a przypadkowo utworzone (zapominanie o słówku var) to już bardzo zły pomysł
• w pętli for również tworzysz globalną zmienną numer
• wewnątrz pętli z kolei tworzysz zmienną lokalną plik - dostępną tylko wewnątrz pętli, w której zmieniasz atrybuty spana. Ta lokalna zmienna plik nie jest widziana poza pętlą, dlatego zapewne w konsoli dla linijki 16 wyświetla się błąd "plik is not defined"

---

function spr()
{
   	var plik ="";
   var napis1 = "taki napis";
  
  var kolory = new Array ("red","blue","green");
     
    for(numer=0; numer<=kolory.length; numer++)
{
     plik = '<span style = "color:'+kolory[numer]+'">'+napis1+'</span>'
     document.getElementById("napis").innerHTML = plik;
	}
    
 
  
}

i w konsoli zmienia kolor po kolei chciałbym żeby napis1 pokazywał mi to zmianę kolorów najpierw czerwony ,niebieski,brązowy i tak cały czas.

---

Nie bardzo wiem co chcesz uzyskać, tzn. jak napis1 ma pokazywać tą zmianę?

Coś takiego? "taki napis" dodany w różnych kolorach (z tablicy kolory)

function spr()
{
    var plik,
        napis1 = "taki napis",
        kolory = ["red","blue","green"];
      
    for(var numer = 0; numer < kolory.length; numer++)
    {
     var txt = document.createTextNode(napis1);
     
     plik = document.createElement('span');
     plik.appendChild(txt);
     plik.classList.add(kolory[numer]);

     document.getElementById("napis").appendChild(plik);
    }       
}

CSS

.red
{
  color: red;
}

.green
{
  color: green;
}

.blue
{
  color: blue;
}

span
{
  display: block;
}

 

---

dziękuje bardzo za poświęcony czas ,ale chodzi o to żeby  kolor napisu się automatycznie zmieniał

---

Automatycznie? To wrzuc funkcje w setInterval() i bedzie się powtarzać

Answer 4

var napis1 = "taki napis";
 
var numer = Math.floor(Math.random()*4)+1;
var kolory = new Array ("red","blue","green","yellow","#993366"); 
function spr()
{
   numer++; if (numer>kolory.length) numer=1;
 
    var plik = '<span style = "color:'+kolory[numer]+'">'+napis1+'</span>';
    setTimeout("spr()", 1000);
   
   
document.getElementById("napis").innerHTML = plik;
}

Po burzy mózgu początkującego się udało dziękuje wszystkim za pomoc i za cenne wskazówki