Mudar a cor dum texto no html usando javascript com 4 butoes

Programação Java
#1

Ola, sou iniciante em javascript. Preciso de criar um layout no html, inserir um texto no meio do layout e nos 4 cantos colocar 4 butoes com 4 cores. Um butao em cima com uma cor, outro butao em baixo com a outra cor, outro butao a esquerda com outra cor e um butao a direita com outra cor. Podem ser, vermelho, azul, verde, e preto.

Este foi o codigo que encontrei na internet e fiz meus arranjos:

<!DOCTYPE html>
<html>

<head>
	<title>Efeito digitar em página web</title>
	
	<style type="text/css">
		#vermelho {
			color: red;
		}
		
		#verde {
			color:green;
		}
		
		#azul {
			color:blue;
		}
		
		#preto {
			color:black;
		}
	</style>
	
	<script type="text/javascript">
		var vermelho = "Ola a todos";  //Esse texto
		
		function cor1() {
			document.getElementById("vermelho").innerHTML = vermelho
		}
		
		var verde = "Ola a todos";  //Esse texto
		
		function cor2() {
			document.getElementById("verde").innerHTML = verde
		}
		
		var azul = "Ola a todos";  //Esse texto
		
		function cor3() {
			document.getElementById("azul").innerHTML = azul
		}
		
		var preto = "Ola a todos";  //Esse texto
		
		function cor4() {
			document.getElementById("preto").innerHTML = preto
		}
	</script>
</head>

<body">
	<div id="vermelho"></div>
	<div id="verde"></div> 
	<div id="azul"></div>
	<div id="preto"></div>
	
	<input type="button" name="vermelho" onclick="cor1()" value="Vermelho">
	<br>
	<br>
	
	<input type="button" name="verde" onclick="cor2()" value="Verde">
	<br><br>
	
	<input type="button" name="azul" onclick="cor3()" value="Azul">
	<br><br>
	
	<input type="button" name="preto" onclick="cor4()" value="Preto">
</body>

</html>

O resto como faco?

#2

Isso é um exercício que você está fazendo?

O que você quer mudar é a cor do botão em si (que seria background-color, não color)?

A cor e posição de cada botão pode ser definida só com css. O que você tentou obter com esse javascript?

Pra que essas divs no topo? O que elas tem a ver com os botões?

Veja um exemplo de botão vermelho alinhado embaixo e à direita:

Css:

.botao-vermelho{
  position:fixed;
  bottom:10px;
  right:10px;
  background-color:red;
}

html:

<input type="button" class="botao-vermelho" name="vermelho" value="vermelho"/>

Exemplo rodando: http://jsfiddle.net/jg5auh36/

Abraço.

#3

Obrigado pela resposta,
na verdade quero 4 butoes tendo efeito sobre o mesmo texto mudando de cor conforme a cor que esta programado para aquele butao. Quando clicar no butao vermelho, o texto muda para vermelho e quando for no azul o mesmo texto muda para azul por ai em diante

#4

Agora está mais claro o que você quer. Nesse caso, você precisa trocar a classe do texto. Não precisa de múltiplas divs com uma cor cada, você pode mudar a cor da mesma div se quiser. Pode até criar uma função única para a mudança de cor.

Exemplo rodando: http://jsfiddle.net/ge3bkrwj/

Abraço.