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

Beitragsersteller

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 Beiträge

JavaScript Login Script…?

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

...zum Beitrag

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?

...zum Beitrag

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?

...zum Beitrag

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:

...zum Beitrag

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?

...zum Beitrag

Farbändern mit Java Script?

Hi Leute,

Vor meinem Webdevelopment-Kurs habe ich eine Aufgabe bekommen, die ich teils gelöst und teils nicht habe.

Der Teil, den ich nicht lösen konnte, war, dass der gesamte Inhalt vom Browser (in meinem Fall (Google Chrome) schwarz werden soll, sobald ich auf den Button drücke. Das müsste man mit Java Script machen, wovon ich keine Ahnung habe. HTML und CSS von der Aufgabe sind vorhanden.

Danke für eure Mühe im Voraus

NeueWelt100

...zum Beitrag

Java in HTML Programm nutzen?

Ich habe Java gelernt und kenne mich damit relativ gut aus. Meine Frage wäre, ob ich mir jetzt anschauen müsste wie JavaScript funktioniert oder ist es auch möglich auf einer Website die mit HTML geschrieben wurde die Funktionen von Buttons usw. mit Java umzusetzen?

...zum Beitrag

HTML JavaScript, PAP zu script?

Hallo, meine aufgabe ist es, diesen PAP in Javascript umzuwandeln, leider verstehe ich dies nicht so richtig, ich bleibe mit den if's und else hängen, bitte um hilfe

bitte outputs in alert(" ") oder dokument.write auf keinen fall in html inputs, und inputs in prompt

...zum Beitrag

Ich habe ein HTML, CSS und Java Script Problem. Kann mir wer helfen?

Guten Tag,

Ich bin momentan dabei mir eine Webseite zu erstellen. Auf der Webseite habe ich einen Button der beim betätigen eine Sidebar öffnet. Wenn man aber die Webseite öffnet ist die Sidebar schon geöffnet, aber ich möchte das man zuerst auf den Button drücken muss und beim betreten der Webseite die Sidebar geschlossen ist.

Vielen Dank im Voraus!

...zum Beitrag

Werte aus Datenbank anzeigen mit JS?

Hallo,

ich habe folgenden Code für mein Formular:

<form action="/message1" method="post">
  <div class="input">
    <input type="text" placeholder="Chat" id="input" name="input1">
  </div>
  <div class="send">
    <button type="submit" onclick="message();">Send</button>
  </div>
</form>

Nun noch das JS onclick-Event:

function message() {
  input = document.getElementById("input").value;
  count++;

  if (input == "") {
    alert("please type your message!");
  }
  else {
    if (count % 2 == 0) {
      let newDiv = document.createElement("div");
      newDiv.id = "divMessage";
      newDiv.style.display = "flex";
      newDiv.style.justifyContent = "flex-start";
      newDiv.style.margin = "45px";
      newDiv.style.backgroundColor = "#303032";
      newDiv.style.borderRadius = "10px";
      newDiv.style.padding = "10px";
      newDiv.style.marginTop = "80px";
      newDiv.style.color = "white";
      newDiv.style.marginBottom = "80px";
      newDiv.style.width = "120px";
      newDiv.innerHTML = input;

      let chatMessages = document.querySelector(".chat-messages");
      chatMessages.appendChild(newDiv);
    }

Und nun noch das Reinschreiben mit node.js in die MariaDB-Datenbank:

app.post('/message1', async (req, res) => {
  const input = req.body.input1;
  console.log(input);
  const conn = await pool.getConnection();
  await conn.query(`INSERT INTO test.handy (id, name) VALUES (2, '${input}')`);
  conn.release();
});

Nun möchte ich aber, das, was in die Datenbank geschrieben wurde, beim Aktualisieren der Seite immer noch im "newDiv" anzeigen. Wie geht das?

...zum Beitrag

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

...zum Beitrag

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

...zum Beitrag

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.

...zum Beitrag

HTML Check Textfeld Input Onclick?

Kann man irgendwie definieren, dass die Onclick aktion nur ausgeführt wird, wenn in 2 bestimmten textfeldern bestimmter text steht? Also, dass z.B. In Feld 1 "Test" steht und in Feld 2 "Tee" steht, dass man nur dann die Button onclick action ausführen kann und sonst nichts passiert? Möchte, dass wenn in beiden Textfeldern eine bestimmte sache steht, erst dann auf einen Button geclickt werden kann, welcher einen dann weiterleitet.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen