Javascript Variable in HTML einbinden

[LiTschii]

Ich habe folgendes Problem:

    <script type="text/javascript">
        var zählt = 0;
        var weiter = 0;
        function zähler(){
            zählt = zählt + 1;
        }
        if (zählt == 5){
            weiter = 1;
        }
    </script>
    <p><button style="font-size: 20;" onclick="" hidden="weiter">weiter</button</p>
    </body>
</html>

So wird weiter nicht als Variable erkannt da "weiter" ja nur in javascript existiert.
ich möchte dass, wenn "weiter = 1" der Button erscheint.

 

[Hayda Ministral]

Versuchs mal mit {{weiter}}

PS: Und bitte füge Code als Text zwischen Code-Tags ein.
['code']{{weiter}}['/code'] <- wenn Du die ' wegläßt gibt das

{{weiter}}

was auf jeder Bildschirmgröße lesbar und mit Copy und Paste weiter verwendbar ist.

 

[LiTschii]

Versuchs mal mit {{weiter}}

funktioniert leider auch nicht

 

[benneq]

Versuchs mal mit {{weiter}}

Wie soll das denn funktionieren, ohne entsprechendes Framework dahinter, das den HTML Code inspiziert?

@LiTschii Ganz grundsätzlich kannst du vom HTML nicht auf JavaScript Variablen zugreifen - abgesehen von Click Listenern und so.
Andersherum geht's aber:

var myVar = "some text";
document.getElementById('myId').innerHTML = myVar;

Und im HTML dann das Element entsprechend markieren:

<p id="myId">das wird ersetzt</p>

 

[Hayda Ministral]

Uh...mein Fehler. Ich bin mit Typescript und Angular unterwegs.

 

[LiTschii]

Wie soll das denn funktionieren, ohne entsprechendes Framework dahinter, das den HTML Code inspiziert?

@LiTschii Ganz grundsätzlich kannst du vom HTML nicht auf JavaScript Variablen zugreifen - abgesehen von Click Listenern und so.
Andersherum geht's aber:

var myVar = "some text";
document.getElementById('myId').innerHTML = myVar;

Und im HTML dann das Element entsprechend markieren:

<p id="myId">das wird ersetzt</p>

Heißt es dann das was ich machen will ist komplett unmöglich oder gibt es dann da alternativen zu?

 

[benneq]

Natürlich ist das möglich, wenn auch - ohne Framework wie React, Angular oder Vue - etwas umständlich, wenn der Code größer wird.

Ich hatte dein Beispiel erst falsch verstanden, weil da 2x "weiter" drin steht. Du willst auf "hidden=weiter" zugreifen.

Hier musst du auch einfach nur deine Gedanken umdrehen:

• Nicht: HTML greift auf JavaScript zu,
• Sondern: JavaScript manipuliert das HTML

Du startest also mit:

<button id="mybutton" style="font-size: 20;" onclick="" hidden>weiter</button>

Dadurch ist der Button automatisch versteckt.

Und vom JavaScript aus kannst du dann das "hidden" ausschalten bei Bedarf:

document.getElementById('mybutton').hidden = false;

Beachte "mybutton", um auf das HTML Element zuzugreifen.

 

[LiTschii]

Natürlich ist das möglich, wenn auch - ohne Framework wie React, Angular oder Vue - etwas umständlich, wenn der Code größer wird.

Ich hatte dein Beispiel erst falsch verstanden, weil da 2x "weiter" drin steht. Du willst auf "hidden=weiter" zugreifen.

Hier musst du auch einfach nur deine Gedanken umdrehen:

• Nicht: HTML greift auf JavaScript zu,
• Sondern: JavaScript manipuliert das HTML

Du startest also mit:

<button id="mybutton" style="font-size: 20;" onclick="" hidden>weiter</button>

Dadurch ist der Button automatisch versteckt.

Und vom JavaScript aus kannst du dann das "hidden" ausschalten bei Bedarf:

document.getElementById('mybutton').hidden = false;

Beachte "mybutton", um auf das HTML Element zuzugreifen.

Ja so funktioniert's, danke😃