JavaScript: Bei jedem Klick plus 1 in der resultArea?

Moin, ich habe einen Button gemacht und zwar:

<div onclick="play()" class="button">
  <button class="button1">
    Bam
  </button>
</div>

und eine Result Area

<div id="resultArea"></div>

Wie kann ich es machen, dass bei jedem Klick auf den Button in der Result Area 1 addiert wird (sowas wie ein Cookie-Klicker)? Also so eine Art Counter.

1 Antwort

TechPech1984

Nutzer, der sehr aktiv auf gutefrage ist

im Thema programmieren

16.06.2022, 19:36

das problem ist nicht nur das clicken und hochzählen , dein problem ist eher das dann auch noch zu speichern wenn du mehr als nur den aktuellen user zählen willst . dazu musst du serverseitig etwas speichern .

ansonsten

document.getElementById("resultArea").innerHTML = parseInt(document.getElementById("resultArea").innerHTML)+1;

https://jsfiddle.net/taf697w1/

Jqjsjskqkqkw

Fragesteller

17.06.2022, 16:46

Ja, vielen Dank alles hat funktioniert. Ich bin erst am Anfang von JavaScript also mache ich das spichern später

Ähnliche Fragen

Zwei funktionen auf ein button packen?

Wie kann ich zwei funktionen auf einen Button packen? Also ich will das bei jedem click auf meinen button

1. immer plus 1 addiert wird: onclick="pluszahl()"

2. das ein Sound abgespielt wird: onclick="play()"

Leider konnte ich nur den counter machen und frage mich jetzt wie ich den sound auch aktivieren kann

HTML:

    <span class="center">Bam?</span>
    <div onclick="custom()" class="btn-container">
        <button onclick="pluszahl()"; twoclick="play()"    class="button1">
            Bam
        </button>
    </div>

    <div id="resultArea">0</div>

JavaScript:

function play() {
  var audio = new Audio('bam.mp3');
  audio.play();
}

function pluszahl() {
  document.getElementById("resultArea").innerHTML = parseInt(document.getElementById("resultArea").innerHTML)+1;
  }

...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

Beim click auf einen button einen sound machen, JavaScript?

Hallo, ich habe einen Button erstellt undzwar:

<button class="button"> Bam </button>

Jetzt will ich dass bei jedem klick auf dem Button ein Sound abgespielt wird.

Wie soll ich das in JavaScript schreiben?

...zur Frage

Handy rechner Javascript?

Hallo, ich habe folgenden code:

<!DOCTYPE html>

<head>

<title>Calculator</title>

<style>

</style>

function appendOperation(operation){

document.getElementById("resultArea").innerHTML += operation;

}

function calculateResult() {

let container = document.getElementById("resultArea");

let result = eval(container.innerHTML);

container.innerHTML = result;

}

function deleteLast() {

let container = document.getElementById("resultArea");

if (container.innerHTML.endsWith(' ')) {

container.innerHTML = container.innerHTML.slice(0, -3);

} else {

container.innerHTML = container.innerHTML.slice(0, -1);

}

</script>

</head>

<body>

</div>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

ICH KANN AUF DEM PC DAS = DRÜCKEN UND DEL DRÜCKEN, ALSO ZUM LÖSCHEN:

ABER AUF DEM HANDY KANN ICH NICHT = UND DEL DRÜCKEN, WORAN KANN DAS LIEGEN?

ICH NUTZE ANDROID MIT CHROME:

...zur Frage

JavaScript will nicht (Text in Element ändern per onclick)?

Hallo alle miteinander,

ich tüftle derzeit daran, den Text eines Elements zu ändern, sobald im unteren Menü ein Feld angeklickt wurde. Das Ganze funktioniert jedoch nicht und ich verstehe nicht wirklich warum. Könnt ihr mir helfen den Fehler zu finden?

Die wli-Variablen sollen den neuen Text enthalten, da ich das für jemanden programmiere, der keine Ahnung von JavaScript hat und ich es somit vereinfachen wollte, das er den Text ohne etwas kaputt zu machen, bearbeiten kann.

Hier einmal der Code, an dem ich herumprobiert habe. Allerdings ohne den CSS-Teil:

<script type="text/javascript">
  wli1 = "wli1";
  wli2 = "wli2";
  wli3 = "wli3";
  wli4 = "wli4";
  wli5 = "wli5";
  wli6 = "wli6";

  function fwli1() {
    document.getElementById("werdegangcon").value = wli1;
  }

  function fwli2() {
    document.getElementById("werdegangcon").value = wli2;
  }

  function fwli3() {
    document.getElementById("werdegangcon").value = wli3;
  }

  function fwli4() {
    document.getElementById("werdegangcon").value = wli4;
  }

  function fwli5() {
    document.getElementById("werdegangcon").value = wli5;
  }

  function fwli6() {
    document.getElementById("werdegangcon").value = wli6;
  }
</script>
<div class="conh15">
  <div class="con100">
    <div class="con_top center nummer">
      <h3>Werdegang</h3>
    </div>
    <div class="con_mid center" id="werdegangcon">
      2394    Abschluss des Abiturs mit Auszeichnung</br>
      2394    Job als Haustechnikerin
    </div>
    <div class="con_bot center">
      <ul class="werdegang">
        <li id="weli1" onclick="fwli1()">vor der Akademie</li>
        <li id="weli2" onclick="fwli2()">2395</li>
        <li id="weli3"onclick="fwli3()">2399</li>
        <li id="weli4"onclick="fwli4()">2401</li>
        <li id="weli5"onclick="fwli5()">2402</li>
        <li id="weli6" onclick="fwli6()">2403</li>
      </ul>
    </div>
  </div>
</div>

...zur Frage

Javascript Quiz: Mehrere Antworten gelten lassen?

loIch hätte die Frage, mit welchem Satzzeichen oder sonst irgendwas man die Antwortanzahlen, also, dass mehrere Antwortmöglichkeiten, also mit groß- und Kleinschreibung und "Mio" und "Millionen", erhöhen kann.

Ich würde mich über eine schnelle Antwort freuen ^^

LG Arne

PS: Hier kommen noch ein ein paar Bilder

<div class="team-anzeige">
    <h1>Team <p id="team"></p> ist an der Reihe:</h1>
    <br>
    <br>
    <button onclick="btnLos()" id="los" class="los">Los !</button>
    <br>
    <h2 id="div2"></h2>
    <br>
    <br>
    <input id="input" type="text" placeholder="Hier Antwort eintragen">
    <br>
    <br>
    <button onclick="absendeBtn()" class="absenden" id="absenden">Absenden</button>
    </div>

    <script src="main.js"></script>
v

...zur Frage

Gewinnmeldung & Neustart in TicTacToe, wie mache ich das?

Hi, ich muss für die Schule ein Tic Tac Toe Spiel programmieren und mir fehlen noch 2 Sachen bis ich das Spiel fertig habe. 1. wenn 3 X's oder O's in einer Reihe/Zeile/Diagonale sind, sollte irgendeine Gewinnmeldung kommen oder nichts mehr drückbar sein. Und 2. Ein Button wo mit ich das Spiel neustarten kann. Ich weiss jetzt nicht genau wie ich das machen soll, da ich nicht sehr gut in Programmieren bin. Könnte mir jemand vielleicht dabei helfen?

Danke im Vorraus!

btw so sieht mein Code bis jetzt aus:

<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #EE82EE; /* Violet */

color: black;

padding: 80px 80px;

text-align: center;

border-style: solid;

}

div {padding-right: 350px;

float: right;

display: grid;

grid-template-columns: auto auto auto;}

.py-script {display: none;}

h1 {text-align: center;

padding: 5px;}

#myHeader {background-color: Violet;

color: black;

padding: 40px;

text-align: center;

font-size: 30px;

font-weight: bold;}

</style>

</head>

<h1 id="myHeader">Welcome to tic tac toe</h1>

<h1 style="font-size:20px;">Enjoy your time here and Good luck!</h1>

<h1 style="font-size:20px;">May the best player win</h1>

<py-script>

x=1

a=[0,1,2,3,4,5,6,7,8,9]

def click(n):

global x

if x==1 and n==a[n]:

document.getElementById("button" + str(n)).innerHTML = "X"

x=2

a[n]="x"

elif n==a[n]:

document.getElementById("button" + str(n)).innerHTML = "O"

x=1

a[n]="o"

</py-script>

<div>

</div>

</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

JavaScript: Text nach Button-Klick in Textfeld?

Ich habe so eine Seite :

<li class="items">
    <p>some text 1</p>
    <div><button class="link" value="1">Wählen</a></div>
</li>
<li class="items">
    <p>some text 2</p>
    <div><button class="link" value="2">Wählen</a></div>
</li>
<li class="items">
    <p>some text 3</p>
    <div><button class="link" value="3">Wählen</a></div>
</li>



<form action="send" method="POST">
    <input type="text" name="text" id="text" required>
    <input type="number" name="zahl" id="zahl">
    <button type="submit" name="submit">Senden</button>
</form>

oben sind mehrere Texte mit je einem Button zum Auswählen (derzeit ohne funktion). Unten ist dann ein Formular und man kann selbst die Zahl des Textes dort eintragen.

Jetzt will ich das aber für leute vereinfachen und ermöglichen, dass man einfach auf den jeweiligen Button klickt und dann die Zahl (das value des Buttons) in das textfeld "number" eingetragen wird. Wie kann ich das mit javascript machen ? außerdem sollte der cursor direkt in das textfeld "text" gehen.

...zur Frage

Einfacher Taschenrechner JS?

Hallo :)

Ich soll einen einfachen Taschenrechner mit Eingabefeldern erstellen, so dass er am Ende wie im Bild aussieht, ich weiß nur nicht, wie ich den <script> Teil schreiben muss, sodass er auch tatsächlich funktioniert, kann mir da jemand weiterhelfen?

Hier noch mein bisheriger Code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Praktikum Webanwendungen 1</title>
    <style>
      input,
      button {
        margin: 10px;
      }
    </style>
    <script>
     
    </script>
  </head>
  <body>
    <h1>Taschenrechner</h1>
    <label for="number1">Zahl1:</label>
    <input id="number1" type="number">


    <label for="number2">Zahl2:</label>
    <input id="number2" type="number">


    <div>
      <button onclick="add()">+</button>
      <button onclick="subtract()">-</button>
      <button onclick="multiply()">x</button>
      <button onclick="divide()">/</button>
    </div>


    <label for="result">Ergebnis:</label>
    <input id="result" type="number">
  </body>
</html>

...zur Frage

CSS/HTML-Button auf Unterseite verweisen?

Hey,

ich würde gerne eine Unterseite per Button-Klick öffnen. Wie kann ich das machen?

<body>

<button class="Regelwerk" OnClick="location.href="regelwerk.html>REGELWERK</button> <br>

<button class="Updates" OnClick="location.href='http://www.google.de'">UPDATES</button> <br>

<button class="Impressum" OnClick="location.href='http://www.google.de'">IMPRESSUM</button>

</body>

...zur Frage

CSS Button und collapsible nebeneinander bekommen?

Hey, wie bekommt man den Button und das collapsible nebeneinander ?

Hier der HTML Code:

<div class="fach" id ="${nameDesFachs}"> <button type="button" class="collapsible">${nameDesFachs}</button><div class="content hidden"></div></div>

...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

Angular: Wieso wird Component zweimal aufgerufen?

Hi,

ich bin gerade dabei in Angular eine kleine Webseite zu erstellen. Einfach Just for Fun.

Kurz meine Components + Quellcode.

app-component.html

<app-toolbar></app-toolbar>


<router-outlet></router-outlet>

toolbar.component.html

<div class="head" style="background-color: darkgreen;">
    <div class="box">
            <button class="selectionButton" routerLink="/startseite">
                <div class="menuButton"></div>
                <div class="menuButton"></div>
                <div class="menuButton"></div>
            </button>
    </div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">
        <button class="selectionButton">
            <font size="5">TypeScript</font>
        </button>    
    </div>
    <div class="box">
        <button class="selectionButton">
            <font size="5">Java</font>
        </button>    
    </div>
    <div class="box">
        <button class="selectionButton" routerLink="/htmluebersicht">
            <font size="5">HTML</font>
        </button>    
    </div>
    <div class="box">
        <button class="selectionButton">
            <font size="5">Cypress</font>
        </button>
    </div>
</div>

html-page.component.html

<p>html-page works!</p>

Wenn ich jetzt auf den Button HTML ("/htmluebersicht") klicke, kommt der Text "html-page works!" .... Alles gut, so solls.
Wenn ich jetzt aber wieder auf den Menü Button ("/startseite") klicke wird meine toolbar.component.html irgendwie zweimal auf der Webseite angezeigt.

Weis jemand wieso die toolbar dann zweimal angezeigt wird?

Ich hoffe es ist verständlich was ich meine.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen