Tentando Mvc!

babaloricha · Setembro 26, 2007

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

fercosmig · Setembro 26, 2007

testei aqui, no IE funfou de boa, só no FF não

qqer coisa posto ae!

babaloricha · Setembro 27, 2007

Opa veleu pela atenção ae embora seja so um explo do livro , caso eu consiga alteralo para funcionar no ff e no IE eu posto!

Entrar

Tentando Mvc!

Pergunta

babaloricha

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

fercosmig

Link para o comentário

Compartilhar em outros sites

babaloricha

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades