Wie kann ich einen Knopf programmieren mit CSS den man 1. Drücken kann, und der 2. Wenn man ihn drückt eine Text Box erscheinen lässt?

Hallo! Ich bin Hobby.Programmierer und ich programmiere seit ungefähr 3 Wochen... es macht mir richtig Spaß allerdings würde es mir noch mehr Spaß machen wenn ich Knöpfe programmieren könnte. Mein Ziel: Ein Knopf der drückbar ist und wenn man ihn drückt eine Text Box erscheint mit einem Text den man selber reinschreiben kann.

Ich würde mich über Hilfe echt freuen.

P.S.: Ich nutze VSCode.. aber ich glaube das ist egal was man nutzt oder?

2 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

11.05.2024, 21:50

Das ist eher eine Aufgabe für HTML + JavaScript. Mit CSS kannst du nur das Aussehen von Seitenelementen beeinflussen.

Eine einfache Umsetzung könnte so aussehen:

<!doctype html>
<title>Example</title>
<button onclick="prompt('Dialog title', 'Field default value')" type="button">Click me</button>

Der klickbare Knopf wird mittels eines button-Elements umgesetzt. Dieses Element bekommt einen Event Handler zugeordnet, der bei Klick auf den Button aufgerufen wird. Der Handler ruft die prompt-Funktion auf, die einen Dialog mit Textfeld anzeigt.

(...) aber ich glaube das ist egal was man nutzt oder?

Es ist nur wichtig, einen Texteditor zu haben, mit dem man Text speichern kann.

Anonym33522

Fragesteller

11.05.2024, 21:52

Vielen Dank! Ich werde mir die Basics nochmal angucken und das auch ausprobieren

Ireeb

11.05.2024, 21:48

CSS ist keine Programmiersprache, sondern legt nur fest, wie Dinge aussehen.

Die Programmiersprache des Webs is JavaScript, und auch für den von dir beschriebenen Fall würde man in der Regel JavaScript verwenden.

JavaScript kann Elemente auf einer HTML Seite auslesen, hinzufügen, verändern oder entfernen, und noch viel mehr. Bei fast jeder Webseite, die interaktiv ist, steckt JavaScript dahinter, auch beispielsweise gutefrage.net nutzt es intensiv.

Daher würde ich dir empfehlen, einfach mal die JS Basics anzuschauen, damit sollte dein Anwendungsfall recht einfach zu lösen sein.

VSCode ist gut für die Entwicklung von HTML, CSS und JavaScript geeignet.

Woher ich das weiß:Berufserfahrung – Tätigkeit als Webentwickler in einer Digitalagentur

Anonym33522

Fragesteller

11.05.2024, 21:50

Ich danke dir echt! ich kenne auch ein youtube video das ich mir anschauen kann.. es geht zwar 90 minuten aber dafür lohnt es sich (hoffentlich)

Ireeb

12.05.2024, 16:10

@Anonym33522

Wenn du dich generell mit Webentwicklung beschäftigen willst, dann ist JavaScript nicht nur lohnenswert, sondern eine unerlässliche Grundlage.

HTML, CSS und JS zu erlernen entspricht in diesem Bereich Laufen zu lernen, ohne geht es quasi nicht.

Es gibt noch unglaublich viele Technologien in diesem Bereich, und sie bauen alle auf HTML, CSS und JS auf.

Ich arbeite beispielsweise primär mit Vue, TypeScript und SASS.

Vue ist ein Framework, das HTML, CSS und JS verwendet. TypeScript ist eine erweiterte Version von JavaScript und SASS ist eine erweiterte Version von CSS.

Wenn man die Grundlagen hat, steht einem direkt eine ganze Ebene an neuen Möglichkeiten zur Verfügung.

Anonym33522

Fragesteller

12.05.2024, 18:18

@Ireeb

Ich gebe dir da recht. Ich habe mir gestern Nacht noch das Video angeguckt und ich denke ich kann die Basics noch besser

Die Aufgabenstellung lautet:

"Füge der Webseite einen Button hinzu, bei dessen Betätigung eine Box erscheint, die den Text anzeigt: „Diese Funktion ist noch nicht implementiert. Bitte schließen.“

Die Box soll beim Klick auf den Text wieder unsichtbar werden.

Die Box soll ihre Farbe ändern, wenn man mit der Maus darauf fährt."

Einzelne Punkte schaffe ich, aber nicht dass die Box z.B. wieder weg geht wenn man in den Text klickt ...

Freue mich über jede Nachricht!

...zur Frage

Warenkorb programmieren?

Hallo, ich bin noch immer am programmieren eines Webshops (soll nie online kommen, ist nur zum spaß). Ich wollte mal fragen, wie man einen Warenkorb programmiert. Vielen Dank im voraus! (Ich programmiere mit html, css, javascript und php)

...zur Frage

Welche Prgrammiersprache?

Hallo,

Ich will momentan anfangen programmieren zu lernen.

Erst hatte ich mit html und css angefangen, das hat mir jedoch nicht so Spaß gemacht. Jetzt hatte ich mit Javascipt angefangen. Nun wollte ich wissen für was javascript alles so benutz wird, und ob es sich als Einsteiger Sprache handelt?

Ps: Gibt es bekannte Spiele in Javascript?

...zur Frage

Kann ich Geld verdienen mit dem Programmieren von Websiten?

Hallo,

ich bin 23 Jahre jung und Student. Seit mehreren Monaten bringe ich mir selbst intensiv HTML, CSS, JS und PHP bei.

Mir macht das Erstellen von Webseiten Spaß, jedoch war die ursprüngliche Intention dahinter, damit irgendwann nebenher etwas dazu verdienen zu können.

Nun bin ich an einem Punkt angelangt, an dem ich mich frage, ob es die Mühe überhaupt wert ist? Ich habe einiges dazu in Foren gelesen und die Aussichten sind eher düster, wenn man den Nutzern Glauben schenken darf.

Baukastensysteme werden oft als Grund genannt, jedoch finde ich Webseiten, die mit solchen Baukästen erstellt wurden, total hässlich und die sehen alle gleich aus.

Gibt es hier Mitglieder, die Erfahrung mit dem Erstellen von Webseiten haben und mir ihre Einschätzung mitteilen würden? Ich möchte damit nicht reich werden, aber würde mir damit gerne ein zweites Einkommen (500-1000Euro/ Monat) aufbauen, um nicht so abhängig vom Hauptberuf zu sein. Entweder mit einem Kleingewerbe oder als freier Mitarbeiter in einer Agentur. So hatte ich mir das mal überlegt.

...zur Frage

Frontend Entwickler Werkstudent Fragen?

Mir macht das programmieren von Websites spaß. Ich studiere gerade Medieninformatik und will mehr in die Web-Entwicklung mich vertiefen. und später fullstack arbeiten sprich frontend und backend.

Was verdient ein Frontend Enwickler, Was verdient ein Backend Enwickler? Bekommt man dann zb weniger Gehalt als ein zb. Softwareentwickler?
Ich lerne gerade noch viel mit html css und javascript zu programmieren. Hab noch nie mit Framworks gearbeitet und kenne mich da auch noch nicht so gut aus. Kann mir wer darüber was sagen was frameworks sind und wozu man diese braucht?
will als Werkstudent Frontend-Entwickler mich bewerben. Kann mir, darüber jemand erzählen, was man so für aufgaben bekommt? reicht es fürs erste wenn ich mich auf html css und javascript fokussiere? Was sollte ich noch lernen wenn ich als Werkstudent arbeiten will?

sind vllt viele Fragen, aber ich wäre sehr dankbar über eine Anwort=).

...zur Frage

Wie programmiere ich ein Popup für meine Website?

Hallo!

Ich würde gerne ein Popup programmieren, welches beim Laden der Seite angezeigt wird und dann einen Knopf auf dem Popup mit dem man das Popup schließen kann. Ich habe versucht nach sowas zu Googlen habe aber keine brauchbaren Infos / Tutorials / etc. gefunden.

...zur Frage

Wie programmiere ich Buttons, dass wenn ich diese drücke der Infotext dazu erscheint?

Hallo... Ich muss für die Schule eine Internetseite programmieren mit CSS. Auf der Internetseite gibt es 4 Buttons, wie kann ich das programmieren, dass wenn ich den einen Button drücke der dazugehörige Text erscheint und wenn ich einen anderen drücke, dann dieser Text erscheint.

Danke im Voraus :)

...zur Frage

Wie nennt man diesen Job indem man Website mit HTML, CSS erstellt?

Hallo,

Man kann ja Websiten mit HTML, CSS und Javascript programmieren. Aber wie nennt man diesen Job indem man es machen kann. Weil ich mich damit gut auskenne und es gerne machen würde weil es mir viek spaß macht!

...zur Frage

Mit einem Button klick CSS verändern?

Ich will, das wenn ich auf ein Knopf drücke, sich die Farbe von meinem Text ändert wie geht das?

...zur Frage

[JS] Auf Knopfdruck Text ändern?

Also ich möchte das wenn man auf einen Knopf drückt,

der <a> Tag zu 2 verändert wird.

So sieht es aus:

<a>1</a>

Nach dem Knopfdruck:
<a>2</a>

Wenn man dann wieder auf den Knopf drückt, soll es wieder zu <a>1</a> werden.

...zur Frage

CSS: Wie kann ich Karten gleich groß anzeigen?

Guten Tag,

ich habe einen kleinen Design-Bug in meiner Webseite.

(s. Bild)

Wie kann ich dieses Problem lösen?

Mein CSS:

<style>
.item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 10%;
  border-radius: 5px;
  background: #191c29;
  color: rgb(88 199 250 / 100%);
}
.con {
  background: #adadad;
  overflow: auto;
  overflow-x: hidden;
  background: #212534;
}

.item:hover {
  box-shadow: 0 16px 32px 0 rgba(250,250,250,0.2);
}
img {
  border-radius: 5px 5px 0 0;
  height: 150px;
	width: 100%;
}
.container {
  padding: 2px 16px;
}
body {
  overflow: hidden; 
}


* {box-sizing: border-box;}


body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}




* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.item {
  float: left;
 /* width: 25%; */
  width: 15%; /* 10%*/
  height: 50%; /* 50% */
  padding: 20 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.row {
  margin: 0 -5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-sm {
  text-align: center;
}
/* @media screen and (max-width: 600px) { */
@media screen and (max-width: 800px) {
  .item {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.text-center {
  text-align: center;
}
</style>

Der Code von einer Karte:

<div class="row">
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
</div>

Danke für jede Hilfe. Ich weiß, dass der CSS-Code nicht der schönste ist, allerdings lerne ich die Sprache noch!

...zur Frage

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zur Frage

Box ohne text <html/CSS>?

Hallo,

ich möchte eine Box also einen quader programmieren mit Rahmen (kein text imput), in den ich später einen Button reingeben und den border-radius möchte ich auch bearbeiten.

Kennt irgendjemand den html code dafür?

Danke im voraus

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

Was möchtest Du wissen?

Deine Frage stellen