Jump to content
Fórum Script Brasil
  • 0

Tentando Mvc!


babaloricha
 Share

Question

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 to comment
Share on other sites

2 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Forum Statistics

    • Total Topics
      149.8k
    • Total Posts
      646.6k
×
×
  • Create New...