• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Wie Javascript onclick lauffähig machen?

M

Matthias

Mitglied
Hallo,

ich bastel gerade an einer Webseite (bin noch neu im html-, css-, Javascript - Millieu).
Auf der Webseite habe ich einen div-container, der komplett anklickbar sein soll. Nach etwas
lesen im Netz habe ich

Code: 
onclick="location.href='https://www.jawowillichdennhinverlinken";

gefunden.
Ich habe es einfach ins CSS hineinkopiert (natürlich zur entsprechenden Div-Klasse), doch interessanterweise funktioniert es nicht.

Muss ich das Javascript erst zuvor im Head-Bereich festlegen oder liegt der Fehler wo anders?

Vielen Dank.
 
Das hat schon mal sehr gut geklappt. Vielen Dank. Eine Frage habe ich noch. Wie kann ich die neue Seite in einem anderen Tab öffnen, statt im gleichen?
 
Danke für den Tipp.

Ich habe mich gerade für <a> entschieden, weil bei window.open() nichts passiert ist.
Anklickbar sind jetzt allerdings nur Bilder und Text im Div. Nicht die "freien" Stellen. Wie kann ich das ändern?

Der Text hat sich jetzt eingefärbt. Ich vermute das liegt daran, dass der link bereits besucht wurde. Wie kann ich da die Originalfarbe wieder herstellen? Die Texdecoration habe ich bereits auf none.
 
Matthias schrieb:
Ich habe mich gerade für <a> entschieden, weil bei window.open() nichts passiert ist.
Anklickbar sind jetzt allerdings nur Bilder und Text im Div. Nicht die "freien" Stellen. Wie kann ich das ändern?
Zum Vergrößern anklicken....
Wenn du dem <a> ein display:block gibst, sollte das funktionieren.

Matthias schrieb:
Der Text hat sich jetzt eingefärbt. Ich vermute das liegt daran, dass der link bereits besucht wurde. Wie kann ich da die Originalfarbe wieder herstellen? Die Texdecoration habe ich bereits auf none.
Zum Vergrößern anklicken....

https://www.w3schools.com/css/css_link.asp
 
Schon besser. Die Schrift ist wieder normal. Es ist zwar nicht jeder Bereich des Divs anklickbar, doch damit fürs erste leben. Danke

Andere Frage: Ich weiß nicht, ob ich dafür ein neues Thema aufmachen muss, doch ich will auf einer Webseite einen div container mittels Button per Klick immer wieder kopieren/duplizieren/clonen (kenne den Unterschied nicht). Ich habe schon so einiges dazu gelesen, doch noch noch nicht die passende Lösung.
Der div sieht so aus:
HTML
HTML: 
 <div class="woerter">
    <div contentEditable="true">
      Fremdsprache
    </div>
    <div contentEditable="true">
      Übersetzung
    </div>
        </div>
CSS
Code: 
.woerter {
    background-color: lightblue;
    padding-left: 1%;
    padding-top: 1%;
    display: inline;
    float: left;
}

Ich hätte gerne einen Button, der mir diesen Div Container beliebig oft neu erzeugt. Hat jemand einen "einfachen" Code parat?
 
Matthias schrieb:
Hat jemand einen "einfachen" Code parat?
Zum Vergrößern anklicken....
"Einfach" zu kopieren - ja, auf jeden Fall :D
Wo "einfach" anfängt und aufhört, ist ansonsten eine subjektive Frage, die die persönlichen Fertigkeiten/Kenntnisse beantworten/vorgeben :cool:

Damit's in der Zukunft nicht dabei bleibt, siehe hierzu auch weitere Quellen, wie z.B.:
 
Hallo,
nach einiger Zeit arbeite ich an dem Projekt jetzt doch weiter.
Ich hoffe, dass das hier noch jemand liest.

Das mit dem Button und dem Duplizieren des Div-Containers hat geklappt. Für meine nächste Frage, sollte ich allerdings etwas mehr zu meinem Projekt verraten. Das Projekt ist, dieses Programm hier weitestgehend zu imitieren: https://www.birkenbihl-sprachen.com/collections/all/products/englisch_1_basis

Es gibt dort etwas unten ein kurzes Beispielvideo.

Ich möchte es später nicht verkaufen oder dergleichen. Ich lerne eben nur gerade Japanisch und dieses Programm gibt es für Japanisch nicht. Deshalb versuche ich mir das wichtigste selbst zu basteln. Das eigentliche Programm arbeitet mit Adobe Air. Aber ich denke nicht, dass ich es soweit bringen werden.

Wie auch immer meine Fragen sind:

1) Gibt es irgendwie die Möglichkeit, einen Text zu kopieren und die Wörter automatisch in verschiedene div-Container reinzukopieren. Also zum Beispiel über all, wo es ein Leerzeichen gibt, wird das folgende Wort in den nächsten div eingefügt. Wenn ich alles per Hand einfüge, dauer das Tage. Deshalb wäre mir eine Automatisierung sehr angenehm.

2) Kann ich Änderungen, die vom Java-Script vorgenommen wurden, speichern? Ich meine, ich will nicht jedes mal den japanischen Text wieder neu eingeben müssen.

3) Wie kann man das wie im Vorbild-Programm hinbekommen, dass der vom Sprecher gesprochene Text farblich hervorgehoben wird? Geht das überhaupt ohne Adobe Air?

Über Antworten auf meine gestellten Fragen würde ich mich sehr freuen.

mfg
 
Sicherlich. Wo steht der Text und wodurch soll das Kopieren angestoßen werden? Durch Klick auf einen Button?
Zum Vergrößern anklicken....

Der Text befindet sich in einem Word-Dokument. Das Kopieren würde durch Copy/Paste angestoßen werden.

Das verstehe ich leider nicht ganz.
Zum Vergrößern anklicken....

Um die Lernmethode anwenden zu können, muss unter jedem japanischen Wort die deutsche Übersetzung stehen. Da die Wörter unterschiedlich lang sind, machen sich div Container gut, da sich diese automatisch an die Breite des Inhalts anpassen können (im Gegenzug zum Textverbarbeitungsprogramm wie Word). Wenn ich allerdings einen kompletten japanischen Text einfach in einen div-Container kopiere, habe ich den ganzen Text eben in nur einem div-Container. Ich brauche jedoch jedes einzelne Wort in einem div-Container, um dem Wort die Übersetzung zuweisen zu können.

Selbstverständlich. Du kannst sie entweder clientseitig im Localstorage oder auf dem Server speichern.
Zum Vergrößern anklicken....

Kann ich es auch so machen, dass wenn ich keine Internetverbindung habe, dass sie dann Lokal gespeichert werden und wenn Internet besteht, auf dem Server?

Angenommen, bei dem gesprochenen Text handelt es sich um ein MP3: Spielt man dieses mit dem Audio-Element ab, kann man die Position ermitteln und davon abhängig den Text hervor heben. Müsste dann aber explizit konfiguriert werden.
Zum Vergrößern anklicken....

Das wäre natürlich Spitze.

Da ich mich mit html und css nicht sonderlich gut auskenne, fällt es mir schwer, die nächsten Schritte abzuleiten.

Irgendwie muss ich die Wörter des japanischen Texts jeweils in einen div-Container kopieren, der die Größe des Inhalts hat. Da bin ich allerdings überfragt. Hier ist mein bisheriger Quellcode:



HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="birkenbihl-style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>

    <body>
        
        <button onclick="myFunction()">Feld hinzufügen</button>
    
        <div style="min-width: 100px;">
  <div class="woerter">
    <div contentEditable="true">
      Japanisch
    </div>
      <div contentEditable="true">
      Hiragana
    </div>
    <div contentEditable="true">
      Übersetzung
    </div>
        </div>
</div>

CSS
[CODE].woerter {
    background-color: lightblue;
    padding-left: 1%;
    padding-top: 1%;
    display: inline;
 
    float: left;
    min-height: 65px;
}

#addmore {
    float: left;
    
}

#service {
    float: left;
    display: inline;
    
}[/CODE]




<script>
function myFunction() {
    var elmnt = document.getElementsByTagName("DIV")[0];
    var cln = elmnt.cloneNode(true);
    document.body.appendChild(cln);
}
</script>       

        
    
    </body>


</html>

Wie mache ich weiter??? Oder ist das alles noch zu unklar ausgedrückt?
 
Das verstehe ich jetzt. Mit der Javascript-Funktion split() kannst Du einen Text sehr einfach in ein Array mit den einzelnen Wörtern umwandeln. Daraus kann man dann wiederum eine Folge von div-Containern erzeugen, die das Wort enthalten.
Zum Vergrößern anklicken....

Danke für den Tipp. Ich habe gerade ein wenig im Netz danach geschaut. Leider bin ich mit Javascript alles andere als fit. Das würde mich jetzt sehr viel Zeit kosten, alles so zu verstehen, dass ich eigenständig zum Ziel komme. Daher meine Frage: Kann ich irgendwo bereits etwas Fertiges kopieren? Ich habe das hier gefunden:

Code: 
public class SplitExample{ 
public static void main(String args[]){ 
String s1="java string split method by javatpoint"; 
String[] words=s1.split("\\s");//splits the string based on whitespace 
//using java foreach loop to print elements of string array 
for(String w:words){ 
System.out.println(w); 
} 
}}

Ich habe den Code zu Testzwecken mal in mein html eingefügt. Allerdings hat sich gar nichts verändert. Muss ich dafür erst eine java-Datei anlegen?
Und wie kann ich daraus die div-Container automatisch generieren lassen?

Wie soll das geschehen? Manuell?
Zum Vergrößern anklicken....

Im schlimmsten Fall muss ich die Übersetzung manuell einfügen. Am liebsten wäre mir jedoch, wenn das Wort in einem Wörterbuch nachgeschlagen (z.B. Online-Wörterbuch wie Wadoku) wird und ich mittels eines Dropdown-Menüs die richtige Übersetzung auswählen kann.

Wenn es das originale Wort und eine Übersetzung geben soll, müsste es wahrscheich jedes Mal einen Satz von zwei divs geben mit Original und Übersetzung, so wie in dem Video?
Zum Vergrößern anklicken....

Das versteh ich jetzt nicht. Da jedes Wortpaar (japanisches Wort und Übersetzung) seinen eigenen Div hat, sollte es keine Divs mit kompletten Sätzen geben.
 
Ich habe gerade deine Demo ausprobiert. Danke dafür! Zwar verstehe ich das Java nicht wirklich, aber der Output geht in die richtige Richtung. Wenn ich dort Text eingebe, erzeugt er span-Elemente. Ich habe an der Stelle

Code: 
var cword = document.createElement("span");
anstatt "span" einfach mal div eingegeben, aber am Ergebnis konnte ich jetzt nicht erkennen, ob das irgendeine Wirkung hatte.
 
Ich hatte es mir so vorgestellt und dabe an das Video gedacht:
https://jsfiddle.net/Sempervivum/xd1922j6/
Möglicher Weise braucht man aber die inneren Spans nicht unbedingt sondern kann die Teste einfach durch <br> untereinander anordnen.
Zum Vergrößern anklicken....

Ja, so ist es schon fast richtig. Es gibt noch einen Unterschied aufgrund des japanischen Schriftsystems. Für die Kanjis (chinesischen Zeichen) brauche ich noch eine Lesehilfe. In der Praxis wird das mit "Furigana" gemacht. Das sind kleine Zeichen über den Kanjis, die einem die Aussprache verraten. Im Word-Dokument wird das mit Ruby gemacht. Macht man es mit Furigana/Ruby, braucht es nur zwei Zeilen in einem div. Wenn das nicht geht, muss die Lesehilfe in der Zeile unter den Kanjis stehen. Ich bevorzuge Furigana/Ruby. Also nur zwei Zeilen. Vielleicht kann das über den Zeichen-Code im <header> gemmacht werden.

Bild Furigana: https://japanbase.net/Furigana.html

Was Du da gefunden hast, ist Java und nicht Javascript. Kann man ohne ein Applet nicht in HTML verwenden.
Zum Vergrößern anklicken....
Danke, das wusste ich nicht. Das erklärt dann auch, weshalb Deine Demo-Skripte in meinem html funktionieren.

Dann müsste man das Wörterbuch eine API bereit stellen.
Zum Vergrößern anklicken....
Sehe ich genauso. Nur wie das Dropdown-Menü kommen soll, ist mir noch schleierhaft.

Wie setze ich jetzt das Java und html so zusammen, dass die Wörter alle in separate Divs kommen, diese Divs so groß sind, wie der Inhalt, dass sie nebeneinander floaten? Im Grunde genommen ist diese Demo von Dir ja schon die halbe Miete: https://jsfiddle.net/29pggrkn/4/

Ich würde jetzt einfach die Attribute float: left etc übers CSS einfügen. Nur wie mache ich daraus die zwei Zeilen im div wie hier: https://jsfiddle.net/Sempervivum/xd1922j6/ ???

Und wie spreche ich die Divs in Javascript an?
 
Danke für das Java.

Mit display:inline-block werden die Elemente nebeneinander angeordnet, ohne dass man floaten muss:
Zum Vergrößern anklicken....
Habe ich meinem Code hinzugefügt.

Das kann man dynamisch aus den Ergebnissen der Übersetzung aufbauen:
https://jsfiddle.net/Sempervivum/jfg6h68z/3/
Zum Vergrößern anklicken....

Habe ich auch hinzugefügt. Das Drop-Down erscheint jetzt natürlich einfach nur alleine stehend unter dem Text. Wie kriege ich das Menü ins Output-Feld. Mit dem Kopieren von
Code: 
<input id=inp>
    <select id="translation"></select>
in
HTML: 
<div id="output">

</div>
kam ich nicht zum gewünschten Ergebnis.

Hier mal mein bisheriges html:

HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="birkenbihl-style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>

    <body>
        

<div id="source" contentEditable="true">
xxx
</div>
<div id="output">

</div>
        
    
        <script>
       source.addEventListener("input", function() {
    var words = this.innerHTML.split(" ");
    output.innerHTML = "";
    words.forEach(function(word, idx) {
        var cword = document.createElement("div");
        cword.innerHTML = word + "<br>" + word;
        output.appendChild(cword);
    });
});
        
        </script>
        
          <input id=inp>
    <select id="translation"></select>
        
        <script>
        
             inp.addEventListener("change", function () {
            var params = {
                from: "deu",
                dest: "eng",
                format: "json",
                phrase: this.value,
                pretty: "true"
            };
            $.ajax({
                url: "https://glosbe.com/gapi/translate",
                method: "GET",
                dataType: "jsonp",
                data: params,
                success: function (output) {
                    console.log(output);
                    $("#translation").empty();
                    output.tuc.forEach(function (item, idx) {
                        if (item.phrase) {
                            console.log(item.phrase.text);
                            $("#translation").append("<option>" + item.phrase.text + "</option>");
                        }
                    });

                }
            });
        });
        
        </script>

        
    
    </body>


</html>
 
Ich habe das jQuery eingebunden. Ich habe auch Deinen Quelltext einfach in mein html und CSS Dokument eingefügt und den alten gelöscht. Jetzt sieht es genauso wie in der Demo aus. Allerdings ist es jetzt nicht mehr so, wie ich es mir vorgestellt habe. Die eingegebenen Wörter werden noch nach jedem Leerzeichen in einen separaten div eingefügt, doch fehlt jetzt die zweite Zeile mit der Übersetzung. Außerdem ist das Drop-Down-Menü über dem Ausgangstext statt in der zweiten Zeile. Plus für jedes Wort muss ja ein eigenes Drop-Down-Menü erhalten.

Ich würde das gerne selber machen, aber wenn ich in das Javascript schaue, erkenne ich fast gar nichts.
 
Die erscheint erst, wenn man auf ein Wort klickt und über das Select eine Übersetzung auswählt.
Zum Vergrößern anklicken....

Tatsache. Das geht echt. Danke dafür.

Was noch nicht geht:

1) Wenn ich einen Text kopiere (z.B. von Wikipedia) erhalte ich Sachen wie style="color:, sans-serif;
und andere css-Werte

2) Manche Wörter kommen im Wörterbuch nicht vor. In dem Fall sind es z.B. konjugierte Verben. Kann ich diese irgendwie manuell eingeben?

3) Kann man es so machen, dass alles automatisch ausgefüllt wird, ohne dass ich dafür klicken muss?

4) Wie kann ich einmal eingegebene Sachen speichern?

Das halte ich nicht für praktikabel, weil die vielen Menüs dann sehr viel Platz beanspruchen würden.
Zum Vergrößern anklicken....

Stimmt.
 
1) bis 3) habe ich implementiert:
https://jsfiddle.net/Sempervivum/29pggrkn/27/
Das untere Feld für die Übersetzung ist jetzt editierbar.
Zum Vergrößern anklicken....
Vielen Dank!! Blöderweise hat Glosbe (API) "zu viele Verbindungen" festgestellt. Erst nach dem ich ein Captcha gelöst habe, ging die Übersetzung wieder.

Wie möchtest Du es denn genau speichern? Den ganzen Satz mit den einzelnen Wörtern und den Übersetzungen? So dass man es in zerlegter Form wieder laden kann? Wenn man mehrere Sätze speichert, müsste man ihnen irgend einen Identifier geben.
Zum Vergrößern anklicken....

Ja, genau so.

1) Wenn ich jetzt einen Text hineinkopiere klappt bereits alles sehr gut - außer, wenn Links dabei sind, wie bei einem Wikipedia-Text. Dann erkennt er offenbar die Leerzeichen nicht.

2) Damit ich von Japanisch nach Deutsch übersetzen kann, brauche ich dafür eine andere API oder muss dafür etwas im Java-Code geändert werden?

Hier steht was von Japanisch-Deutsch-Wörterbuch und API: https://de.glosbe.com/ja/de/Java Persistence API

3) Das untere Feld war editierbar. Jetzt komischerweise nicht mehr.
 
Das ist ja schon mal ein richtiger Meilenstein. Ohne deine Hilfe wäre ich nie bis hier gekommen. Deshalb möchte ich mich an der Stelle erst einmal ganz herzlich für die Zeit und Mühe bedanken.

1) Wie auf dem Bild zu sehen, ist es noch ein wenig unaufgeräumt. Mit welchem css Befehl kann ich die beiden Zeilen in den divs alle an einer Linie ausrichten?

2) Im Japanischen gibt es keine Leerzeichen. Das heißt, ich muss den Text immer per Hand trennen, damit das Wörterbuch die einzelnen Wörter erkennt.

a) Normalerweise nutze ich ein chrome add on (Yomichan Pop up Dictionary), um unbekannte Wörter zu identifizieren und dann ein Leerzeichen einzufügen. Allerdings reagiert das nicht auf den Text in der Eingabemaske. In der Eingabemaske von google funktioniert es allerdings schon. Vielleicht liegt das aber auch daran, dass ich die Webseite noch local zu liegen habe.
​
3) Was noch fehlt, ist die Zeile mit dem Hiragana zwischen Kanji und deutscher Übersetzung. Das hatte ich gestern bereits geschrieben. Ich habe hier eine API gefunden, die das machen soll:

https://labs.goo.ne.jp/api/hiragana
Quelle: https://labs.goo.ne.jp/api/en/hiragana-translation/

Allerdings weiß ich nicht, wie man sie einbaut.

4) Das interessiert mich noch am meisten. Wie kann man wie im Original-Programm eine mp3-Datei einbinden und dann das gesprochene Wort hervorheben.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben