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

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Wolffe2

20.08.2022, 17:47

Also ich würde dafür ein button oder ein input type button nehmen.

Vom JS her würde ich das in etwa so machen. Aber theoretisch könnte man das ganze auch nur css machen.

<style>
        button {
            border: none;
            background-color: transparent;
            cursor: pointer;
        }
    </style>


    <button onclick="like()" id="like">
        <svg id="unliked" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" style="display: block; width: 100%; height: 100%;"><g><path d="M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11H3v10h4h1h9.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z M7,20H4v-8h3V20z M19.98,13.17l-1.34,6 C18.54,19.65,18.03,20,17.43,20H8v-8.61l5.6-6.06C13.79,5.12,14.08,5,14.38,5c0.26,0,0.5,0.11,0.63,0.3 c0.07,0.1,0.15,0.26,0.09,0.47l-1.52,4.94L13.18,12h1.35h4.23c0.41,0,0.8,0.17,1.03,0.46C19.92,12.61,20.05,12.86,19.98,13.17z"></path></g></svg>
        <svg id="liked" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" style="display: none; width: 100%; height: 100%;"><g><path d="M3,11h3v10H3V11z M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11v10h10.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z"></path></g></svg>
    </button>
    <button onclick="dislike()" id="dislike">
        <svg id="undisliked" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" style="display: block; width: 100%; height: 100%;"><g><path d="M17,4h-1H6.57C5.5,4,4.59,4.67,4.38,5.61l-1.34,6C2.77,12.85,3.82,14,5.23,14h4.23l-1.52,4.94C7.62,19.97,8.46,21,9.62,21 c0.58,0,1.14-0.24,1.52-0.65L17,14h4V4H17z M10.4,19.67C10.21,19.88,9.92,20,9.62,20c-0.26,0-0.5-0.11-0.63-0.3 c-0.07-0.1-0.15-0.26-0.09-0.47l1.52-4.94l0.4-1.29H9.46H5.23c-0.41,0-0.8-0.17-1.03-0.46c-0.12-0.15-0.25-0.4-0.18-0.72l1.34-6 C5.46,5.35,5.97,5,6.57,5H16v8.61L10.4,19.67z M20,13h-3V5h3V13z"></path></g></svg>
        <svg id="disliked" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" style="display: none; width: 100%; height: 100%;"><g><path d="M18,4h3v10h-3V4z M5.23,14h4.23l-1.52,4.94C7.62,19.97,8.46,21,9.62,21c0.58,0,1.14-0.24,1.52-0.65L17,14V4H6.57 C5.5,4,4.59,4.67,4.38,5.61l-1.34,6C2.77,12.85,3.82,14,5.23,14z"></path></g></svg>
    </button>


    <script>
    var like_button = document.getElementById("liked");
    var dislike_button = document.getElementById("dislike");


    var unliked = document.getElementById("unliked");
    var liked = document.getElementById("liked");
    var undisliked = document.getElementById("undisliked");
    var disliked = document.getElementById("disliked");


    var is_liked = false;
    var is_disliked = false;
    function like() {
        if (!is_liked) {
            toggleLike(liked, unliked);
            toggleLike(undisliked, disliked);


            is_liked = true;
            is_disliked = false;
        }
        else {
            toggleLike(unliked, liked);
            is_liked = false;
        }
    }


    function dislike() {
        if (!is_disliked) {
            toggleLike(disliked, undisliked);
            toggleLike(unliked, liked);


            is_disliked = true;
            is_liked = false;
        }
        else {
            toggleLike(undisliked, disliked);
            is_disliked = false;
        }
    }


    function toggleLike(el, disel) {
        el.style.display = "block";
        disel.style.display = "none";
    }
    </script>

Woher ich das weiß:Hobby

BenBerg186

Fragesteller

20.08.2022, 18:35

Vielen Dank, das war ausführlicher als ich dachte. Echt lieb. Werde das gleich mal ausprobieren. 🙏🙏🙏

TechPech1984

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

20.08.2022, 17:02

fortgeschrittener html Programmierer

dann wüstest du auch das malen anch zahlen kein künstler darseinist. HTML kann man schreiben und man ist dann ein HTML Autor . Mit Programmeiren hat das rein gar nichts zu tun .

mti eine Datenbank wird das doch einfach . Du machst irgendein element das beim onclick ein httprequest an den server sendet , dort etwas hochzählt und erhälst als ergebnis die aktuelle zahl und trägst die ganz normal als zahl ein .

Daumen Icons gibts wie sand am mehr im internet . Kannste als graphishen Button machen oder einfach so ein click event auf das element legen .

z.b. https://www.codegrepper.com/code-examples/javascript/onclick+w3schools

GoodQNextQx

20.08.2022, 17:07

Wie wärs mit nem input type Button?

Oder ein Bild und onClick ein Javascript-Aufruf.

Für's Protokoll: Deine Fragestellung klingt ziemlich großkotzig und ist falsch, da HTML keine Programmiersprache ist, sondern eine (wie der Name schon sagt) Markup-Language.

Ähnliche Fragen

JavaScript Login Script…?

Hallo 👋 kann mit jemand sagen wie ich am besten denn Input meines Login script (java script) in die Datenbank Speicher ?

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

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?

...zur Frage

Wenn HTML-Button gedrückt wird PHP-Script ausführen?

Ich möchte, dass wenn ein Button in HTML gedrückt wir, ein PHP-Script ausgeführt wird. Ich habe im Internet folgendes gefunden:

<? php 
if(isset($_POST['sent'])){
	// ...
}
?>

<form method="post" action="script.php">
<input type="submit" name="sent" value="senden">
</form>

Das funktioniert aber irgendwie nicht. Man wird wenn man auf den Button drückt nur zum PHP-Script weitergeleitet. (Bin noch neu mit Php und so, also keine Ahnung woran es liegt.) Eigentlich sollte PHP aber im Hintergrund ausgeführt werden.

Hoffe auf Antworten,

-Bohne47

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

Wie bekomme ich es hin, dass der alert bei javascript auf der Website angezeigt wird und nicht in einem extra Fenster?

Ich habe es schon mit document.write und document.get versucht. Die Aufgabenstellung lautet wie folgt:

"Erstellen Sie eine html Seite, die einen Button enthält. Klickt man auf den Button, wird eine Java Script Funktion aufgerufen, die einen beliebigen Text als alert auf der Seite ausgibt. "

Ich habe bisher folgendes:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Test</title>
   </head>
   <body>
      <form name="button">
      <input type=button value="Alert" onclick="Box()">
      </form>
      <script language="JavaScript">
         function Box() {alert("Alarm!!")};
      </script>
   </body>
</html>

...zur Frage

Wie kann ich so einen Button in Java Script machen?

Hallo, ich bin ein totaler Anfänger, was html angeht und muss für eine Website einen Timer machen (mit integriertes Java Script). Ich habe bereits ein Design aus dem Internet kopiert und geguckt was was macht und auch bearbeitet. Jetzt möchte ich aber, dass ein Button den Timer startet und der gleiche Button ihn auch stoppt. Ich hatte mir überlegt ein if not script überlegt aber weiss nicht wie ich das umsetzen soll oder ob das überhaupt klappt. Kann mir bitte jemand helfen?

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

Html Buttons mit Tastatur?

Hallo ich habe ein Input Feld mit dem Type Text und daneben eines mit dem Type Button und eigentlich funktioniert auch alles aber wenn ich im Textfeld bin und enter drücke soll das selbe passieren wie wenn ich auf den Button drücke aber stattdessen wird die Seite neu geladen?

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

Kennt jemand ein Counter Script, wo die Aufrufe/Klicks in einer counter.txt Datei im Verzeichnis abgespeichert werden - wenn möglich in HTML?

z.B

<script language="JavaScript" src="Die Website Link/counter/counter.php?ac=js">
</script>

couter.php

<?php
function get_urlvar($var_name){
	if(!isset($_GET[$var_name])){
		return ("");
	} else {
		return (trim(urldecode(mysql_escape_string($_GET[$var_name]))));
	}
}
$File = fopen('./daten/cont.txt', 'r+'); 
$Counter = fread($File, filesize('./daten/cont.txt')); 
$Counter++;
rewind($File);
fwrite($File, $Counter); 
fclose($File);
$ac=get_urlvar("ac");
if ($ac == 'js'){
echo "document.write(' Sie sind Besucher Nr. $Counter ');\n";
}else {
echo 'Sie sind Besucher Nr. '.$Counter;
}
?>

wäre ein beispiel. Bei mir geht das aber nicht, keine Ahnung warum. Hat jemand eine andere oder eine etwas einfachere Idee (die Aufrufe/Klicks müssen aber als Datei / txt abgespeichert werden).

Danke im voraus.

...zur Frage

HTML/Javscript Euro umrechnen?

Hallo!
Ich bin momentan am verzweifeln.

Ich probiere nun schon seit 1 Stunde einen Euro Umrechner mit Javascript zu progamieren.

Zuerst hat es auch ganz gut geklappt aber als ich mehrere gleichzeitig umrechnen wollte muss ich wohl einen Fehler gemacht haben.

Kennt sich irgend jemand aus und weiß was ich falsch gemacht habe?

Ich bedanke mich schon mal im Voraus :)

Hier der Code für den Rechner der Euro in mehrere Währungen Umrechnen soll:

<html>
<head><center>
<title>Umrechnung Euro - ? </title>
<script language="JavaScript">
function Umrechnung(){



    var EUROBetrag, DMBetrag, DOLLARBetrag, KRONENBetrag;

     EUROBetrag = document.Umrechnung.EURO.value;
     DMBetrag = document.Umrechnung.DM.value;
     DOLLARBetrag = document.Umrechnung.DOLLAR.value;
     KRONENBetrag = document.Umrechnung.KRONEN.value;



    EUROBetrag = DMBetrag / 1.95583;
    EUROBetrag = DOLLARBetrag / 1,13370;
    EUROBetrag = KRONENBetrag / 7,44;

  document.Umrechnung.DM.value=DMBetrag;
  document.Umrechnung.DOLLAR.value=DOLLARBetrag;
  document.Umrechnung.KRONEN.value=KRONENBetrag;

}// Ende
</script>
</center>
</head>

<body><center>
  <br>
  Wir wollen Euro Beträge umrechnen.
<br>
<br>
<form   name="Umrechnung">

EURO   <input type="text"  size="20"  name="Euro">
<br>
<p>
<input  type="button" value="Rechne um" onclick="Umrechnung()">
<p>
DM  <input type="text"  size="20"  name="DM">
DOLLAR  <input type="text"  size="20"  name="DOLLAR">
KRONEN <input type="text"  size="20"  name="KRONEN">

<br>

</form>
</center>
</body>
</html>

Und hier der Code für den Rechner der DM in Euro umrechnen soll und funkioniert:

<html>
<head><center>
<title>Umrechnung Euro - DM </title>
<script language="JavaScript">
function EuroUmrechnung(){



    var DMBetrag, EUROBetrag;

     DMBetrag = document.Umrechnung.DM.value;



    EUROBetrag = DMBetrag / 1.95583;

  document.Umrechnung.EURO.value=EUROBetrag;


}// Ende der Funktion
</script>
</center>
</head>

<body><center>
  <br>
  Wir wollen DM- Beträge in EURO umrechnen.
<br>
<br>
<form   name="Umrechnung">

DM   <input type="text"  size="10"  name="DM">

<br>
<p>
<input  type="button" value="Rechne um" onclick="EuroUmrechnung()">

<p>
EURO   <input type="text"  size="20"  name="EURO">

</form>
</center>
</body>
</html>

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

HTML Taschenrechner?

Hey ich habe einen HTML Taschenrechner von einer Website kopiert von einer Website und ich will jetzt den Taschenrechner so programmieren das er nicht über hundert rechen kann bzw. Eine Fehler Meldung dann kommt so das immer ein Fehler kommt wenn ich über hundert rechnen tun ich hab schon im Internet mich belesen aber finde nix leider vielleicht könnt ihr mir helfen

<html>
<head>
<title>HTML-Taschenrechner </title>
</head>
<body bgcolor= "# 000000" text= "gold">
<form name="calculator" >
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
Solution is
<input type="textfield" name="ans" value="">
</form>
</body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen