Du befindest Dich im Archiv vom ABAKUS Online Marketing Forum. Hier kannst Du Dich für das Forum mit den aktuellen Beiträgen registrieren.

JavaScript und OnClick - irgendwie hakts

Ajax, Hijax, Microformats, RDF, Markup, HTML, PHP, CSS, MySQL, htaccess, robots.txt, CGI, Java, Javascript usw.
Neues Thema Antworten
chrizz
PostRank 10
PostRank 10
Beiträge: 3044
Registriert: 05.07.2006, 10:37
Wohnort: Berlin

Beitrag von chrizz » 06.03.2007, 21:41

n'abend allesamt.

ich will eine votingfunktion ähnlich wie bei YouYube bauen (-> dat mit den sternchen)

Ich habe einmal nen etwas aufgeplusterten Quelltext. Da wird jedem bild nen onMouseOver / Out Befehl zugewiesen. darin enthalten sind neben den garfikänderungen ein Funktionsaufruf. dann ist da noch der onClick Befehl. Da steht u.a. das document.form.submit drin. soweit so gut. das funktioniert. nur die bewertungssternchen lassen sich nicht vordefinieren. also wenn das Voting bei 4 ist, dann lassen sich nicht automatisch 4 sterne anzeigen. Das geht nur, wenn man das ganze in ne funktion packt. dann allerdings geht das OnCLick element dabei hops. jedenfalls wird es nicht mehr interpretiert.

falls das jetzt alles zu umständlich war, der kann sich das bisher funktionierende script hier ansehen:
https://snoozer.de/scipts/voting_system/vote2.inc.php

Der nicht funktionierende Code sieht so aus:

Code: Alles auswählen

<script type="text/javascript">
function drawStar&#40;n&#41;&#123;
  Status = new Array&#40;'poor', 'nothing special', 'worth watching', 'pretty cool', 'AWSOME!'&#41;;
  s = '<br>';
  starid=1;
  for &#40;i = 0; i < Math.floor&#40;n&#41;; i++&#41;&#123;
    s = s+'<img src="star_full.png" name="star_'+starid+'" alt="'+Status&#91;starid-1&#93;+'" onClick="voting.hiddenfeld.value = '+starid+'; document.voting.submit&#40;&#41;;" onMouseOver="document.getElementById&#40;\'master\'&#41;.innerHTML = \''+Status&#91;starid-1&#93;+'\'+drawStar&#40;'+starid+'&#41;;" onMouseOut="document.getElementById&#40;\'master\'&#41;.innerHTML = \'rate this\'+drawStar&#40;<?php echo $stars_beginning; ?>&#41;;" >';
        starid= starid+1;
  &#125;
  if&#40;&#40;Math.round&#40;n&#41;-Math.floor&#40;n&#41;&#41;&#41;&#123;
    s = s+'<img src="star_half.png" name="star_'+starid+'" alt="'+Status&#91;starid-1&#93;+'" onClick="voting.hiddenfeld.value = '+starid+'; document.voting.submit&#40;&#41;;" onMouseOver="document.getElementById&#40;\'master\'&#41;.innerHTML = \''+Status&#91;starid-1&#93;+'\'+drawStar&#40;'+starid+'&#41;;" onMouseOut="document.getElementById&#40;\'master\'&#41;.innerHTML = \'rate this\'+drawStar&#40;<?php echo $stars_beginning; ?>&#41;;">';
        starid=starid+1;
  &#125;
  k = Math.round&#40;n&#41;;//bei 3,5 => 4
  for&#40;i=5;k<i;i--&#41;&#123;
    s = s+'<img src="star_empty.png" name="star_'+starid+'" alt="'+Status&#91;starid-1&#93;+'" onClick="voting.hiddenfeld.value = '+starid+'; document.voting.submit&#40;&#41;;" onMouseOver="document.getElementById&#40;\'master\'&#41;.innerHTML = \''+Status&#91;starid-1&#93;+'\'+drawStar&#40;'+starid+'&#41;;" onMouseOut="document.getElementById&#40;\'master\'&#41;.innerHTML = \'rate this\'+drawStar&#40;<?php echo $stars_beginning; ?>&#41;;">';
        starid= starid+1;
  &#125;
  return s;
&#125;
</script>

zu testen hier:
https://snoozer.de/scipts/voting_system/vote_frame.php

wenn da noch jemand durchblickt: hat jemand ne idee, warm dbei das OnClick nicht interpretiert wird? OnMouseOver/Out funktioniert einwandfrei....

thx in advance

Anzeige von ABAKUS

von Anzeige von ABAKUS »

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002
  • persönliche Betreuung
  • individuelle Beratung
  • kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.


chrizz
PostRank 10
PostRank 10
Beiträge: 3044
Registriert: 05.07.2006, 10:37
Wohnort: Berlin

Beitrag von chrizz » 07.03.2007, 22:48

ich hasse es ja eigentlich auf meine posts zu antworten, um ihn mal wieder nach oben zu bringen...aber in dem fall ist das problem echt unlösbar. nicht mal google weiß dazu etwas...dabei hab ich das gefühl, dass es dafür ne ganz simple erklärung gibt...

ich zähl auf euch :)

Southmedia
PostRank 10
PostRank 10
Beiträge: 7322
Registriert: 20.07.2003, 19:56

Beitrag von Southmedia » 08.03.2007, 01:10

Das Problem ist, dass man das hier alles nicht wirklich nachvollziehen kann, da müsste ich erstmal 20 Minuten investieren um das zu verstehen.

Aber ich hab dir kurz was zusammengesucht:
https://www.masugadesign.com/the-lab/sc ... ating-bar/
https://www.nofunc.com/AJAX_Star_Rating/
https://www.ajaximpact.com/detail_news_ ... cript.html
https://www.yvoschaap.com/index.php/web ... x_version/

Anonymous

Beitrag von Anonymous » 08.03.2007, 01:42

nun also... der große Unterschied bei beiden scripten ist jetzt, dass du im dem das funktioniert bei den bildern jeweils nur src änderst, während du in dem das nicht funktioniert den kompletten innerhtml des divs, inkl der Bilder neu zusammenstellst....

hatte letztens ein ähnliches problem, bei einem klick sollte ein bild ausgetauscht werden, und bei einem doppelklick etwas anderes gemacht werden.... hatte auch vorher mit dem austausch des innerhtml gearbeitet, click ging super.... nur der doppelklick ging nicht.... bin dann nach einiger recherche daraufgestoßen, dass durch die änderung des innerhtml beim click der focus verlorenging, da das bild mit dem focus ja nu nicht mehr da war... und so eben der doppelclick garnichtmehr ausgelöst werden konnte.... und beim doppelclick wird ja automatisch vorher wenigstens einmal click ausgelöst... hab dann nur noch src bei den Bildern ausgetauscht, so ging der Focus nicht verloren...

sollteste evtl. auch mal versuchen.... also nur src austauschen anstatt innerhtml komplett auszutauschen...

alternativ könnteste anstatt des onclick auch einen anker um das jeweilige Bild packen: <a href="javascript:blblaaktion"><img s....></a>
so wäre es kein onclick mehr... ;-)

auch sollteste die sterne schon direkt per php erstellen, und nicht erst über js beim onload... und pack die ganzen dinge die du da für onMouseover.. out etc hast in eigene funktionen... macht die sache dann übersichtlicher....

achja.... hab ich schon erwähnt, dass ich absolut keine Ahnung von javascript habe, und mich da selber immer erst stundenlang durchwühlen muss...

chrizz
PostRank 10
PostRank 10
Beiträge: 3044
Registriert: 05.07.2006, 10:37
Wohnort: Berlin

Beitrag von chrizz » 08.03.2007, 10:16

schade dass es hier keinen digitalen blumenstraß zu verschenken gibt.
Sonst würdet ihr jetzt beide einen bekommen.
Ich werd mir da am Wochenende mal ransetzen, mir alles durchlesen und eure Ratschläge befolgen....

Vielen Dank!

snooozer
PostRank 1
PostRank 1
Beiträge: 3
Registriert: 06.03.2007, 22:01
Wohnort: Berlin

Beitrag von snooozer » 09.03.2007, 19:09

so um es mal kurz zu sagen bin der urheber des nicht funktionierenden scriptes xD
leider hat es mit <a href="#"><img src="some_pic.png"></a> auch nicht funktioniert :/ außerdem hat er dann immer blaue ränder um die bilder gezogen weiß nicht ob das mit nem css style zu beheben wäre?!?! ist eigentlich auch egal....ich kann mir einfach nicht erklären warum das onclick event nicht ausgeführt wird, wenn man auf den stern klickt....das komische ist ja wenn ich den MouseOver so änder: onMouseOver="voting.hiddenfeld.value = 2;document.voting.submit();" wird die form sofort abgesendet und im hiddenfeld steht der entsprechende wert (hier 2) so ist es aber nicht gewünscht..die form soll ja nur abgesendet werden wenn auf den stern geklickt wurde....
des lustigste ist wenn ich mir den erzeugen quellcode(vom javascript) kopiere in ne extra html bastel gehts wunderbar mit onclick...irgendwie frisst das javascript die onclick funktion ganz EGAL was drinn steht...komischer weise weiß google auch nach intensiver suche keine antwort -.-

hoffe ihr hab mich verstanden und könnt mir weiterhelfen :)

hier nocheinmal der js-code:

Code: Alles auswählen

function drawStar&#40;n&#41;&#123;
  Status = new Array&#40;'poor', 'nothing special', 'worth watching', 'pretty cool', 'AWSOME!'&#41;;
  s = '<br>';
  starid=1;
  //"zeichnet" die ganzen sterne
  for &#40;i = 0; i < Math.floor&#40;n&#41;; i++&#41;&#123;
    s = s+'<img src="star_full.png" name="star_'+starid+'" alt="'+Status&#91;starid-1&#93;+'" onClick="document.voting.submit&#40;&#41;;" onMouseOver="document.getElementById&#40;\'master\'&#41;.innerHTML = \''+Status&#91;starid-1&#93;+'\'+drawStar&#40;'+starid+'&#41;;voting.hiddenfeld.value = '+starid+';" onMouseOut="document.getElementById&#40;\'master\'&#41;.innerHTML = \'rate this\'+drawStar&#40;2.5&#41;;" >';
	starid= starid+1;
  &#125;
  //"zeichnet" die halben sterne
  if&#40;&#40;Math.round&#40;n&#41;-Math.floor&#40;n&#41;&#41;&#41;&#123;
    s = s+'<img src="star_half.png" name="star_'+starid+'" alt="'+Status&#91;starid-1&#93;+'" onClick="document.voting.submit&#40;&#41;;" onMouseOver="document.getElementById&#40;\'master\'&#41;.innerHTML = \''+Status&#91;starid-1&#93;+'\'+drawStar&#40;'+starid+'&#41;;voting.hiddenfeld.value = '+starid+';" onMouseOut="document.getElementById&#40;\'master\'&#41;.innerHTML = \'rate this\'+drawStar&#40;2.5&#41;;">';
	starid=starid+1;
  &#125;
  //"zeichnet" die leeren sterne
  for&#40;i=5;Math.round&#40;n&#41;<i;i--&#41;&#123;
    s = s+'<img src="star_empty.png" name="star_'+starid+'" alt="'+Status&#91;starid-1&#93;+'" onClick="alert&#40;\'onclick\'&#41;;" onMouseOver="document.getElementById&#40;\'master\'&#41;.innerHTML = \''+Status&#91;starid-1&#93;+'\'+drawStar&#40;'+starid+'&#41;;voting.hiddenfeld.value = '+starid+';" onMouseOut="document.getElementById&#40;\'master\'&#41;.innerHTML = \'rate this\'+drawStar&#40;2.5&#41;;">';
	starid= starid+1;
  &#125; 
  return s;
&#125;
PS:joa ich weiß das mit den halben sternen ist nicht ganz sauber gelößt geht aber xD

Anonymous

Beitrag von Anonymous » 09.03.2007, 19:30

les dir mein vorheriges Posting noch mal genau durch....

ich würde jetzt versuchen nur mit dem Austausch des src bei Mouseover und Mouseout das ganze zu realisieren....

auch ist die funktionalität deines scriptes ohne javascript absolut eingeschränkt... es würden ja nichtmal die Sterne angezeigt werden...

der blau rahmen um die sterne lässt sich per CSS entfernen

Code: Alles auswählen

img
&#123;
border&#58; 0;
&#125;

snooozer
PostRank 1
PostRank 1
Beiträge: 3
Registriert: 06.03.2007, 22:01
Wohnort: Berlin

Beitrag von snooozer » 09.03.2007, 20:24

mhh danke erstmal voll überlesen....werd mich dann mal wieder ransetzen....
auch danke für den css-tipp auf sowas einfaches wär ich nicht gekommen^^
Ich wollt das ganze von vornerein per php lösen....naja man kann ja sehen was rauskam :roll: der snooozer

Antworten
  • Vergleichbare Themen
    Antworten
    Zugriffe
    Letzter Beitrag