Tabela com cor aleatória

[Guilherme Oderdenge 42]

Salve!

 

Tenho um sistema de notícias que mostra as 5 últimas notícias do site, e, nessas últimas 5, existe uma div que as engloba e todas tem a mesma cor. No entanto, quero que elas tenham cores aleatórias, então, fui no Google e pesquisei e achei um código e ele funciona!

 

<script type="text/javascript">
var colors = [ "#00d893", "#d8b200", "#d80061", "#007ad8" ];
window.onload = function() {
var rand = Math.round( Math.random() * 4 ) + 4;
while ( rand > colors.length ) {
rand -= colors.length;
}
rand -= 1;
document.getElementById( "c_esportes" ).style.backgroundColor = colors[rand];
}
</script>

Mas, qual é o problema então? Bom, só com a última notícia ele funciona, as 4 outras não alteram a cor.

 

Alguém saberia me dizer o que pode ser?

 

Desde já, grato.

Abraços!

[Maujor 144]

Poste o HTML

[Guilherme Oderdenge 42]

<script type="text/javascript">
var colors = [ "#00d893", "#d8b200", "#d80061", "#007ad8" ];
window.onload = function() {
var rand = Math.round( Math.random() * 4 ) + 4;
while ( rand > colors.length ) {
rand -= colors.length;
}
rand -= 1;
document.getElementById( "c_esportes" ).style.backgroundColor = colors[rand];
}
</script>
<?php

/**
bg[0] = "#00d893";
bg[1] = "#d8b200";
bg[2] = "#d80061";
bg[3] = "#007ad8";
 * Arquivo responsável por listar e exibir as notícias
 */
$act = $_GET["act"];

if($act == "noticias") {
	
	$id = intval($_GET["id"]);
		
	$sql = "SELECT * FROM $tablenews WHERE NewID='$id'";
	
	$query = $pag->Pag($sql);

	$rows = $news->execQuery($sql, 1, 0);
	$arr = $news->execQuery($sql, 0, 2);
	
	if($rows > 0) {
		
		echo "<title>".$arr->titulo." - Visualizando Notícia</title>";
		
		echo "<div id='data'>Adicionada em ".$news->formDateTime($arr->data, "data")." às ".$news->formDateTime($arr->data, "hora")."</div>";
		echo "<div style='font-size: 25px; font-weight: bolder;'>".$arr->titulo."</div>";
		echo "<div style='margin-top: 8px;font-size: 14px; font-style: italic;'>".$arr->sub_titulo."</div>";
		echo "<div style='margin-top: 8px;font-size: 12px; font-style: italic;'>".$arr->categoria."</div>";
		echo "<div id='por'>Por ".$arr->autor."</div>";	
		echo "<div id='noticia'>".$arr->noticia."</div> <br />";
		echo (!empty($arr->fonte)) ? "<div style='margin-top: 8px;font-size: 14px;'><b>Fonte:</b> ".$arr->fonte."</div>" : '';
		echo "<div id='tags'>".$arr->tags."</div>";	
		echo "<br /><br />";
		echo "<center><a href='index.php'>Voltar</a></center>";	

	}
	else {
		
		echo "Notícia Inválida!";
	}
}
else {

	echo "<title>Exibindo Notícias</title>";
	$sql = "SELECT * FROM $tablenews ORDER BY NewID DESC";
	
	$query = $pag->Pag($sql);

	$rows = $news->execQuery($sql, 1, 0);

	if($rows > 0) {
		
		while($arr = mysql_fetch_object($query)) {
			
			echo "
			<div id='c_esportes'>
			<img src=".$arr->thumb." style='float: left; padding: 0px; height: 100px; width: 160px;' title='".$arr->sub_titulo."'>
			<a class='title' href='index.php?act=noticias&id=".$arr->NewID."'>".$arr->titulo."</span></a>
			</div>
			
			<div id='cdesc'>
			<p>Postado em <b>".$news->formDateTime($arr->data, "data")."</b>, as <b>".$news->formDateTime($arr->data, "hora")."</b> | por <b>".$arr->autor."</b><br></p>			
			</div>
			";			
		}
		echo "<br /> <div id='pages'>";
		$pag->ConstructPagsAdmin();
		echo "</div>";
	}
	else {
		
		echo "Nenhuma notícia cadastrada ainda!";
	}
}
?>

(Maujor do blog CSS?)

[Maujor 144]

Sim sou o Maujor das CSS!

Seu PHP está gerando 5 DIV's com o mesmo ID ( <div id='c_esportes'> )!

Isto não é válido, pois um nome de ID deve ser único na página.

O script encontra o primeiro ID, aplica a cor de fundo e desconsidera as demais DIV's

com mesmo ID.

Usando PHP renomeie os ID's das DIV's para c_esportes1, c_esportes2, c_esportes3, c_esportes4 e c_esportes5.

Refaça o script para "pegar" os cinco ID's e aplicar as cores.

[Guilherme Oderdenge 42]

Certo. Então minha dúvida com relação a JS está resolvida.

Poderiam mover para a área de PHP?

 

E aliás, como fazer isso? HAHAHA

 

Abraços! ;)

[William Bruno 1501]

Apenas moderadores movem tópicos, e editam títulos.

 

Tópico Movido:

Javascript / DHTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif PHP

[Guilherme Oderdenge 42]

Ah, ok, desculpe, haha.

 

Bom, e aí, alguma solução?

 

Obrigado desde já.

Abraços!

[klonder 14]

Você pode pegar as notícias retornadas pelo Banco de Dados, e jogar em JavaScript também.

 

Foi inspirado nesse tópico que montei o segundo exemplo do tópico:

http://forum.imasters.com.br/index.php?/topic/379805-zebra-lines-linhas-com-cores-variadas/

[Guilherme Oderdenge 42]

Olá, Klonder!

 

Nossa cara, muito obrigado pela sua atenção, adorei o script! No entanto, como eu poderia aplicá-lo ao meu caso?

 

Não entendi como posso aplicar ao meu script, ao meu site, entendeu?

 

Mas de qualquer forma, obrigado desde já.

 

Abraços! ;)