Avatar billede Morten Professor
10. april 2017 - 15:01 Der er 20 kommentarer og
1 løsning

Billeder der bevæger sig vilkårligt af hinanden "Heste løb"

Hej Eksperter

Har prøvet at få denne script til at virke men det har ikke lykkedes mig, jeg har lavet det igennem en bog om javascript programmering, men jeg kan ikke få den til at virke.
Kan ikke se hvor det går galt.

Det handler om at få 2 heste til at løbe over skærmen, de skal bevæge sig vilkårligt.

Har læst koden igennem flere gange prøvet at se om hvad jeg har skrevet forkert, prøvet at sammenlige det der står i bogen men kan simpelhen ikke finde fejlen, og der er ikke noget der bugger på chrome.

kode er her:
<img id="hest1" src="../farver_og_grafik/tal0.gif" alt="Øverste hest" width="200" height="165" style="position:absolute; left: 10px; top:100px" />
<img id="hest2" src="../farver_og_grafik/tal0.gif" alt="Nederste hest" width="200" height="165" style="position:absolute; left: 10px; top:300px" />

<img alt="Målflag" width="78" height="64" style="position:absolute; left: 860px; top:10px; background-color:#000000;" />

<img alt="Mållinje" width="1" height="400" style="position:absolute; left: 900px; top:10px; background-color:#000000;" />

<img src="../farver_og_grafik/knap_ned.gif" alt="Startpistol" width="82" height="80" style="position:absolute; left: 410px; top:500px" onclick="startLob()" />
<script language="javascript" type="text/javascript">
timeout1 = 0;
timeout2 = 0;

function startLob(){
    flytHest1();
    flytHest2();
}
function flytHest1(){
    position = parseInt(hest1.style.left) + 1;
    hest1.style.left = position;
    timeout1 = setTimeout('flytHest1()', Math.random() * 200);
    kontrollerMaal();
}
function flytHest2(){
    position = parseInt(hest2.style.left) + 1;
    hest2.style.left = position;
    timeout2 = setTimeout('flytHest2()', Math.random() * 200);
    kontrollerMaal();
}
function kontrollerMaal(){
    position1 = parseInt(hest1.style.left);
    position2 = parseInt(hest2.style.left);
   
    if (position1 >= 704 || position2 >= 704){
        clearTimeout(timeout1);
        clearTimeout(timeout2);
       
        if (position1 >= 704){
            alert('Den øverste hest har vundet');
        } else {
            alert('Den nederste hest har vundet');
        }
    }
}
</script>

Med venlig hilsen
Morten
Avatar billede erikjacobsen Ekspert
10. april 2017 - 15:20 #1
Hvis du et sted får kaldt startLob()-funktionen ser det ud til at virke: http://fejl.com/1016700.html
(der er ikke billeder, men i Chrome kan man se noget, der bevæger sig)
Avatar billede Morten Professor
10. april 2017 - 16:02 #2
Ja det ser da ud som det skal. Den starter dog uden man har trykket.
Forstår bare ikke hvorfor jeg ikke kan se det på min localhost wampserver, skulle det ikke også virke der. Havde nemlig ikke testet det på en online server.

Tak for du lige ville teste det for mig :)
Avatar billede olsensweb.dk Ekspert
10. april 2017 - 16:33 #3
sæt px på din værdi
http://stackoverflow.com/questions/7455893/change-the-position-of-image-on-click


hent element id, med document.getElementById()

prøv dette

<script type="text/javascript">
timeout1 = 0;
timeout2 = 0;

function startLob(){
    flytHest1();
    flytHest2();
}
function flytHest1(){
    hest1 = document.getElementById('hest1');   
    position = parseInt(hest1.style.left) + 1;   
    // console.log(position); // visses i udviklings værktøjet   
    hest1.style.left = position + "px";
    timeout1 = setTimeout('flytHest1()', Math.random() * 200);
    kontrollerMaal();
}
function flytHest2(){
    hest2 = document.getElementById('hest2');
    position = parseInt(hest2.style.left) + 1;
    hest2.style.left = position + "px";
    timeout2 = setTimeout('flytHest2()', Math.random() * 200);
    kontrollerMaal();
}
function kontrollerMaal(){
    position1 = parseInt(document.getElementById('hest1').style.left);
    position2 = parseInt(document.getElementById('hest2').style.left);
    if (position1 >= 704 || position2 >= 704){
        clearTimeout(timeout1);
        clearTimeout(timeout2); 
        if (position1 >= 704){
            alert('Den øverste hest har vundet');
        } else {
            alert('Den nederste hest har vundet');
        }
    }
}
</script>
Avatar billede Morten Professor
10. april 2017 - 16:43 #4
Det virkede perfekt :) det var lige det der manglede.
Tak for hjælpen.

Det giver mig noget at arbejde på. Og ved hvad jeg skal tage højde for, når jeg kommer til at skulle lave noget i den stil.

Med venlig hilsen
Morten
Avatar billede erikjacobsen Ekspert
10. april 2017 - 16:45 #5
Der er en forskel - på mit link har jeg kaldt startLoeb() nede i bunden.

Og som olsensweb.dk er inde på, så er det oldgammel kode, der generelt ikke vil køre. Så hvis det er fra en lærebog, synes jeg du skal smide bogen væk, og finde noget andet.
Avatar billede Morten Professor
10. april 2017 - 17:28 #6
Har du en bog du kan anbefale? :)
Avatar billede erikjacobsen Ekspert
10. april 2017 - 17:35 #7
Den var jeg vist selv ude om. Jeg har ikke eet fantastisk svar.

Ham her er ganske god, når man kan noget i forvejen - henviser de rigtige steder osv: http://jstherightway.org/

Ellers kig her efter noget, der er udgivet inden for de seneste år: http://jsbooks.revolunet.com/
Avatar billede Morten Professor
10. april 2017 - 19:22 #8
Tak for hjælpen det vil jeg kigge på har vist fundet to gode bøger jeg lige vil spare op til :D HTML & CSS + Javascript & Jquery på saxo.com :o)
Avatar billede erikjacobsen Ekspert
10. april 2017 - 19:42 #9
Tiden går hurtigt for tiden. Næsten eksponentielt hurtigt. Den der "Javascript & Jquery" er vist fra 2014 - det går an. Men "HTML & CSS" er fra 2011 - det er jo evigheder siden. Jeg kender den ikke, og HTML5 og CSS har ikke udviklet sig så meget - men spændende anvendelser har. Måske noget nyere?
Avatar billede Morten Professor
10. april 2017 - 20:09 #10
Så holder jeg mig til den ene "Javascript & Jquery" så kan jeg altid købe en med html5 og css3 bog hvis jeg syntes det er noget.
Så kan jeg nok også købe den Javascript & Jquery lidt billigere ;o)

Tak for hjælpen.

Med venlig hilsen
Morten
Avatar billede olsensweb.dk Ekspert
10. april 2017 - 20:10 #11
det er fint du vil lærer JS fra bunden, men der er ikke ret mange der anvender "std" js, de fleste anvender et form for framework / lib, mest populære er jquery (dette er skrevet i std js), og evt med UI
et framwork der begynder at vinde frem er Angular , det arbejder også tæt sammen med jquery
hvis du er til CSS kunne du kigge på twitter Bootstrap det arbejder også tæt sammen med jquery
Avatar billede Morten Professor
10. april 2017 - 20:19 #12
kan jeg så springe javascript over og begynde at lære Jquery i stedet fra bunden, vil jeg få mere ud af det?
Er det lidt i samme bold gade?
Avatar billede olsensweb.dk Ekspert
10. april 2017 - 20:46 #14
#13
kender ikke bogen, men der er forholdsvis ny (Udgivet:29-04-2016), jeg ville nok bruge jquery'en hjemmeside, der har du org documentation, men der er selvføgelig på engelsk.
men bogen ser interessant ud, prøv at se om du ikke kan låne den på biblioteket før du køber den.

det kan være du skal kigge på dette link
https://www.nemprogrammering.dk/Tutorials/jQuery/jQuery_kursus_guides.php
Avatar billede erikjacobsen Ekspert
10. april 2017 - 21:01 #15
Du slipper ikke for javascript, nej. Jquery skal man kigge på. Men det er jo også ved at være "gammelt". Jquery er et bibliotek, men Angular er et framework - der er andre - men man bygger ikke rigtig nye ting uden at gøre det ovenpå et framework.

Men uanset hvad skal man kende sin javascript. Dvs. til angular2 - eller hvad det nu hedder i dag - er det så typescript. Typescript er "javascript med stærke typer".

Jeg har fulgt med, efter bedste evne, men jeg kan ikke overskue hvor man fornuftigvis bør begynde i dag.
Avatar billede Morten Professor
10. april 2017 - 21:31 #16
Tak for i ville give mig nogen gode råd, så ved jeg lidt om hvor jeg skal begynde.
Avatar billede keysersoze Guru
10. april 2017 - 22:50 #17
Der er ingen tvivl om at jQuery har været med til at gøre meget for udbredelsen og tilgangen til JavaScript, men jeg ser flere og flere gå væk fra det igen, personligt har jeg selv stort set ikke brugt det i tæt på 1½ år. Men som allerede nævnt så bevæger frontend sig ufattelig hurtigt i øjeblikket blandt andet illustreret ved denne side; https://dayssincelastjavascriptframework.com/
Avatar billede Morten Professor
11. april 2017 - 09:24 #18
Jeg tænkte på, nu har jeg skrapt i overfladen af javascript, kunne jQuery være en god ide at komme igang med, når jeg gerne vil være bedre ret visuelt på nettet når jeg laver hjemmesider.
Eller vil jeg ikke få så meget ud af det?
Jeg vil virkelig gerne starte et sted hvor det giver mening, ved godt angular2 er det helt nye og man skal have kendskab til javascript, som også er fortalt om #15.
Men når man først er ved at blive bedre, til at kode i andre sporg, end php og mysqli.
Hvad ville i starte med?

Ved godt det har været oppe at vende, men kunne godt tænke mig en retning af noget, så vil jeg gå igang med at arbejde med det.

Det er nemlig nyt for mig har kun brug det, når jeg fandt det på nettet aldrig selv rigtig rodet med det. Og det vil jeg så gerne.

Med venlig hilsen
Morten
Avatar billede Morten Professor
11. april 2017 - 09:36 #19
Jeg har fundet denne bog på bibliotek
JavaScript : programmeringssproget der aldrig forsvinder

Vil den være noget jeg skulle komme igang med, eller vil det være bedst at komme igang med jQuery, ved godt jeg spørger om det samme igen og igen, men vil lige komme med nogen forslag.
Avatar billede acore Ekspert
11. april 2017 - 09:45 #20
Hvis engelsk er ok, er der flere gode og gratis sider på http://jsbooks.revolunet.com/
Avatar billede Morten Professor
11. april 2017 - 13:47 #21
Tak for rådet ;o) Det vil jeg kigge på :)
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

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