HTML Element Click - Counter / Zähler?

Hey, also ich wollte fragen ob jemand weiß, wie ich einen HTML Element Script so schreibe, dass man einen ,,counter hat'' (Ich hab keine ahnung von programmieren, aber bräuchte das).

Wenn man sozusagen auf den + Button drückt, zählt es eine zahl hoch. Auf dem - Butoon zählt es dann runter. Ist das irgendwie möglich?

1 Antwort

SimpleWebDude

13.01.2023, 16:54

Hier ein Beispiel. Einfach den Code in einer html-Datei speichern.


<html>
  <head>
    <script>
      var count = 0;
      function increment() {
        count++;
        document.getElementById("count").innerHTML = count;
      }
      function decrement() {
        count--;
        document.getElementById("count").innerHTML = count;
      }
    </script>
  </head>
  <body>
    <button onclick="increment()">+</button>
    <span id="count">0</span>
    <button onclick="decrement()">-</button>
  </body>
</html>

Innerhalb des script-Elements werden JavaScript Funktionen genutzt.

Aufgerufen wird die jeweilige Funktion durch onclick im button-Element.

Woher ich das weiß:Berufserfahrung – Seit 10+ Jahren aktiv in Web- und Softwareentwicklung

GuteFrageXY13

13.01.2023, 16:56

Wäre noch erwähnenswert, dass du JavaScript verwendest, wenn die Person keine Ahnung davon hat. Ansonsten passt die Antwort sehr gut.

Ripxxr

Fragesteller

13.01.2023, 17:00

Dankeschön, klappt :) Kann man die Buttons & Schrift auch größer machen, wenn ich sie z.B. in eine Website einbauen will?

SimpleWebDude

13.01.2023, 17:05

@Ripxxr

Klar. Du kannst innerhalb des head-Elements noch eine sytle-Element mit CSS hinzufügen.

Hier ein Beispiel:

<style>
      body, button {
        font-size: 60px;
      }
</style>

In dem Beispiel erhöhst du die Schrift von allen Elementen im body-Element und allen Buttons.

Hinweis: Das style Element muss außerhalb des script-Elements eingefügt werden, aber innerhalb von head.

regex9

13.01.2023, 18:48

@Ripxxr

Noch zwei Korrekturen zum obigen Code, denn der ist in diesem Zustand invalid.

In die allererste Zeile gehört ein Doctype.

<!doctype html>

Innerhalb des head-Elements fehlt ein title-Element, welches den (nichtleeren) Seitentitel enthält.

<title>Some document title</title>

Zudem wäre es passender, den Text mit dem textContent-Property zu setzen, statt innerHTML. Immerhin wird nur ein Textknoten geändert.

Ich will einen kleinen Bot schreiben, der Infos von einer bestimmten Website ausließt und dann dementsprechend Entscheidungen triff.

Um an die Informationen zu kommen, die ich haben will, muss erst ein Button gedrückt werden. Also hab ich mir das entsprechende Element raus gesucht und ein .click() hinten angehängt und damit waren die Infos auslesbar. Wenn ich diesen Befehl aber in ein "längeres" Script einbaue wir der click erst am Ende vom Programm ausgeführt. Zumindest ändert sich auf der Website erst am Ende vom Programm etwas. Was muss ich tun damit der click auch wirklich direkt ausgeführt wird?

...zur Frage

Mit Input Element rechnen (JavaScript)?

Ich fange gerade an, programmieren zu lernen (HTML, Js, CSS) und bin gerade dabei eine Website zu coden, die Meilen in Kilometer umrechnet. Man gibt beim Input Feld die Meilen ein und wenn man den Button Convert drückt sollen diese in Kilometern angegeben werden. Bei der Js Funktion mit dem Button kommt allerdings immer NaN (Not a Number) heraus, wenn ich mit dem Eingegeben weiterrechnen möchte. Wisst ihr wie man den String von der Eingabe zu einem Zahlenwert machen kann, sodass die Funktion damit weiterrechnen kann? Danke

...zur Frage

Javascript Button erstellen?

Hallo,

ich habe einen Button in HTML erstellt und möchte, dass dieser per Click, die Farbe eine Textelements in Schwarz ändert. Den Button habe ich erstellt, komme aber bei der Funktion nicht weiter, kann jemand helfen? Danke im Voraus.

<button type="button" onclick=document.getElementById('Liste').style.color = 'black'">Drück mich!</button>

Aktueller Stand

...zur Frage

Like Button in html, java script inklusive Counter?

Ich bin ein fortgeschrittener html Autor und eigne mir gerade Java script an.

Als Übung wollte ich ein kleines eigenes Youtube(ohne Datenbank) programmieren. Ich bin nun fast fertig mit meinem kleinen Projekt, doch mir fehlt noch ein Like Button für Videos inklusive Counter der neben dem Button angezeigt werden soll. Zunächst dachte ich an den input type: "radio".

Wäre toll wenn mir einer einen Tipp geben könnte wie ich meine Website vervollständigen könnte.

Danke in Voraus

...zur Frage

Html Passwort?

Guten Tag ich bin dabei eine seite zu programmieren auf welcher man einen key eingeben muss und dann weiter geleitet wird jedoch stoße ich hirbei auf probleme und zwar ist das passwort schon automatisch eingegeben und man kann eingeben was man will man wird trotzdem weitergeleitet wie kann ich das beheben hier der code :

<!DOCTYPE html>
<html>
<body>
<h1>Key</h1>
<form action="/action_page.php">
 <label for="key">Key:</label>
 <input type="password" id="key" name="key" value="1234"><br><br>
 <input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the 
server called "hier kommt noch ein link".</p>
</body>
</html>

...zur Frage

Wie kann ich einen kurzen Text mit HTML und JavaScript auf Knopfdruck ändern?

Hallo, ich würde gern mit HTML und JavaScript erreichen, dass ich "Text1" angezeigt bekomme und darunter ein "Weiter"-Button liegt, der dann mittels Klick "Text1" mit "Text2" austauscht, "Text2" mit "Text3" etc.

hatte mir dafür einen code mit Klickzähler herausgesucht, der auch Funktioniert. Der Plan wäre es, den Klickzähler dafür zu nutzen, um die Zahl zu erhöhen und von dieser Zahl den ausgespielten Text abhängig zu machen.

Also z.B. Zahl 1 = Text1 und Zahl 2 = text2 usw.

Allerdings verstehe ich noch nicht , wie ich den Text mit der Zahl verknüpfe und diesen dann ausspielen lassen kann.

Habt ihr da vllt eine Idee oder einen Tipp, bzw. aber auch eine bessere Lösung?

Vielen Dank im Voraus!

<div>
  <center><h3 id="counter-label">0</h3></center>
   
<center>
  <div>
    <button onclick="incrementClick()">Click Me</button>
    <button onclick="resetCounter()">Reset</button>
  </div>
</center>
   
   
   
<script>
var counterVal = 0;
function incrementClick() {
  updateDisplay(++counterVal);
}
function resetCounter() {
  counterVal = 0;
  updateDisplay(counterVal);
}
function updateDisplay(val) {
  document.getElementById("counter-label").innerHTML = val;
}

...zur Frage

Swift Ui Variablen automatisch erstellen?

Moin moin,

Wie kann ich in Swift festlegen, dass wenn ein Button gedrückt wird eine Variable „Beispiel1“ erstellt wird und das wenn man den Button nochmal drückt einer Variable „Beispiel2“ erstellt wird? Die Zahl am Ende der Variablen soll ein Wert sein der Anfangs „0“ ist, nach dem der Button zum erstmal gedrückt wurde den Wert „1“ hat, nachdem zweiten Mal den Wert „2“ usw..

Vielen Dank im Voraus

...zur Frage

Cross Origin Anfrage blockiert?

Ich möchte gerade eine REST-API für mein Heimnetzwerk einrichten um über z.B. einen button einen CMD befehl auf dem Server PC auszuführen.

Mein Pythonscript für die API:

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/execute-command', methods=['POST'])
def execute_command():
  # Hier wird der Code zum Ausführen des Befehls eingefügt
  result = "Befehl wurde ausgeführt."
  return jsonify({"response": result})

if __name__ == '__main__':
  app.run(host='0.0.0.0', port=5000)

Mein HTML Script<!DOCTYPE html>
<html>
<head>
  <title>API Test</title>
</head>
<body>
  <button id="executeBtn">Befehl ausführen</button>
<script>
  document.getElementById('executeBtn').addEventListener('click', function() {
    fetch('http://localhost:5000/execute-command', { // Verwende absolute URL
      method: 'POST',
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('Fehler:', error);
    });
  });
</script>
</body>
</html>

Ich bekomme als Fehler von Firefox in der Konsole:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf http://localhost:5000/execute-command. (Grund: CORS-Anfrage schlug fehl). Statuscode: (null).

Fehler: TypeError: NetworkError when attempting to fetch resource

Entschuldigung wenn es offensichtlich ist, bin da noch sehr frisch und habe keine Lösung gefunden.

...zur Frage

HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

<title>Input to Variable</title>

var input = "Wie bekomme ich den eingegebenen input hier hin?"

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

...zur Frage

Website dauerhaft mit Javascript bearbeiten?

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      <input placeholder="Irgendwas eingeben" id="password">
    </div>
    <button onclick="password()"> Press Me</button>
    <script>
      
      function password() {
        let password = document.getElementById('password').value;
        let element = document.createElement('div');
        element.innerText = password;
        document.body.appendChild(element);
      }
    </script>
  </body>
</html>

Hi wenn ich nun die Website neu Lade dann bleiben die Divs nicht bestehen,

kann mir jemand sagen wie ich die Divs dauerhaft auch für andere clients sichtbar

behalten kann.?

...zur Frage

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zur Frage

Undisabled eines Buttons durch JavaScript?

Hallo,

ich möchte mit Hilfe von JavaScript einen Button, der vorher disabled war, wieder aktiviert, sodass er undisabled ist. Die funktioniert leider nicht und ich habe kein Ahnung an was es liegen könnte.

Mein HTML Code:

<body>

</body>

}

Mein Javascript Code:

let button = document.getElementbyid('button' );

function Test() {

button.disabled = false;

}

Weiß jemand an was es liegen könnte?

...zur Frage

Java Script wird nicht ausgeführt?

hallo, und zwar wird bei mir nicht Java Script ausgeführt. Könnt ihr mir helfen woran dass liegt???

HTML:

<!DOCTYPE html>

<head>

</head>

<body>

<h1 id="title">Today's Quiz</h1>

</ol>

</div>

</div>

<h2 id="score-title">Your Score</h2>

<button type="button" id="check-answer" onclick="checkAnswer()">Check Answers</button>

</div>

<h2>Answers :</h2>

</ol>

</div>

</body>

</html>

JAVA SCRIPT:

...zur Frage

Wo soll ich meine elemente in dem Javascript einfügen?

<script>
      document.addEventListener('DOMContentLoaded', function() {
          const scrollButtons = document.querySelectorAll('.button1');

          scrollButtons.forEach(button => {
              button.addEventListener('click', function() {
                  const target = button.getAttribute('data-target');
                  const targetElement = document.getElementById(target);

                  if (targetElement) {
                      window.scrollTo({
                          top: targetElement.offsetTop,
                          behavior: 'smooth'
                      });
                  }
              });
          });
      });
  </script>

Hi,

AI hat mir den code gegeben um meine buttons nützlich zu machen. Weil ich kein Javascript kann weiß ich nicht wo ich meine class namen einfügen soll.

Bitte helft mir

LG Lisa

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen