Avatar billede ditlev Juniormester
08. september 2011 - 21:50 Der er 11 kommentarer og
1 løsning

Variabler mellem php og javascript/HTML

Hej eksperter
Jeg er ved at lave et projekt med et tegnefelt 7x7 felter, hvor man skal kunne farvelægge feltet med fire forskellige farver. Et felt farves ved at klikke på det, og hvis feltet i forvejen har den valgte farve fjernes farven. Følgende script er fremskridtet so far.

<html>
<head>
    <title></title>
<script>
function SetBg(id,col) {
    document.getElementById(id).style.backgroundColor=col;
}
</script>
</head>

<body>
<H1><center>Tegn med farver i feltet</center></h1>
<?php
       
    $vandret = 7;
    $lodret = 7;

 
    echo '<table cellspacing="1" cellpadding="1" border="3" align=center>';
        for ($i=0; $i<$lodret; $i++) {
            echo '<tr>';
                for ($n=0; $n<$vandret; $n++) {
                    // dit felt
                    $farve = '#000000';
                    echo "<td id=\"felt_".$i."_".$n."\" onClick=\"SetBg(this.id, '#000000');\" width=\"15\" height=\"15\" style=\"background-color: Red;\"></td>";
                }
            echo '</tr>';
        }
    echo '</table>';
   
// Panel farvemuligheder
    echo '<br><center>Skift farve</center>';
    echo '<table cellspacing="1" cellpadding="1" border="3" align=center>';
    echo "<td id=\"felt_1\"\" width=\"20\" height=\"20\" style=\"background-color: Black;\"></td>";
    echo "<td id=\"felt_2\"\" width=\"20\" height=\"20\" style=\"background-color: Red;\"></td>";
    echo "<td id=\"felt_3\"\" width=\"20\" height=\"20\" style=\"background-color: Blue;\"></td>";
    echo "<td id=\"felt_3\"\" width=\"20\" height=\"20\" style=\"background-color: Yellow;\"></td>";
    echo '</table>';
   
// Panel valgt farve   
    echo '<br><center>Aktuelle farve</center>';
    echo '<table cellspacing="1" cellpadding="1" border="3" align=center>';
    echo "<td id=\"felt_3\"\" width=\"30\" height=\"30\" style=\"background-color: Black;\"></td>";
    echo '</table>';
   
?>
</body>
</html>

Mit problem er nu at få indført funktionaliteten med at vælge farve, og at et farvet felt slettes ved tryk med samme farve.
Endvidere er det meningen at feltet nederst viser den aktuelt valgte farve.
Jeg har tidligere lavet dette i Flash, men kan ikke få variablerne til at spille sammen her..
Hjælp.. :)
Avatar billede majbom Novice
09. september 2011 - 19:18 #1
Avatar billede majbom Novice
09. september 2011 - 19:23 #2
jeg har rettet lidt ting i din kode - du havde bl.a. samme id på den blå i farvevælgeren som på den valgte farve...
Avatar billede ditlev Juniormester
10. september 2011 - 10:27 #3
Det ser meget fint ud.
Jeg fik selv rettet de små fejl, og kom til dette resultat:

<html>
<head>
    <title>Tegnesjov</title>
<script>
baggrund = "Silver"
aktuelle = "Black"
function SetBg(id) {
    bgcol = document.getElementById(id).style.backgroundColor
    if(bgcol!=baggrund){
        document.getElementById(id).style.backgroundColor=baggrund;
    }else{
        document.getElementById(id).style.backgroundColor=aktuelle;
    }
}
function SetBgPalette(id) {
    bgcol = document.getElementById(id).style.backgroundColor
    aktuelle = bgcol
    document.getElementById('felt_5').style.backgroundColor=bgcol;
}

</script>
</head>

<body>
<H1><center>Tegn med farver i feltet</center></h1>
<?php
       
    $vandret = 7;
    $lodret = 7;

    echo '<table cellspacing="1" cellpadding="1" border="3" align=center>';
        for ($i=0; $i<$lodret; $i++) {
            echo '<tr>';
                for ($n=0; $n<$vandret; $n++) {
                    // dit felt
                    echo "<td id=\"felt_".$i."_".$n."\" onClick=\"SetBg(this.id);\" width=\"15\" height=\"15\" style=\"background-color: Silver;\"></td>";
                }
            echo '</tr>';
        }
    echo '</table>';
   
// Panel farvemuligheder
    echo '<br><center>Skift farve</center>';
    echo '<table cellspacing="1" cellpadding="1" border="3" align=center>';
    echo "<td id=\"felt_1\" onClick=\"SetBgPalette(this.id);\" width=\"20\" height=\"20\" style=\"background-color: Black;\"></td>";
    echo "<td id=\"felt_2\" onClick=\"SetBgPalette(this.id);\" width=\"20\" height=\"20\" style=\"background-color: Red;\"></td>";
    echo "<td id=\"felt_3\" onClick=\"SetBgPalette(this.id);\" width=\"20\" height=\"20\" style=\"background-color: Blue;\"></td>";
    echo "<td id=\"felt_4\" onClick=\"SetBgPalette(this.id);\" width=\"20\" height=\"20\" style=\"background-color: Yellow;\"></td>";
    echo '</table>';
   
// Panel valgt farve   
    echo '<br><center>Aktuelle farve</center>';
    echo '<table cellspacing="1" cellpadding="1" border="3" align=center>';
    echo "<td id=\"felt_5\"\" width=\"30\" height=\"30\" style=\"background-color: Black;\"></td>";
    echo '</table>';
   
?>
</body>
</html>

Dit resultat ser fint ud, og specielt er effekten på felterne med lidt skygge super.
Jeg vil gerne se dit script og hvis du sender det som et svar er pointene dine.
Kan du i øvrigt løse problemet med at lave "#000000" som en variabel i sætningen

echo "<td id=\"felt_".$i."_".$n."\" onClick=\"SetBg(this.id, '#000000');\" width=\"15\" height=\"15\" style=\"background-color: Red;\"></td>";

således at jeg kan ændre på denne farve gennem en variabel?

/Ditlev
Avatar billede majbom Novice
10. september 2011 - 11:17 #4
Kan du i øvrigt løse problemet med at lave "#000000" som en variabel i sætningen

echo "<td id=\"felt_".$i."_".$n."\" onClick=\"SetBg(this.id, '#000000');\" width=\"15\" height=\"15\" style=\"background-color: Red;\"></td>";

således at jeg kan ændre på denne farve gennem en variabel?



gennem javascript eller php?
Avatar billede ditlev Juniormester
10. september 2011 - 14:08 #5
Gennem det der vil være mest fordelagtigt. Jeg er total novice i PHP, men skal bruge en MYSQL til behandling af data, hvorfor jeg er begyndt at arbejde med PHP. M.h.t. javascript er det også noget jeg famler med, og det skal helst kunne fungere bedst muligt hos brugeren.
Umiddelbart har jeg tænkt mig at mest muligt kører som PHP, men hvis der er forhold ved dette som er uhensigtsmæssigt vil javascript være OK :)
/Ditlev
Avatar billede majbom Novice
10. september 2011 - 15:53 #6
ja, men hvorfor skal det være en variabel? skal du kunne bestemme den med javascript (når siden er blevet sendt til brugeren), eller med php (inden siden sendes til brugeren) ?
Avatar billede ditlev Juniormester
10. september 2011 - 21:55 #7
Variablen er nok ligegyldig nu hvor funktionaliteten er på plads. Man skal kunne tegne tegningen lokalt, og resultatet skal sammenlignes med data der ligger i en database på serveren.
Det tegnede resultat omdanner jeg til et array, som kan sammenlignes med det der ligger i databasen.
Jeg roder nok lidt rundt i PHP og javascript pt. Vil det være smartere at lave det hele i javascript, og så blot bruge PHP til datatrafikken med databasen?
Avatar billede majbom Novice
10. september 2011 - 22:04 #8
du kan sende hele dit 7*7 felt som et array vha POST - enten ved at submitte en form, eller sende det via AJAX (så reloades siden ikke), og så kan du sammenligne det i php.
Avatar billede ditlev Juniormester
11. september 2011 - 08:05 #9
Der skal være en submit knap, og jeg regner med at lave det med POST. Der er flere funktionaliteter jeg skal have lavet, og det må jeg se om jeg kan finde ud af, ellers dukker der nok flere spørgsmål op her på siden.
Splazz, hvis du lægger et svar op vil det blive accepteret :)
Avatar billede ditlev Juniormester
11. september 2011 - 08:08 #10
Lige et andet spørgsmål - når jeg ser tabellen på din side er der en skyggevirkning på feltkanten, som der ikke er på mit felt der afvikles på localhost på min Mac.
Er det blot et udtryk for forskel på min localhost og din server eller har du tilføjet en smart detalje?
Avatar billede majbom Novice
11. september 2011 - 16:12 #11
jeg har ikke ændret på udseendet af tabellen - det må være dine browsere der renderer det forskelligt..
Avatar billede majbom Novice
11. september 2011 - 16:56 #12
tfp :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester