Ir para conteúdo
Fórum Script Brasil
  • 0

Tentando Mvc!


babaloricha

Pergunta

ola tenho seguinte codigo separado por html , css, js

musical.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Keyboard!</title>
<link rel="stylesheet" type="text/css" href="musical.css" />
<script type="text/javascript" src="musical.js"></script>
<script type="text/jscript">
window.onload=assignKeys;
</script>
</head>

<body>
<div id="keyboard" class="musicalKeys">
    <div class="do musicalButton"></div>
    <div class="re musicalButton"></div>
    <div class="mi musicalButton"></div>
    <div class="fa musicalButton"></div>
    <div class="so musicalButton"></div>
    <div class="la musicalButton"></div>
    <div class="si musicalButton"></div>
    <div class="do musicalButton"></div>
</div>
<div id="console" class="console"></div>
</body>
</html>
musical.js
// JavaScript Document
function assignKeys(){
    var keyboard=document.getElementById("keyboard");
    var keys = document.getElementsByTagName("div");
    if(keys){
        for( var i=0;i<keys.length;i++){
            var key=keys[i];
            var classes = (key.className).split(" ");
            if( classes && classes.length>=2 && classes[1] == "musicalButton"){
                var note = classes[0];
                key.note = note;
                key.onmouseover = playNote;
            }
        }
    }
}

function playNote(event){
    var note = this.note;
    var console = document.getElementById("console");
    if(note && console){
        console.innerHTML+= note+" . ";
    }
}
musical.css
/* CSS Document */
.body{
    background-color:#FFFFFF;
}

.musicalKeys{
    background-color:#ffe0d0;
    border: solid maroon 2px;
    width: 536px;
    height: 68px;
    top: 24px;
    left: 24px;
    margin:4 px;
    position: absolute;
    overflow:auto;
}

.musicalButton{
    border: solid nacy 1px;
    width: 60px;
    height: 60px;
    position:relative;
    margin: 2px;
    float: left;
}

.do{ background-color:#FF0000;}
.re{ background-color:#FFCC00;}
.mi{ background-color:#FFFF00;}
.fa{ background-color:#00FF00;}
.so{ background-color:#0000FF;}
.la{ background-color: indigo;}
.si{ background-color:#9900FF;}

div.console{
    font-family:Arial, Helvetica;
    font-size:16px;
    color:navy;
    background-color:white;
    border: solid navy 2px;
    width: 536px;
    height: 320px;
    top: 106px;
    left: 24px;
    margin: 4px;
    position: absolute;
    overflow:auto;
}

revisei todo o codigo html e js mas não consegui achar o erro.

quando o mouse passar por cima das cores no tela embaixo deveria aparecer uma nota , mas não esta funcionado.

se alguém conseguir fazer funcionar, agradeco

obs: codigo tirado do livro ajax em ação

Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...