Kleiner Javascript Test schlägt fehl. Woran liegt es?

froststep

Hallo, ich fange gerade neu mit Javascript an und wollte einen kleinen Test machen. Habe dazu von selfthtml einen mini code kopiert und an mein dokument angepasst, aber es will nicht funktionieren und ich seh den fehler einfach nicht.

HTML:

HTML

<html>




    <head>


    <link rel="stylesheet" type="text/css" href="index.css" />
    <script type="text/javascript" src="index.js"></script>


    </head>

    <body>

<p 
   id="text">Hii
</p>


        <button onclick="aendern()">LOS</button>

    <script>
        document.write(test)
    </script>



    </body>
</html>

Alles anzeigen

Javascript:

Code

var Neu = "neuer Text";


function aendern() {
    document.getElementById("text")
        text.innerHTML = Neu;

var test = "Hallihallo"

Normalerweise sollte bei Aufrufen der HTML Datei sofort "Hallihallo" geschrieben werden, und wenn ich auf den button drücke dann sollte normalerweise ja "Hi" zu "neuer Text" werden, aber es klappt leider nicht. woran haperts?

Arne Drews

Hallo,

Gewöhn' Dir an, jede Befehlszeile in JavaScript mit einem Semikolon zu beenden!
Deine Funktion hat keinen schliessenden Rumpf.

Korrigiere das, dann klappt das auch.

Gruß Arne

froststep

Danke für deine antwort. habe meine fehler entdeckt.

das ist der code aus selfthtml:

Code

var Neu = "neuer <b>fetter<\/b> Text";


function Ändern() {
    document.getElementById("Absatz")
        .innerHTML = Neu;
}

Zum einen fehlt doch dort ein semikolon und zum anderen muss vor ".innerHTML" doch noch "Absatz" stehen

Arne Drews

Hallo,

Das ist auch nicht der Code, den Du in #1 gepostet hast!
Ich habe #1 1:1 kopiert und nur die Funktion geschlossen und die fehlenden Semikola gesetzt.

Generell musst Du das getElementById() in einer Variablen vorhalten:

Code

_meinElement = document.getElementById( 'Absatz' );

dann kannst Du auch bequem mit innerHTML darauf zugreifen:

Code

_meinElement.innerHTML = Neu;

Gruß Arne

ps: hast Du mal einen Link, wo genau Du das her hast. Ich kann mir selbst von selfhtml nicht vorstellen, dass das derart falsch publiziert wird.

froststep

hab das hier her: https://wiki.selfhtml.org/wiki/JavaScript/DOM/node/innerHTML

in der box auf der seite steht es ja sogar noch richtig. klickt man aber auf "ansehen" unter dem code, dann öffnet sich ein weiteres fenster und ich habe mir nur dieses angeschaut.

Edit: Denke es hat bei mir wegen dem Absatz in dem sich öffnenden fenster nicht geklappt. durch den absatz werden die bausteine ja auseinander gezogen und funktionieren dann nicht mehr oder?

- - - Aktualisiert - - -

Hoffe es ist ok, wenn ich hier fragen zu meinem miniprojekt stelle.

Code

var text1 = "neuer Text1"
var text2 = "neuer Text2";
var text3 = "neuer Text3";
var text4 = "neuer Text4";
var text5 = "neuer Text5";
var text6 = "neuer Text6";




document.getElementById("text");
document.getElementById("button");




function aendern() {
    var antwort = prompt("Willst du loslegen? (Antworte mit ja oder nein)");
    if(antwort === "ja"){
        text.innerHTML = text1;
        button.innerHTML = "Weiter";
       button.setAttribute( "onClick", "javascript: weiter();" );

    }

}


function weiter(){
    text.innerHTML = text2;
    text2 = text3;
}

Alles anzeigen

So läuft die datei ja derzeit ab:
-los drücken
-"ja" eingeben
-text 1 erscheint
-auf "weiter" klicken
-text2 erscheint
-auf "weiter" klicken
-text3 erscheint

jetzt ist die frage: wie schaffe ich es, dass beim klick auf "weiter" automatisch eine zahl addiert wird zu der variable in der funktion "weiter"? und danach dann text4, dann text5 bei einem klick auf weiter erscheint. ich stehe gerade glaub ich auf dem schlauch und bei google bin ich auch gerade nicht schlauer geworden. vielen dank, wäre sehr nett!

Arne Drews

Hallo,

Zitat

Edit: Denke es hat bei mir wegen dem Absatz in dem sich öffnenden fenster nicht geklappt. durch den absatz werden die bausteine ja auseinander gezogen und funktionieren dann nicht mehr oder?

Nein, das Beispiel dort ist absolut korrekt. Dein Absatz ( welchen Du auch immer meinst ), hat eigentlich nichts mit der Funktionalität zu tun.

Zitat

wie schaffe ich es, dass beim klick auf "weiter" automatisch eine zahl addiert wird zu der variable in der funktion "weiter"?

Zuerst mal solltest Du Wissenslücken füllen.
Das hier macht z.B. gar keinen Sinn:

Code

document.getElementById("text");
[COLOR=#333333]document.getElementById("button");[/COLOR]

Wie in #4 geschrieben musst Du die Elemente fangen oder direkt verwenden in der Funktion:

HTML

<p id="toggletext"></p>
<button onclick="forwarding()">Go on</button>


<script type="text/javascript">
var sTextPrefix = 'text';
var iCounter = 1;


document.getElementById( 'toggletext' ).innerHTML = sTextPrefix + iCounter.toString();


function forwarding() {


    document.getElementById( 'toggletext' ).innerHTML = sTextPrefix + (++iCounter).toString();


}
</script>

Alles anzeigen

Das Script habe ich nach unten verlegt, damit das Element auch wirklich schon geladen und ansprechbar ist.
Das ganze geht mit jQuery allerdings viel eleganter, finde ich:

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script type="text/javascript">


var sTextPrefix = 'text';
var iCounter = 1;


$( document ).ready( function() {


    var oToggleText = $( '#toggletext' );
    oToggleText.html( sTextPrefix + iCounter.toString() );


    $( '#forward' ).click( function() {


        oToggleText.html( sTextPrefix + (++iCounter).toString() );


    });


});
</script>


<p id="toggletext"></p>
<button id="forward">Go on</button>

Alles anzeigen

froststep

Hallo nochmal und danke für deine Hilfe. Ich wollte mich erstmal an deinem Beispiel ohne jquery versuchen.

Dieser Code ist in meiner Javascript Datei:

Code

var text1 = "neuer Text1"
var text2 = "neuer Text2";
var text3 = "neuer Text3";
var text4 = "neuer Text4";
var text5 = "neuer Text5";
var text6 = "neuer Text6";


var sTextPrefix = 'text';
var iCounter = 1;


document.getElementById( 'toggletext' ).innerHTML = sTextPrefix + iCounter.toString();


function forwarding() {


    document.getElementById( 'toggletext' ).innerHTML = sTextPrefix + (++iCounter).toString();


}

Alles anzeigen

Jedoch wird in die HTML Datei dann nicht der Inhalt der Variable Text 2,3,4usw. geschrieben, sondern im Browser steht einfach nur "Text2".

Arne Drews

Hallo,

Zitat

Jedoch wird in die HTML Datei dann nicht der Inhalt der Variable Text 2,3,4usw. geschrieben, sondern im Browser steht einfach nur "Text2".

Dann habe ich #5 falsch verstanden. In dem Fall solltest Du Dir Arrays ansehen:

Code

var texte = [
    'neuer Text 1',
    'neuer Text 2',
    'neuer Text 3',
    'neuer Text 4'
];

Und dann nutzt Du den iCounter, um auf die einzelnen Elemente zuzugreifen:

Code

document.getElementById( 'toggleText' ).innerHTML = texte[iCounter++];

Gruß Arne

froststep

Danke, klappt super jetzt.

Das war jetzt ja sozusagen der erste Schritt:

Zitat

Knopf drücken: Text 1
Nochmal Knopf drücken: Text 2

Jetzt würde ich es gerne erweitern mit 2 Knöpfen:

Ein Text steht dort, dann hat man zwei Knöpfe zur Auswahl. Je nach dem, welchen Knopf man drückt, erscheint ein neuer Text und die Beschriftung der alten Knöpfe ändert sich.

Ich bin noch dabei zu überlegen, wie das ablaufen könnte, aber vielleicht hat jemand von euch ja Anreize für mich. Ich weiß auch nicht, ob ich mit mehreren Arrays arbeite oder vielleicht alle Knöpfe und Texte in einen einzelnen Array packe.

Arne Drews

Hallo,

Sag doch mal im Detail, worum es überhaupt geht.
Vielleicht können wir Dir dann ja noch bessere oder sinnvollere Lösungen anbieten.

Gruß Arne

froststep

https://play.google.com/store/apps/det…ne.google&hl=de

Auf diesem Spiel soll mein Spiel basieren, also von der Mechanik her.

In dem Spiel gibt es auch Benachrichtigungen, Speicherungen und Zeitabstände zwischen den erscheinenden Texten, aber davon bin ich ja noch etwas entfernt. Zudem kann man auf der Basis von HTML und CSS usw. glaub ich eh keine Benachrichtigungen aktivieren, was ich auch eig gar nicht vor habe.

froststep

Ich möchte, dass ein Knopf unsichtbar wird, wenn nichts auf ihm steht. Hier mein Code:

HTML:

Code

<button id="buttonRechts" onclick="setTimeout(forwardingRechts,1100);">-</button>

Javascript:

Code

while(document.getElementById('buttonRechts').innerHTML==="-"){
    document.getElementById('buttonRechts').style.visiblity = "hidden";
}

CSS

Code

#buttonRechts{
    visibility: visible;
}

Funktioniert leider nicht. Habe schon einige Dinge ausprobiert.

Arne Drews

Hallo,

Mit jQuery hast es einfacher:

HTML

<button>-</button>

Code

$( 'button' ).click( function(e) {


        e.preventDefault();
        $( this ).hide();


});

Gruß Arne

froststep

danke, aber funktioniert leider auch nicht. ich möchte, dass jeder knopf, der "-" draufstehen hat, gar nicht erst angezeigt wird. Muss ich noch was an dem code ändern?

Arne Drews

Hallo,

Dann machste eben ein Loop:

Code

$( document ).ready( function() {




    $( 'button' ).each( function() {




        _content = $( this ).html();




        if ( _content == '-' ) {




            $( this ).hide();

        }




    });




});

Alles anzeigen

froststep

vielen dank. hat geklappt.

Anderes Thema:
bei diesem Code stürzt der Browser ab:

Code

function forwardingLinks() {                        //Button links
    playaudio();
    while(iCounterText < part1.length-1){
      [U][I][B]  setTimeout(verzog,500);[/B][/I][/U]
    }
        document.getElementById('buttonLinks').innerHTML = part1[part1.length-1];
}

Bei diesem Code nicht:

Code

function forwardingLinks() {                        //Button links
    playaudio();
    while(iCounterText < part1.length-1){
        [U][I][B]verzog();[/B][/I][/U]
    }
        document.getElementById('buttonLinks').innerHTML = part1[part1.length-1];
}

Wie kann "setTimeout" dafür sorgen, dass der Browser abstürzt? Ohne setTimeout werden mir 5 Texte auf einmal angezeigt. die funktion "verzog()" wurde also 5 mal direkt nacheinander durchgeführt. Durch setTimeout möchte ich erreichen, dass zwischen jedem text 500 ms verzögerung liegen. Verstehe nicht, warum dann der browser abstürzen sollte.

Arne Drews

Hallo,

Was soll auch die Verzögerung innerhalb einer Schleife?!
Ausserdem heisst es setTimeout und nicht _setTimeout.

Gruß Arne

froststep

der _ vor "setTimeout" kam durch die Formatierung des Textes. in den Dateien ist es richtig geschrieben.

ich möchte halt , dass ein ganzes array ausgeworfen wird, jedoch mit Verzögerung zwischen jedem teil. es soll ja ein Text basiertes Spiel werden.

Arne Drews

Hallo,

Bin mir jetzt grad nicht so sicher, aber ich glaube in der Form musst Du den Funktionsnamen in Quotes fassen:

Code

setTimeout( 'verzoeg', 500 );

Gruß Arne

Tags